Please note, this is a STATIC archive of website www.w3schools.com from 05 May 2020, cach3.com does not collect or store any user information, there is no "phishing" involved.
THE WORLD'S LARGEST WEB DEVELOPER SITE
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO W3.CSS JQUERY JAVA MORE FORUM EXERCISES REFERENCES

Google Maps Overlays

❮ Previous Next ❯

Google Maps - Overlays

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

Google Maps has several types of overlays:

  • Marker - Single locations on a map. Markers can also display custom icon images
  • Polyline - Series of straight lines on a map
  • Polygon - Series of straight lines on a map, and the shape is "closed"
  • Circle and Rectangle
  • Info Windows - Displays content within a popup balloon on top of a map
  • Custom overlays

Google Maps - Add a Marker

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

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

Example

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

marker.setMap(map);

Google Maps - Animate the Marker

The example below shows how to animate the marker with the animation property:

Example

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

marker.setMap(map);

Google Maps - Icon Instead of Marker

The example below specifies an image (icon) to use instead of the default marker:

Example

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

marker.setMap(map);

Google Maps - Polyline

A Polyline is a line that is drawn through a series of coordinates in an ordered sequence.

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)

Example

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

Google Maps - Polygon

A Polygon is similar to a Polyline in that it consists of a series of coordinates in an ordered sequence. However, polygons are designed to define regions within a closed loop.

Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).

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)

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

A circle supports the following properties:

  • center - specifies the google.maps.LatLng of the center of the circle
  • radius - specifies the radius of the circle, in meters
  • strokeColor - specifies a hexadecimal color for the line around the circle (format: "#FFFFFF")
  • strokeOpacity - specifies the opacity of the stroke color (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 circle (format: "#FFFFFF")
  • fillOpacity - specifies the opacity of the fill color (a value between 0.0 and 1.0)
  • editable - defines whether the circle is editable by users (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 - InfoWindow

Show an InfoWindow with some text content for a marker:

Example

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

infowindow.open(map,marker);

❮ Previous Next ❯