Friday 4 May 2012

Adding Markers on Google Maps













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