Initialising Google map with multiple markers
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 googl开发者_Go百科e.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!
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
精彩评论