Google Maps Overlays

---o0o---

Original link

Overlays are objects on the map that are bound to latitude/longitude coordinates.

Google Maps has several types of overlays:

• Marker - Single locations on a map. Markers can also display custom icon images
• Polyline - Series of straight lines on a map
• Polygon - Series of straight lines on a map, and the shape is "closed"
• Circle and Rectangle
• Info Windows - Displays content within a popup balloon on top of a map
• Custom overlays

1. Add a marker

<script>
    var myCenter = new google.maps.LatLng(51.508742,-0.120850);
    function initialize()
    {
        var mapProp = {
            center:myCenter,
            zoom:5,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

        var marker = new google.maps.Marker({
            position:myCenter,
        });
        marker.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
            

• google.maps.Marker: creat new marker
• marker.setMap(map): add the marker to the map

2. Using icon instead marker

add icon property when creat the marker

var marker = new google.maps.Marker({
    position:myCenter,
    icon:'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Left-Pink-icon.png'
});
            

3. InforWindow

inforWindow's position depend on marker position

var infowindow = new google.maps.InfoWindow({
    content:"Hello World!"
});

infowindow.open(map,marker);
            

4. Set Markers and Open InfoWindow for Each Marker

http://www.w3schools.com/googleAPI/google_maps_events.asp