In Source Code(aspx):-
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<meta http-equiv="content-type"
content="text/html;
charset=utf-8" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<div id="map-canvas" style="width: 1000px; height: 600px">
</div>
<script type="text/javascript">
var map;
var projects = [];
projects.push({ lat: 17.382423, lng: 78.497314 }) //Hyderabad
projects.push({ lat: 13.04, lng: 80.17 }) //Chennai
projects.push({ lat: 11.00, lng: 76.15}) //Kerala
projects.push({
lat: 17.7, lng: 83.3 }) //Visakhapatnam
function initialize() {
var mapDiv =
document.getElementById('map-canvas');
map
= new google.maps.Map(mapDiv, {
center: new
google.maps.LatLng(17.382423, 78.497314),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListenerOnce(map, 'tilesloaded',
addMarkers);
//map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function addMarkers() {
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i
< projects.length; i++) {
var point = projects[i];
var latLng = new
google.maps.LatLng(point.lat, point.lng);
var marker = new
google.maps.Marker({
position: latLng,
map: map
});
var j = i + 1;
marker.setTitle(j.toString());
attachSecretMessage(marker, i);
}
}
google.maps.event.addDomListener(window, 'load',
initialize);
// The markers show
a secret message when clicked
// but that message is not within the marker's instance
data.
function attachSecretMessage(marker, number) {
var message = ["Hyderabad","Chennai", “Kerala”,"Visakhapatnam"];
var infowindow = new
google.maps.InfoWindow(
{
content: message[number],
size: new google.maps.Size(50, 50)
});
google.maps.event.addListener(marker, 'click',
function () {
infowindow.open(map, marker);
});
}
</script>
</asp:Content>
No comments:
Post a Comment