Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Google Maps Overlays


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);

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.