Question

I use google maps API to display markers on a map.

Each marker points to a shop on the map.

My problem is with creating the event handler for each mark, which will display the tooltip with information about the shop when the given mark will be clicked.

I use the text input to let the user type the city, and with jquery I handle the click event on the nearby submit button. Then I send the query to the php site, get following object back:

d: Object
error: false
lat: "52.3744440000"
lng: "9.7386110000"
shop: Array[2]
0: Object
address: "Addressstreet 12"
lat: "52.3761209000"
lng: "9.7387242000"
name: "Shop 1"
tel: "1234"
__proto__: Object
1: Object
length: 2
etc.

Now I use the lat and lng values which are coordinates of the city to center the map.
Then I send the shop array to the paintShops(shops) method:

function paintShops(shops){
for (var i = 0; i < shops.length; i++){
kl = shops[i];
var ka = parseFloat(kl.lat);
var kb = parseFloat(kl.lng);
tel = kl.tel;
address = kl.address;
var son = new google.maps.Marker({
position: new google.maps.LatLng(ka, kb),
map: map,
title: kl.name,
clickable: true
});
google.maps.event.addListener(son, 'click', function(son, tel, address) {
displayShopTooltip(son, tel, address);
}

My problem is in the last line of the above snippet: when I click on the mark, the parameters tel and address of the displayShopTooltip are undefined.
I’d like to know what to do to do not have this problem, or alternatively another approach.
Thanks in advance.

Answer 1

The problem you have is that by declaring tel and address within the listener you are setting them to undefined within the event handler callback (as there is no mechanism for passing in arbitrary parameters). The solution is to make sure the handler is within the same scope as (i.e. wrapped inside a function with) the marker. I’d recommend reading up about scope in javascript as there were one or two other errors you made (e.g. not properly declaring variables) – scope in javascript is handled very differently to other programming languages and takes a bit of getting used to.

function paintShops(shops){
  for (var i = 0; i < shops.length; i++){
    makeMarker(shops[i]);
  }

  function makeMarker(kl) {
    var ka = parseFloat(kl.lat);
    var kb = parseFloat(kl.lng);
    var tel = kl.tel;
    var address = kl.address;
    var son = new google.maps.Marker({
       position: new google.maps.LatLng(ka, kb),
       map: map,
       title: kl.name,
       clickable: true
    });
     google.maps.event.addListener(son, 'click', function(son) {
       displayShopTooltip(son, tel, address);
     }
   }