I am working on a project using google maps api v3 and server side vb.net and am trying to make it so when a marker is clicked on a infowindow appears. I have accomplished this but now what i want is different content to be displayed when different markers are clicked on which i can't seem to figure out.
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
{
"JSN": '<%# Eval("JSN") %>',
"Address": "<%# Eval("Address") %>",
"Postcode": "<%# Eval("Postcode") %>",
"StartTime": "<%# Eval("StartTime") %>",
"TownCity": "<%# Eval("TownCity") %>",
"County": "<%# Eval("County") %>"
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
function loadDefaultMap(lat,lng,index) {
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
}
function addMarkers() {
// get address
// In loop get each address (latitude,longitude)
// call loadMap in each iteration
if(markers.length >0){
/// ******************************** INITIALIZING **********************
var mapOptions = {
center: new google.maps.LatLng(52.630886,1.297355),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = null;
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
/// *********************************************************************
var geocoder = new google.maps.Geocoder();
for (i = 0; i < markers.length; i++) {
var data = markers[i];
var icon='';
var Time=data.StartTime.split(':');
infoWindow = new google.maps.InfoWindow({
content:markers[i].Address +"<br><b> "+markers[i].TownCity+" </b>"+ markers[i].County
});
if(Time[0] > 00 && Time[0] < 11){
icon= '../../../Images/blue.png'
}
else
{
icon= '../../../Images/red.png'
}
var adrs= data.Address +" "+data.TownCity+" "+ data.County
geocoder.geocode({ 'address': adrs }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
//********************ADDING MARKER****************************
var myLatlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.Address +" "+data.TownCity+" "+ data.County,
icon: icon
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.open(map, this);
});
})(marker, data);
//*************************************************************
}
});
}
}else{
loadDefaultMap(52.630886,1.297355,-1);
}
}
function pageLoad() {
addMarkers();
}
This always showed the last marker that was bound to map so the info window always appeared on the last marker. i als try this but its not working.
for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
any help is appreciated. thanks!