For anyone looking for the simple answer to creating a Google Maps Version 3 API map with multiple markers and multiple info windows, here is my simple and dependable solution:
var locationsToMap = [
[39.638547, -85.952911, "Southeast Corner"],
[39.914990, -85.957193, "Northeast Corner"],
[39.922966, -86.325456, "Northwest Corner"],
[39.633365, -86.325456, "Southwest Corner"]
];
function addGeoLocationsToMap() {
var myOptions = {
center: new google.maps.LatLng(getLatOfMapCenter(), getLongOfMapCenter()),
zoom: getMapZoomLevel(),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// "map_canvas" is the div container for the map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var inforwindow = null;
for (var i = 0; i < locationsToMap.length; i++) {
//listingLatitude[x] and listinglongitude[x] are arrays holding the latitude and longitude for the marker
if ((locationsToMap[i][0] != 0) && (locationsToMap[i][1] != 0)) {
//we are using an "eval(); expression to dynamically write new javascript in each loop
eval("var marker" + i + " = new google.maps.Marker({position: new google.maps.LatLng(" + locationsToMap[i][0] + ", " + locationsToMap[i][1] + "),map: map});");
//locationsToMap[x] is an array holding the html for the infowindows
eval("google.maps.event.addListener(marker" + i + ", 'click', function() {infowindow = new google.maps.InfoWindow({content: locationsToMap[" + i + "][2] + '
'});infowindow.open(map,marker" + i + ");} );");
}
}
}
function getLatOfMapCenter() {
return 39.773595;
}
function getLongOfMapCenter() {
return -86.150399;
}
function getMapZoomLevel() {
return 10;
}
No comments:
Post a Comment