i have tried this code
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(41.63, -1),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
and it worked perfectly displaying the google maps image, but i have integrated this work to a bigger project made with Marionette and Jade, it shows : Uncaught TypeError: Cannot read property 'maps' of undefined and doesn't charge whole the files of google Maps( like :http://maps.googleapis.com/maps-api-v3/api/js/23/5/map.js.) in my views.js i have wrote:
mod.mapTemplate = Marionette.ItemView.extend({
template:_.template($('#actors-map-template').html()),
initialize: function () {
var mapProp = {
center: new google.maps.LatLng(41.63, -1),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(
'googleMap'), mapProp);
},
onRender: function () {
google.maps.event.addDomListener(window, 'load', this.initialize);
}
});
and in my jade page :
#googleMap(style='width:500px;height:380px;')
the script is added in other file with all the scripts that are initialized of the whole app, i can't change the architecture, it is not mine.