# Google Maps Overlays

« Previous
Next Chapter »

Add a marker to the Google map:

## 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);
Try it yourself »

## Google Maps - Animate the Marker

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

## Example

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

## 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);
Try it yourself »

## 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
});
Try it yourself »

## 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
});
Try it yourself »

## 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
});
Try it yourself »

## 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);
Try it yourself »

## Google Maps - Overlays Reference

Google Maps API Reference.

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples