Google Maps API Tutorial Google Maps API Tutorial

Below is a list of tutorial / examples for Google Maps API V3.

Basic Examples

Top Bay Area Real Estate Agent

Hello World Example

Show a standard google map in a web page.

Hello World Example (Full Screen)

Show google map at full screen of a Web page.

Customized Control Panel

Customize map control panel.

Add a Simple Marker

Add a simple standard marker on the map.

Add Marker Click Event and Hide Marker

Add a click event to the marker and hide the marker when click the marker.

Customized Marker Icon: The Simple Way

Add a customized marker icon on the map.

Customized Marker Icon 2: Align Marker and Shadow

Add a customized marker icon on the map, and fix the alignment of marker and shadow images.

Add Numbers in Marker

Add numbers in a marker.

Add Letters in Marker

Add letters in a marker.

Zoom Map to Fit Markers

Zoom the map to fit all markers. The same approach can be applied on any overlays.

Standard InfoWindow

Popup an infowindow when clicking a marker.

Street View

Enable street view when clicking a marker.

Draw/Hide Polygon

Draw a polygon on map.

Draw Polygon with Hole

Draw a polygon with hole on map.

Advanced Examples


Find geographic coordinates (i.e., latitude and longitude) from street address.

Customized Tooltip

Customized Tooltip when mouse over makers.

Customized InfoWindow 1: InfoBubble based Multi-Tab InfoWindow

InfoBubble can be used to develop multi-tab infowindow.

Customized InfoWindow 2: Elabel based InfoWindow

Elabel package allows users to develop customized infowindow with any styling effect.

Customized Control

Add customized controls on map.