-2

I am trying to display google map using backbonejs below. 

define([
'require',
'backbone',
'text!../templates/list.html',
], function(Require, Backbone, Template){
    return Backbone.View.extend({
        tagName: 'div',
        template: _.template(Template),
        initialize: function(){
            this.render();
        },
        render: function(){
            var self = this;
            this.$el.html(this.template());
            self.initMap();
        },
        initMap: function(){
            var target = { lat: 1.098706, lng: 104.026971 };
            var mapOption = {zoom: 12, center: target };
            var mapElem = $(".container").find("#map-canvas");
            var map = new google.maps.Map(mapElem, mapOption);
            var marker = new google.maps.Marker({
                position: target,
                map: map
            });
        },
    });

});

After render finish, I got this error:

Uncaught TypeError: Cannot set property 'position' of undefined

I am still confused about where 'position' came from. I've tried some solutions from here and here

Have you some ideas to fix it? Thanks.

Community
  • 1
  • 1
kikiwisaka
  • 41
  • 1
  • 7

1 Answers1

0

Try changing 

var mapElem = $(".container").find("#map-canvas");

to

var mapElem = $(".container").find("#map-canvas")[0];
Derek
  • 850
  • 9
  • 19
  • if I use `$(".container").find("#map-canvas")[0];` the result is **undefined**. Because that I used `$(".container").find("#map-canvas");` to got the DOM. – kikiwisaka Apr 01 '17 at 20:53