I read this book to learn the basics.

Overlays

add a marker

Marker - Single locations on a map. Markers can also display custom icon images.

var marker = new google.maps.Marker({
  position: myLocation,
  title: 'My Place',
  map: myMap
});
marker.setMap(map);

Sample code

You can add animation to the marker.

var marker=new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
  });

Use an icon for a marker.

var marker=new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
  });

add a polyline

Polyline - Series of straight lines on a map

A polyline supports the following properties:

• path - specifies several latitude/longitude coordinates for the line
• strokeColor - specifies a hexadecimal color for the line (format: “#FFFFFF”)
• strokeOpacity - specifies the opacity of the line (a value between 0.0 and 1.0)
• strokeWeight - specifies the weight of the line’s stroke in pixels
• editable - defines whether the line is editable by users (true/false)

add a polygon

Polygon - Series of straight lines on a map, and the shape is “closed”

A polygon supports the following properties:

• path - specifies several LatLng coordinates for the line (first and last coordinate are equal)
• strokeColor - specifies a hexadecimal color for the line (format: “#FFFFFF”)
• strokeOpacity - specifies the opacity of the line (a value between 0.0 and 1.0)
• strokeWeight - specifies the weight of the line’s stroke in pixels
• fillColor - specifies a hexadecimal color for the area within the enclosed region (format: “#FFFFFF”)
• fillOpacity - specifies the opacity of the fill color (a value between 0.0 and 1.0)
• editable - defines whether the line is editable by users (true/false)

Circle and Rectangle

Info Windows

Displays content within a popup balloon on top of a map

Related article

Google Maps Basics