Monday, August 19, 2013

Google Map with Custom Image Marker

Inside Header:
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

Inside Body:
<div id="map3" style="width:100%; float:left; text-align:center; margin:auto; height: 300px; border: 1px solid #D6D6D6; overflow: hidden;"></div>

<script type="text/javascript">
  var locations =[['My title^Title : My title^Location : Chennai, Tamil Nadu, India',13.0000,80.0000,1]];   
   
    var map = new google.maps.Map(document.getElementById('map3'), {
      zoom: 12,
     center: new google.maps.LatLng(13.0000,80.0000),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();
   
     var infowindow1 = new google.maps.InfoWindow();

    var marker, i;
    var image = 'images/cjflag.png';
    for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: image
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
           
            var c1=locations[i][0];
      var n1=c1.split("^");
     var title1=n1[0]; var owner1=n1[1]; var est1=n1[2]; var biddate1=n1[3];  var plan1=n1[4];
     var content1 = '<div class="map-content" style="color:#253C87; font-size:12px;"><a href=""><b>' + title1 + '</b></a><br />' + owner1 + '<br />' + est1 + '<br /></div>';   
          infowindow.setContent(content1);
          infowindow.open(map, marker);
        }
      })(marker, i));
 }
</script>


No comments:

Post a Comment