Drawing on the Map

You can add objects to the map to designate points, lines, areas, or collections of objects. The Maps JavaScript API calls these objects overlays. Overlays are tied to latitude/longitude coordinates, so they move when you drag or zoom the map.

Overlay types

The Maps JavaScript API has several types of overlays that you can add programmatically:

  • 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." See Markers.
  • An info window is a special kind of overlay for displaying content (usually text or images) within a popup balloon at a given location on a map. See Info Windows.
  • Lines on the map are displayed using polylines representing an ordered sequence of locations. See Shapes.
  • Areas of arbitrary shape on the map are displayed using polygons. Like polylines, polygons are an ordered sequence of locations. Unlike polylines, polygons define a region which they enclose. See Shapes.
  • You can also define circles and rectangles on the map.
  • Use a symbol to customize the icon on a marker or add images to a polyline. A symbol is a vector-based image defined by a path, using SVG path notation. The API also provides options to control how the symbol will be displayed. See Symbols.
  • If you want to place an image on a map, you can use a ground overlay. See Ground Overlays.
  • You may also implement your own custom overlays by implementing the OverlayView interface. See Custom Overlays.
  • 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 appear on top of existing base map tile sets as overlays. See Custom Map Types.