Friday 14 December 2012

Creating Marker / Overlays in Google Map

Overlays in Google maps are used to point to a specific location that we point to. It is an easy task. Here in this tutorial I'm only stressing at creating Overlays , if any doubt regarding creating maps please refer to my previous post.

So lets get started.
Overlays are objects on the map that are bound to latitude/longitude coordinates.Google maps has several types of overlays: Marker, Polyline, Polygon, Circle, Rectangle etc.

Google Maps - Add a Marker

Add the marker to the map by using the setMap() method:
See demo

<script>

var myCenter=new google.maps.LatLng(9.9667,76.2167);

function initialize()

{

var mapProp = {

  center:myCenter,

  zoom:5,

  mapTypeId:google.maps.MapTypeId.ROADMAP

  };



var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);



//Marker

var marker=new google.maps.Marker({

  position:myCenter,

});

marker.setMap(map);

}

//End

google.maps.event.addDomListener(window, 'load', initialize);

</script>


Animating Marker

Applying animation property to the marker.
See demo

marker=new google.maps.Marker({

  position:myCenter,

  animation:google.maps.Animation.BOUNCE

  });

marker.setMap(map);




Thank You!

No comments:

Post a Comment