Javascript Scope problem when using Google Maps API

Question

Hey I'm fooling around with google maps API, and at the moment I am struggling to implement something that I would think would be fairly straight forward.

My friend wants to have one of those visitor map things on his site where visitors can add a marker to any point on the map, and with each marker there will be information associated with it. Information such as name, date, message, etc....

Right now I am in the prototyping and learning stage, but I am having trouble associating an infowindow with a marker object.

var map;
var markers = []
function init(){
        var latlng = new google.maps.LatLng(-44, 140);
        var myOptions = {
                zoom:8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


        google.maps.event.addListener(map, 'click', function(event){
            markers.push(new marker(event.latLng));
        });
}

function marker(location){
    this.location = location;
    this.mark = new google.maps.Marker({position:this.location, map:map});
    this.info = new google.maps.InfoWindow({content:'hi'});
    google.maps.event.addListener(this.mark, 'click', function(){
        this.info.open(map, this.mark);
    });
}

When I test this code out the markers are placed fine, but when I click on them, instead of displaying the InfoWindow I get this error in the JS console:

Uncaught TypeError: Cannot call method 'open' of undefined

Certainly this is a scope problem, but I can't understand why that should be. Something like this works fine:

function test(a){
    this.a = a
    this.b = function(){
        this.a+=1
    }
}

Thanks a lot for the help!

VNO · Accepted Answer · 2011-09-03 17:37:18Z

3

Looks like you're losing scope here:

google.maps.event.addListener(this.mark, 'click', function(){
  this.info.open(map, this.mark);
});

Try storing the value of this like so:

var _self = this;    
google.maps.event.addListener(_self.mark, 'click', function(){
  _self.info.open(map, _self.mark);
});

answered Sep 3, 2011 at 17:37

VNO

3,7051 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

danem Over a year ago

Thanks it works, but something I've noticed with this solution is that the info box when it appears is all fragmented... Could that be due to its being called in this manner? jsfiddle.net/8xHw7

VNO Over a year ago

Just tried it at your link, seems like it's working fine for me :)

danem Over a year ago

really? You can't see these lines running through the infowindow? Maybe it's chrome...

danem Over a year ago

That's funny. What browser are you using?

VNO Over a year ago

Chrome 13.0.782.220 - try resizing your browser, I do see scrollbars if the map area is too small.

|

netemp · Accepted Answer · 2011-09-03 17:48:57Z

2

One way of achieving what you want to could be by passing this.info as argument to the function which you are associating with the click event and then using 'open' on the parameter passed. This should resolve the issue.

The reason for why this function is not being able to identify this.info is that the function is not being defined as an inner function here.

answered Sep 3, 2011 at 17:48

netemp

4,18512 gold badges45 silver badges63 bronze badges

Collectives™ on Stack Overflow

Javascript Scope problem when using Google Maps API

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related