I am trying to create a google map for my website. i wanna add few places and when people click the icons. a info window should displace the information i plan to display.
Where i am ?
i am able to achieve what i want. but i am not able to add click even to every icon. when i click an icon. only the last loaded markers window it displayed. I understand there is a logic error. but i am not able to find a logic of doing the same.
var map;
var places = [
['HMV', 13.005611, 77.587561, 1],
['Coogee Beach', 13.001621, 77.577631, 2],
['Cronulla Beach', 13.005421, 77.572531, 3]
];
$(document).ready(function () {
var myLatlng = new google.maps.LatLng(13.005621, 77.577531);
var myOptions = {
zoom: 15,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
loadplaces(map, places);
});
function loadplaces(map, locations) {
var image = 'images/blackmarker.png';
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
//icon: image,
title: beach[0],
zIndex: beach[3]
});
var infowindow = new google.maps.InfoWindow({
content: beach[0],
zIndex: beach[3]
});
//infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function (event) {
infowindow.open(map, marker);
});
}
}
