Cannot read property 'maps' of undefined with jade and marionette.js while it works with HTML

327 views
Skip to first unread message

chahnez hachaichi

unread,
Jan 20, 2016, 4:37:39 PM1/20/16
to Google Maps JavaScript API v3


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.

jitendra

unread,
Jan 21, 2016, 4:52:57 PM1/21/16
to Google Maps JavaScript API v3
Hi,
I think you need to add the element(div) with id also on Jade page, where you can add html tags.

Thanks.

Sudip Barman

unread,
Jan 21, 2016, 4:52:58 PM1/21/16
to Google Maps JavaScript API v3
Hi,
Did you include the Map Library in the page you are accessing the google map object

Barman
Reply all
Reply to author
Forward
0 new messages