1

I'm using backbone.js as my framework. My problem is, I got this weird problem when I try integrating google map with backbone.js. 

Uncaught TypeError: Cannot set property 'position' of undefined

The tutorial is from this site.

https://developers.google.com/maps/documentation/javascript/examples/event-closure

Even I already try these solutions, the problem still occurring.

My code below

js

define(['jquery', 'underscore', 'backbone', 'text!modules/map/mapListViewTemplate.html'], function($, _, Backbone, mapListViewTemplate) {
    var MapListView = Backbone.View.extend({
        initialize: function() {},
        render: function() {
                var mapOptions = {
                    zoom: 4,
                    center: new google.maps.LatLng(-25.363882, 131.044922)
                };
                var map = new google.maps.Map($('#map-canvas'), mapOptions);
                // Add 5 markers to the map at random locations
                var southWest = new google.maps.LatLng(-31.203405, 125.244141);
                var northEast = new google.maps.LatLng(-25.363882, 131.044922);
                var bounds = new google.maps.LatLngBounds(southWest, northEast);
                map.fitBounds(bounds);
                var lngSpan = northEast.lng() - southWest.lng();
                var latSpan = northEast.lat() - southWest.lat();
                for (var i = 0; i < 5; i++) {
                    var position = new google.maps.LatLng(
                    southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
                    var marker = new google.maps.Marker({
                        position: position,
                        map: map
                    });
                    marker.setTitle((i + 1).toString());
                    this.attachSecretMessage(marker, i);
                }

            this.$el.html(mapListViewTemplate);
        },
        attachSecretMessage: function(marker,num) {
            var message = ['This', 'is', 'the', 'secret', 'message'];
                var infowindow = new google.maps.InfoWindow({
                    content: message[num]
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(marker.get('map'), marker);
                });
        },
        remove: function() {
            Backbone.View.prototype.remove.call(this);
            $(window).off('scroll');
        }
    });
    return MapListView;
});

html

<div id="map-canvas"></div>

Thanks.

Community
  • 1
  • 1
Nurdin
  • 23,382
  • 43
  • 130
  • 308
  • That message is comming because of line `var map = new google.maps.Map($('#map-canvas'), mapOptions);` Check your map container or change that line to `var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);` – Anto Jurković May 20 '14 at 08:47
  • I already included. check my edited question. – Nurdin May 20 '14 at 08:51
  • I already stated in my question that his solution not helping. – Nurdin May 20 '14 at 09:03

2 Answers2

6

You have to change line

var map = new google.maps.Map($('#map-canvas'), mapOptions);

to

var map = new google.maps.Map($('#map-canvas')[0], mapOptions);

Map() constructor expect Node object. See also jQuery get DOM node? and How to get a DOM Element from a JQuery Selector

Update: If id of map container div element is maplist-page than use:

var map = new google.maps.Map($('#maplist-page')[0], mapOptions);

See also example at jsbin without backbone.js.

Community
  • 1
  • 1
Anto Jurković
  • 11,188
  • 2
  • 29
  • 42
0

The problem is I'm guessing that the div is not rendered yet when the map is initialized. So, this.$el.html(mapListViewTemplate); should be the first line inside the render method.

And then initialise Google Maps with a dom element, not a jQuery object as Anto Jurkovic stated: var map = new google.maps.Map($('#map-canvas')[0], mapOptions);

Zulfa Juniadi
  • 1