Overlays

Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map. Overlays reflect objects that you "add" to the map to designate points, lines, areas, or collections of objects.

The Maps API has several types of overlays:

Single locations on the map are displayed using markers. Markers may sometimes display custom icon images, in which case they are usually referred to as "icons." Markers and icons are objects of type Marker.
Lines on the map are displayed using polylines (representing an ordered sequence of locations). Lines are objects of type Polyline.
Areas of arbitrary shape on the map are displayed using polygons, which are similar to polylines. Like polylines, polygons are an ordered sequence of locations; unlike polylines, polygons define a region which they enclose.
Map layers may be displayed using overlay map types. You can create your own set of tiles by creating custom map types which either replace base map tile sets, or display on top of existing base map tile sets as overlays.
The info window is also a special kind of overlay for displaying content (usually text or images) within a popup balloon on top of a map at a given location.
You may also implement your own custom overlays. These custom overlays implement the OverlayView interface.

Adding Overlays

Overlays are often added to the map upon their construction; all overlays define an Options object for use in construction that allows you to designate the map on which they should appear. You may also add an overlay to the map directly by using the overlay's setMap() method, passing it the map on which to add the overlay.

var map;
function initialize() {
//map initialization

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

function placeMarker(location) {
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });

  map.setCenter(location);
}

Removing Overlays

To remove an overlay from a map, call the overlay's setMap() method, passing null. Note that calling this method does not delete the overlay; it simply removes the overlay from the map. If instead you wish to delete the overlay, you should remove it from the map, and then set the overlay itself to null.

If you wish to manage a set of overlays, you should create an array to hold the overlays. Using this array, you can then call setMap() on each overlay in the array when you need to remove them. (Note that unlike in V2, no clearOverlays() method exists; you are responsible for keeping track of your overlays and removing them from the map when not needed.) You can delete the overlays by removing them from the map and then setting the array's length to 0, which removes all references to the overlays.

The following example places markers on a map when clicked on the map, and places them within an array. The overlays can then be later cleared, shown, or deleted:

code

Markers

Markers identify locations on the map. By default, they use a standard icon, though you can set a custom icon within the marker's constructor or by calling setIcon() on the marker. The google.maps.Marker constructor takes a single Marker options object literal specifying the initial properties of the marker. The following fields are particularly important and commonly set when constructing your marker:

position (required) specifies a LatLng identifying the initial location of the marker.
map (optional) specifies the Map object on which to place the marker.

Note that within the Marker constructor, you should specify the map on which to add the marker. If you do not specify this argument, the marker is created but is not attached (or displayed) on the map. You may add the marker later by calling the marker's setMap() method. To remove a marker, call the setMap() method passing null as the argument.

Markers are designed to be interactive. By default, they receive 'click' events, for example, and are often used within event listeners to bring up info windows. The following example adds a simple marker to a map at Uluru, in the center of Australia:

code

This Marker title will show up as a tooltip.

If you do not wish to pass any Marker options in the marker's constructor, instead pass an empty object {} in the last argument of the constructor.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
  zoom: 4,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({
    position: myLatlng, 
    map: map, 
    title:"Hello World!"
});

Animations

You may also animate markers so that they exhibit dynamic movement in a variety of different circumstances. The way a marker is animated is specified within the marker's animation property, of type google.maps.Animation. The following Animation values are currently supported:

DROP indicates that the marker should drop from the top of the map to its final location when first placed on the map. Animation will cease once the marker comes to rest and animation will revert to null. This type of animation is usually specified during creation of the Marker.
BOUNCE indicates that the marker should "bounce" in place. A bouncing marker will continue bouncing until its animation property is explicitly set to null.

You may initiate an animation on an existing marker by calling setAnimation() on the Marker object.

The following example creates a marker in Stockholm, Sweden using a DROP animation. Clicking on the marker toggles the marker between a BOUNCE animation or no animation:

var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var marker;
var map;

function initialize() {
  var mapOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: stockholm
  };

  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  marker = new google.maps.Marker({
    map:map,
    draggable:true,
    animation: google.maps.Animation.DROP,
    position: parliament
  });
  google.maps.event.addListener(marker, 'click', toggleBounce);
}

function toggleBounce() {

  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

Note: if you have many markers, you might not want to drop them all at once on the map. You can make use of setTimeout() to space your markers' animations apart using a pattern like that shown below:

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}