Doing the integration with the Google map we usually do all the things which we get from the google API.
But we can also make our customized events and functions if we want to create and use it.
So for doing that the process is to attach your function with the event listener and it will gets fired when that event is raised.
<script type="text/javascript">
function initialize() {
var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
// marker:true
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var image;
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var contentString = '<div id="content" style="margin-left:15px; margin-top:3px;overflow:hidden;">' +
'<div id="bodyContent">' + '<img src=' + data.image + ' style="width:172px;height:45px;" alt="WebStreet.in"/>' + '<br><font style="color:darkblue;font:11px tahoma;margin-left:5px;">' + data.title + ' Your Trusted IT Solutions Provider</font>' +
'</div>' +
'</div>';
//var marker = new google.maps.Marker({
//position: myLatlng,
//map: map,
//title: data.title,
//});
var marker = new google.maps.Marker({
map: map,
// draggable:true,
// animation: google.maps.Animation.DROP,
position: myLatlng,
title: data.title,
icon: 'http://maps.google.com/mapfiles/kml/pal3/icon55.png' // null = default icon
});
// Start of newly added code block
var infowindow = new google.maps.InfoWindow({
content: contentString,
width: 192,
height: 100
});
(function (marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, "mouseover", function (e) {
infoWindow.setContent(data.description);
infowindow.open(map, marker);
});
})(marker, data);
}
// End of newly added code block
}
</script>
We will invoke this script function on the body load of the HTML page.
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
</form>
</body>
0 Comment(s)