Google Maps

Add a marker in Google Maps

Google Maps - Overlays

Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map.

Google Maps API offers several types of overlays:

• Points on the map are displayed using markers, typically showing a custom icon. Markers are objects of type GMarker and can use objects of type GIcon to customize the icon.

• Lines on the map are displayed using polylines (a collection of points). Lines are objects of type GPolyline.

• Areas on the map are displayed as polygons (for arbitrary shapes) or ground overlays (for rectangular areas). Polygons are similar to closed polylines and can be any shape. Ground overlays are often used for areas on the map that are directly or indirectly related to map tiles.

• The map itself is displayed using tile overlays. If you have your own series of tiles, you can use the GTileLayerOverlay class to change the existing tiles on the map, or even use GMapType to create your own map type.

• Info windows are also a type of overlay. Note that info windows are automatically added to the map, and the map can only have one object of type GInfoWindow.

Google Maps - Adding Markers

Markers identify points on the map. By default, they use G_DEFAULT_ICON (you can also specify a custom icon). The GMarker constructor takes a GLatLng and an optional GMarkerOptions object as parameters.

Add a marker to the map using the setMap() method:

Example

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

marker.setMap(map);

Google Maps - Draggable Markers

The following example shows how to use the animation property to drag a marker:

Example

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

marker.setMap(map);

Google Maps - Icons

Markers can display custom icons instead of the default icon:

Example

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

marker.setMap(map);

Google Maps - Polylines

The GPolyline object creates a linear overlay on the map. GPolyline includes a series of points and creates a series of line segments that connect those points in order.

Polylines support the following properties:

• path - Specifies the latitude/longitude coordinates of multiple points

• strokeColor - Specifies the hexadecimal color value of the line (format: "#FFFFFF")

• strokeOpacity - Specifies the opacity of the line (value from 0.0 to 1.0)

• strokeWeight - Defines the width of the line in pixels

• editable - Defines whether the line is editable by the user (true/false)

Example

var myTrip = [stavanger, amsterdam, london];
var flightPath = new google.maps.Polyline({
  path: myTrip,
  strokeColor: "#0000FF",
  strokeOpacity: 0.8,
  strokeWeight: 2
});

Google Maps - Polygons

The GPolygon object is similar to the GPolyline object because they both include a series of ordered points. However, polygons are not like polylines with two endpoints; instead, they are designed to define areas that form a closed loop.

Like polylines, you can customize the color, thickness, and opacity of the polygon's edges, as well as the color and opacity of the filled area. Colors should be in hexadecimal HTML style.

Polygons support the following properties:

• path - Specifies the latitude coordinates of multiple points (the first and last coordinates are the same)

• strokeColor - Specifies the hexadecimal color value of the line (format: "#FFFFFF")

• strokeOpacity - Specifies the opacity of the line (value from 0.0 to 1.0)

• strokeWeight - Defines the width of the line in pixels

• fillColor - Specifies the hexadecimal color value of the filled area (format: "#FFFFFF")

• fillOpacity - Specifies the opacity of the fill color (value from 0.0 to 1.0)

• editable - Defines whether the line is editable by the user (true/false)

Example

var myTrip = [stavanger, amsterdam, london, stavanger];
var flightPath = new google.maps.Polygon({
  path: myTrip,
  strokeColor: "#0000FF",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#0000FF",
  fillOpacity: 0.4
});

Google Maps - Circle

Circles support the following properties:

• center - Specifies the center point of the circle using google.maps.LatLng

• radius - Specifies the radius of the circle in meters

• strokeColor - Specifies the hexadecimal color value of the arc (format: "#FFFFFF")

• strokeOpacity - Specifies the opacity of the arc (value from 0.0 to 1.0)

• strokeWeight - Defines the width of the line in pixels

• fillColor - Specifies the hexadecimal color value of the circle (format: "#FFFFFF")

• fillOpacity - Specifies the opacity of the fill color (value from 0.0 to 1.0)

• editable - Defines whether the line is editable by the user (true/false)

Example

var myCity = new google.maps.Circle({
  center: amsterdam,
  radius: 20000,
  strokeColor: "#0000FF",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#0000FF",
  fillOpacity: 0.4
});

Google Maps - Info Window

Display a text info window on a marker:

Example

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

infowindow.open(map, marker);

Google Maps - Overlay Reference Manual

Google Maps API Reference Manual.