Overlays on Google Maps

Google Maps - Overlays

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

Google Maps has various types of overlays:

  • Markers - A single location on the map. Markers can also display custom icon images
  • Polylines - A series of straight lines on the map
  • Polygons - A series of straight lines on the map that form a 'closed' shape
  • Circles and Rectangles
  • Info Windows - Display content in a pop-up balloon at the top of the map
  • Custom Overlays

Google Maps - Add Marker

The Marker constructor can create a marker. Note that the position property must be set to display the marker.

Please use the setMap() method to add the marker to the map:

instance

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

Google Maps - Marker Animation

The following example shows how to set an animation for the marker using the animation property:

instance

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

Google Maps - Replace Marker with Icon

The following example specifies the image (icon) to be used instead of the default marker:

instance

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

Google Maps - Polyline

A polyline is a line drawn by a sequence of coordinates in order.

The polyline supports the following properties:

  • path - Coordinates of latitude/longitude for the line
  • strokeColor - Specify the hexadecimal color of the line (format: "#FFFFFF")
  • strokeOpacity - Specify the opacity of the line (a value between 0.0 and 1.0)
  • strokeWeight - Specify the line width (in pixels)
  • editable - Define whether the line is editable by the user (true/false)

instance

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

Google Maps - Polygon

Similar to a polyline, a polygon is composed of a series of sequentially arranged coordinates. However, a polygon is designed to define the area within the closed loop.

A polygon is made up of straight lines and is 'closed' (all lines are connected).

The polygon supports the following properties:

  • path - Specify several latitude/longitude coordinates of the line (the first and last coordinates are equal)
  • strokeColor - Specify the hexadecimal color of the line (format: "#FFFFFF")
  • strokeOpacity - Specify the opacity of the line (a value between 0.0 and 1.0)
  • strokeWeight - Specify the line width (in pixels)
  • fillColor - Specify the hexadecimal color of the area inside the closed region (format: "#FFFFFF")
  • fillOpacity - Specify the opacity of the fill color (a value between 0.0 and 1.0)
  • editable - Define whether the line is editable by the user (true/false)

instance

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

The circle supports the following properties:

  • center - Specify the google.maps.LatLng of the center
  • radius - Specify the radius of the circle in meters
  • strokeColor - Specify the hexadecimal color of the line around the circle (format: "#FFFFFF")
  • strokeOpacity - Specify the opacity of the line color (a value between 0.0 and 1.0)
  • strokeWeight - Specify the line width (in pixels)
  • fillColor - Specify the hexadecimal color of the area inside the circle (format: "#FFFFFF")
  • fillOpacity - Specify the opacity of the fill color (a value between 0.0 and 1.0)
  • editable - Define whether the user can edit the circle (true/false)

instance

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

Google Maps - Information Window

to display an information window with text content for the marker:

instance

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