Problem initialising Google map with multiple markers

Question

Hi guys,

I'm trying to develop an application where addresses are pulled out of a database to show them using a marker on a google map on my website.

I have the following javascript code + jquery , google maps and all other necessary javascript files:

$(document).ready(function(){

    // initialise map
    var myLatlng = new google.maps.LatLng(50.52,4.22);
    // specify options
    var myOptions = {
        zoom: 5,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    // attach map to html and set reference
    var map = new google.maps.Map(document.getElementById("googlemap"), myOptions);

    // markers array
    var markers = Array();

    // infowindows array
    var infos = Array();

    var lat = 50;
    for(var j = 0; j < 5; j++){

        var contentString = '<div id="content">test</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,4.22),
            map: map,
            title: 'Europe'
        });

        // push vars to arrays markers and infos
        markers.push(marker);
        infos.push(infowindow);

        lat = lat + 1;

    }

    for(var i = 0; i < markers.length; i++) {
        google.maps.event.addListener(markers[i], 'click', clickHandler(i));
    }

    function clickHandler(i) {
        infowindow.open(map,infos[i]);
    }

});

to test/emulate the for loop I'll be using to pull the data from the database using PHP I inserted the little for statement to populate the markers and infos array.

All is working ( showing the markers ) except that clicking the markers doesn't show the infoboxes.

Onload I also get this error in firebug: Argument expected to be of type function line 23 - http://maps.gstatic.com/intl/nl_ALL/mapfiles/api-3/2/7/main.js

Can someone help please?

1 more sidequestion : how can I transform String addresses like Street number, postalcode , city to lattitude and longitude?

Thanks!

Answer 1

The problem with the showing of the markers is that you're calling:

infowindow.open(map,infos[i]);

The second parameter should be a marker, not the info.

infowindow.open(map,marker);

The javascript error comes from this:

google.maps.event.addListener(markers[i], 'click', clickHandler(i));

Instead of binding clickHandler as an event function, that code actually calls clickHandler and tries to pass the return value (none) as a parameter to the listener. Fixing that to point to a function will still not produce what you want, and this is discussed in http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures

So you should do:

addEventListener(markers[i]);

function addEventListener(marker) {
   google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(map, marker);
   });
}

For transforming street numbers etc coordinates, take a look at Google's Geocoding API: http://code.google.com/apis/maps/documentation/geocoding/index.html