While working with the google API we need to load the map into a container that can be used and called to display and manipulation of the google map.
So for doing that, we need to use the div control that best suites to display the map for the application.
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
</form>
</body>
And then it can be used in our script for invoking the function and loading the map into it.
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
Then the function is being used to do the rest of the task.
<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>
0 Comment(s)