Using google API in the .NET is the thing that needs to be performed again and again. So when you need to display data in the form of map locations or need to dispaly it using the google maps you need to integrate it with the google API.
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<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);
});
})(marker, data);
}
// End of newly added code block
}
</script>
You need to add script into your page to integrate it with the application and with the database.
0 Comment(s)