You're all set!

To start developing, please head over to our developer documentation.

Activate the Google Maps JavaScript API

To get you started we'll guide you through the Google Developers Console to do a few things first:

  1. Create or choose a project
  2. Activate the Google Maps JavaScript API and related services
  3. Create appropriate keys
Continue

Data

Data class

google.maps.Data class

A layer for displaying geospatial data. Points, line-strings and polygons can be displayed.

Every Map has a Data object by default, so most of the time there is no need to construct one. For example:

 var myMap = new google.maps.Map(...);
myMap.data.addGeoJson(...);
myMap.data.setStyle(...);
The Data object is a collection of Features.

This class extends MVCObject.

Constructor
Data
Data([options])
Parameters: 
Creates an empty collection, with the given DataOptions.
Methods
add
add([feature])
Parameters: 
Return Value:  Data.Feature
Adds a feature to the collection, and returns the added feature.

If the feature has an ID, it will replace any existing feature in the collection with the same ID. If no feature is given, a new feature will be created with null geometry and no properties. If FeatureOptions are given, a new feature will be created with the specified properties.

Note that the IDs 1234 and '1234' are equivalent. Adding a feature with ID 1234 will replace a feature with ID '1234', and vice versa.

addGeoJson
addGeoJson(geoJson[, options])
Parameters: 
Return Value:  Array<Data.Feature>
Adds GeoJSON features to the collection. Give this method a parsed JSON. The imported features are returned. Throws an exception if the GeoJSON could not be imported.
contains
contains(feature)
Parameters: 
Return Value:  boolean
Checks whether the given feature is in the collection.
forEach
forEach(callback)
Parameters: 
Return Value:  None
Repeatedly invokes the given function, passing a feature in the collection to the function on each invocation. The order of iteration through the features is undefined.
getControlPosition
getControlPosition()
Parameters:  None
Return Value:  ControlPosition
Returns the position of the drawing controls on the map.
getControls
getControls()
Parameters:  None
Return Value:  Array<string>
Returns which drawing modes are available for the user to select, in the order they are displayed. This does not include the null drawing mode, which is added by default. Possible drawing modes are "Point", "LineString" or "Polygon".
getDrawingMode
getDrawingMode()
Parameters:  None
Return Value:  string
Returns the current drawing mode of the given Data layer. A drawing mode of null means that the user can interact with the map as normal, and clicks do not draw anything. Possible drawing modes are null, "Point", "LineString" or "Polygon".
getFeatureById
getFeatureById(id)
Parameters: 
  • idnumber|string
Return Value:  Data.Feature|undefined
Returns the feature with the given ID, if it exists in the collection. Otherwise returns undefined.

Note that the IDs 1234 and '1234' are equivalent. Either can be used to look up the same feature.

getMap
getMap()
Parameters:  None
Return Value:  Map
Returns the map on which the features are displayed.
getStyle
getStyle()
Parameters:  None
Gets the style for all features in the collection.
loadGeoJson
loadGeoJson(url[, options, callback])
Parameters: 
Return Value:  None
Loads GeoJSON from a URL, and adds the features to the collection.

NOTE: The GeoJSON is fetched using XHR, and may not work cross-domain. If you have issues, we recommend you fetch the GeoJSON using your choice of AJAX library, and then call addGeoJson().

overrideStyle
overrideStyle(feature, style)
Parameters: 
Return Value:  None
Changes the style of a feature. These changes are applied on top of the style specified by setStyle(). Style properties set to null revert to the value specified via setStyle().
remove
remove(feature)
Parameters: 
Return Value:  None
Removes a feature from the collection.
revertStyle
revertStyle([feature])
Parameters: 
Return Value:  None
Removes the effect of previous overrideStyle() calls. The style of the given feature reverts to the style specified by setStyle().

If no feature is given, all features have their style reverted.

setControlPosition
setControlPosition(controlPosition)
Parameters: 
Return Value:  None
Sets the position of the drawing controls on the map.
setControls
setControls(controls)
Parameters: 
  • controlsArray<string>
Return Value:  None
Sets which drawing modes are available for the user to select, in the order they are displayed. This should not include the null drawing mode, which is added by default. If null, drawing controls are disabled and not displayed. Possible drawing modes are "Point", "LineString" or "Polygon".
setDrawingMode
setDrawingMode(drawingMode)
Parameters: 
  • drawingModestring
Return Value:  None
Sets the current drawing mode of the given Data layer. A drawing mode of null means that the user can interact with the map as normal, and clicks do not draw anything. Possible drawing modes are null, "Point", "LineString" or "Polygon".
setMap
setMap(map)
Parameters: 
Return Value:  None
Renders the features on the specified map. If map is set to null, the features will be removed from the map.
setStyle
setStyle(style)
Parameters: 
Return Value:  None
Sets the style for all features in the collection. Styles specified on a per-feature basis via overrideStyle() continue to apply.

Pass either an object with the desired style options, or a function that computes the style for each feature. The function will be called every time a feature's properties are updated.

toGeoJson
toGeoJson(callback)
Parameters: 
  • callbackfunction(Object)
Return Value:  None
Exports the features in the collection to a GeoJSON object.
Events
addfeature
function(event)
Arguments: 
This event is fired when a feature is added to the collection.
click
function(event)
Arguments: 
This event is fired for a click on the geometry.
dblclick
function(event)
Arguments: 
This event is fired for a double click on the geometry.
mousedown
function(event)
Arguments: 
This event is fired for a mousedown on the geometry.
mouseout
function(event)
Arguments: 
This event is fired when the mouse leaves the area of the geometry.
mouseover
function(event)
Arguments: 
This event is fired when the mouse enters the area of the geometry.
mouseup
function(event)
Arguments: 
This event is fired for a mouseup on the geometry.
removefeature
function(event)
Arguments: 
This event is fired when a feature is removed from the collection.
removeproperty
function(event)
Arguments: 
This event is fired when a feature's property is removed.
rightclick
function(event)
Arguments: 
This event is fired for a rightclick on the geometry.
setgeometry
function(event)
Arguments: 
This event is fired when a feature's geometry is set.
setproperty
function(event)
Arguments: 
This event is fired when a feature's property is set.

Data.DataOptions interface

google.maps.Data.DataOptions interface

DataOptions object used to define the properties that a developer can set on a Data object.

Properties
controlPosition
The position of the drawing controls on the map. The default position is TOP_LEFT.
controls
Type:  Array<string>
Describes which drawing modes are available for the user to select, in the order they are displayed. This should not include the null drawing mode, which is added by default. If null, drawing controls are disabled and not displayed. Defaults to null. Possible drawing modes are "Point", "LineString" or "Polygon".
drawingMode
Type:  string
The current drawing mode of the given Data layer. A drawing mode of null means that the user can interact with the map as normal, and clicks do not draw anything. Defaults to null. Possible drawing modes are null, "Point", "LineString" or "Polygon".
featureFactory
Type:  function(Data.Geometry): Data.Feature
When drawing is enabled and a user draws a Geometry (a Point, Line String or Polygon), this function is called with that Geometry and should return a Feature that is to be added to the Data layer. If a featureFactory is not supplied, a Feature with no id and no properties will be created from that Geometry instead. Defaults to null.
map
Type:  Map
Map on which to display the features in the collection.
style
Style for all features in the collection. For more details, see the setStyle() method above.

Data.GeoJsonOptions interface

google.maps.Data.GeoJsonOptions interface

Optional parameters for importing GeoJSON.

Properties
idPropertyName
Type:  string
The name of the Feature property to use as the feature ID. If not specified, the GeoJSON Feature id will be used.

Data.StyleOptions interface

google.maps.Data.StyleOptions interface

These options specify the way a Feature should appear when displayed on a map.

Properties
clickable
Type:  boolean
If true, the marker receives mouse and touch events. Default value is true.
cursor
Type:  string
Mouse cursor to show on hover. Only applies to point geometries.
draggable
Type:  boolean
If true, the object can be dragged across the map and the underlying feature will have its geometry updated. Default value is false.
editable
Type:  boolean
If true, the object can be edited by dragging control points and the underlying feature will have its geometry updated. Only applies to LineString and Polygon geometries. Default value is false.
fillColor
Type:  string
The fill color. All CSS3 colors are supported except for extended named colors. Only applies to polygon geometries.
fillOpacity
Type:  number
The fill opacity between 0.0 and 1.0. Only applies to polygon geometries.
icon
Type:  string|Icon|Symbol
Icon for the foreground. If a string is provided, it is treated as though it were an Icon with the string as url. Only applies to point geometries.
shape
Type:  MarkerShape
Defines the image map used for hit detection. Only applies to point geometries.
strokeColor
Type:  string
The stroke color. All CSS3 colors are supported except for extended named colors. Only applies to line and polygon geometries.
strokeOpacity
Type:  number
The stroke opacity between 0.0 and 1.0. Only applies to line and polygon geometries.
strokeWeight
Type:  number
The stroke width in pixels. Only applies to line and polygon geometries.
title
Type:  string
Rollover text. Only applies to point geometries.
visible
Type:  boolean
Whether the feature is visible. Defaults to true.
zIndex
Type:  number
All features are displayed on the map in order of their zIndex, with higher values displaying in front of features with lower values. Markers are always displayed in front of line-strings and polygons.

Data.StylingFunction typedef

google.maps.Data.StylingFunction typedef

A function that computes the appearance of a feature.

The Data.setStyle() method can accept a styling function. Use this when features should appear differently depending on their properties. You can find more information about styling features in the developer's guide.

function(Data.Feature): Data.StyleOptions

Data.Feature class

google.maps.Data.Feature class

A feature has a geometry, an id, and a set of properties.

Constructor
Data.Feature
Data.Feature([options])
Parameters: 
Constructs a Feature with the given options.
Methods
forEachProperty
forEachProperty(callback)
Parameters: 
  • callbackfunction(*, string)
Return Value:  None
Repeatedly invokes the given function, passing a property value and name on each invocation. The order of iteration through the properties is undefined.
getGeometry
getGeometry()
Parameters:  None
Return Value:  Data.Geometry
Returns the feature's geometry.
getId
getId()
Parameters:  None
Return Value:  number|string|undefined
Returns the feature ID.
getProperty
getProperty(name)
Parameters: 
  • namestring
Return Value:  *
Returns the value of the requested property, or undefined if the property does not exist.
removeProperty
removeProperty(name)
Parameters: 
  • namestring
Return Value:  None
Removes the property with the given name.
setGeometry
setGeometry(newGeometry)
Parameters: 
Return Value:  None
Sets the feature's geometry.
setProperty
setProperty(name, newValue)
Parameters: 
  • namestring
  • newValue*
Return Value:  None
Sets the value of the specified property. If newValue is undefined this is equivalent to calling removeProperty.
toGeoJson
toGeoJson(callback)
Parameters: 
  • callbackfunction(Object)
Return Value:  None
Exports the feature to a GeoJSON object.
Events
removeproperty
function(event)
Arguments: 
This event is triggered when a feature's property is removed.
setgeometry
function(event)
Arguments: 
This event is triggered when a feature's geometry is set.
setproperty
function(event)
Arguments: 
This event is triggered when a feature's property is set.

Data.FeatureOptions interface

google.maps.Data.FeatureOptions interface

Optional parameters for creating Data.Feature objects.

Properties
geometry
The feature geometry. If none is specified when a feature is constructed, the feature's geometry will be null. If a LatLng object or LatLngLiteral is given, this will be converted to a Data.Point geometry.
id
Type:  number|string
Feature ID is optional. If provided, it can be used to look up the feature in a Data object using the getFeatureById() method. Note that a feature's ID cannot be subsequently changed.
properties
Type:  Object
The feature properties. This is an arbitrary mapping of property names to values.

Data.Geometry interface

google.maps.Data.Geometry interface

A superclass for the various geometry objects.

Methods
forEachLatLng
forEachLatLng(callback)
Parameters: 
  • callbackfunction(LatLng)
Return Value:  None
Repeatedly invokes the given function, passing a point from the geometry to the function on each invocation.
getType
getType()
Parameters:  None
Return Value:  string
Returns the type of the geometry object. Possibilities are "Point", "MultiPoint", "LineString", "MultiLineString", "LinearRing", "Polygon", "MultiPolygon", or "GeometryCollection".

Data.Point class

google.maps.Data.Point class

A Point geometry contains a single LatLng.

This class implements Data.Geometry.

Constructor
Data.Point
Data.Point(latLng)
Parameters: 
Constructs a Data.Point from the given LatLng or LatLngLiteral.
Methods
forEachLatLng
forEachLatLng(callback)
Parameters: 
  • callbackfunction(LatLng)
Return Value:  None
get
get()
Parameters:  None
Return Value:  LatLng
Returns the contained LatLng.
getType
getType()
Parameters:  None
Return Value:  string
Returns the string "Point".

Data.MultiPoint class

google.maps.Data.MultiPoint class

A MultiPoint geometry contains a number of LatLngs.

This class implements Data.Geometry.

Constructor
Data.MultiPoint
Data.MultiPoint(elements)
Parameters: 
Constructs a Data.MultiPoint from the given LatLngs or LatLngLiterals.
Methods
forEachLatLng
forEachLatLng(callback)
Parameters: 
  • callbackfunction(LatLng)
Return Value:  None
getArray
getArray()
Parameters:  None
Return Value:  Array<LatLng>
Returns an array of the contained LatLngs. A new array is returned each time getArray() is called.
getAt
getAt(n)
Parameters: 
  • nnumber
Return Value:  LatLng
Returns the n-th contained LatLng.
getLength
getLength()
Parameters:  None
Return Value:  number
Returns the number of contained LatLngs.
getType
getType()
Parameters:  None
Return Value:  string
Returns the string "MultiPoint".

Data.LineString class

google.maps.Data.LineString class

A LineString geometry contains a number of LatLngs.

This class implements Data.Geometry.

Constructor
Data.LineString
Data.LineString(elements)
Parameters: 
Constructs a Data.LineString from the given LatLngs or LatLngLiterals.
Methods
forEachLatLng
forEachLatLng(callback)
Parameters: 
  • callbackfunction(LatLng)
Return Value:  None
getArray
getArray()
Parameters:  None
Return Value:  Array<LatLng>
Returns an array of the contained LatLngs. A new array is returned each time getArray() is called.
getAt
getAt(n)
Parameters: 
  • nnumber
Return Value:  LatLng
Returns the n-th contained LatLng.
getLength
getLength()
Parameters:  None
Return Value:  number
Returns the number of contained LatLngs.
getType
getType()
Parameters:  None
Return Value:  string
Returns the string "LineString".

Data.MultiLineString class

google.maps.Data.MultiLineString class

A MultiLineString geometry contains a number of LineStrings.

This class implements Data.Geometry.

Constructor
Data.MultiLineString
Data.MultiLineString(elements)
Parameters: 
Constructs a Data.MultiLineString from the given Data.LineStrings or arrays of positions.
Methods
forEachLatLng
forEachLatLng(callback)
Parameters: 
  • callbackfunction(LatLng)
Return Value:  None
getArray
getArray()
Parameters:  None
Return Value:  Array<Data.LineString>
Returns an array of the contained Data.LineStrings. A new array is returned each time getArray() is called.
getAt
getAt(n)
Parameters: 
  • nnumber
Return Value:  Data.LineString
Returns the n-th contained Data.LineString.
getLength
getLength()
Parameters:  None
Return Value:  number
Returns the number of contained Data.LineStrings.
getType
getType()
Parameters:  None
Return Value:  string
Returns the string "MultiLineString".

Data.LinearRing class

google.maps.Data.LinearRing class

A LinearRing geometry contains a number of LatLngs, representing a closed LineString. There is no need to make the first LatLng equal to the last LatLng. The LinearRing is closed implicitly.

This class implements Data.Geometry.

Constructor
Data.LinearRing
Data.LinearRing(elements)
Parameters: 
Constructs a Data.LinearRing from the given LatLngs or LatLngLiterals.
Methods
forEachLatLng
forEachLatLng(callback)
Parameters: 
  • callbackfunction(LatLng)
Return Value:  None
getArray
getArray()
Parameters:  None
Return Value:  Array<LatLng>
Returns an array of the contained LatLngs. A new array is returned each time getArray() is called.
getAt
getAt(n)
Parameters: 
  • nnumber
Return Value:  LatLng
Returns the n-th contained LatLng.
getLength
getLength()
Parameters:  None
Return Value:  number
Returns the number of contained LatLngs.
getType
getType()
Parameters:  None
Return Value:  string
Returns the string "LinearRing".

Data.Polygon class

google.maps.Data.Polygon class

A Polygon geometry contains a number of Data.LinearRings. The first linear-ring must be the polygon exterior boundary and subsequent linear-rings must be interior boundaries, also known as holes. See the sample polygon with a hole.

This class implements Data.Geometry.

Constructor
Data.Polygon
Data.Polygon(elements)
Parameters: 
Constructs a Data.Polygon from the given Data.LinearRings or arrays of positions.
Methods
forEachLatLng
forEachLatLng(callback)
Parameters: 
  • callbackfunction(LatLng)
Return Value:  None
getArray
getArray()
Parameters:  None
Return Value:  Array<Data.LinearRing>
Returns an array of the contained Data.LinearRings. A new array is returned each time getArray() is called.
getAt
getAt(n)
Parameters: 
  • nnumber
Return Value:  Data.LinearRing
Returns the n-th contained Data.LinearRing.
getLength
getLength()
Parameters:  None
Return Value:  number
Returns the number of contained Data.LinearRings.
getType
getType()
Parameters:  None
Return Value:  string
Returns the string "Polygon".

Data.MultiPolygon class

google.maps.Data.MultiPolygon class

A MultiPolygon geometry contains a number of Data.Polygons.

This class implements Data.Geometry.

Constructor
Data.MultiPolygon
Data.MultiPolygon(elements)
Parameters: 
Constructs a Data.MultiPolygon from the given Data.Polygons or arrays of positions.
Methods
forEachLatLng
forEachLatLng(callback)
Parameters: 
  • callbackfunction(LatLng)
Return Value:  None
getArray
getArray()
Parameters:  None
Return Value:  Array<Data.Polygon>
Returns an array of the contained Data.Polygons. A new array is returned each time getArray() is called.
getAt
getAt(n)
Parameters: 
  • nnumber
Return Value:  Data.Polygon
Returns the n-th contained Data.Polygon.
getLength
getLength()
Parameters:  None
Return Value:  number
Returns the number of contained Data.Polygons.
getType
getType()
Parameters:  None
Return Value:  string
Returns the string "MultiPolygon".

Data.GeometryCollection class

google.maps.Data.GeometryCollection class

A GeometryCollection contains a number of geometry objects. Any LatLng or LatLngLiteral objects are automatically converted to Data.Point geometry objects.

This class implements Data.Geometry.

Constructor
Data.GeometryCollection
Data.GeometryCollection(elements)
Parameters: 
Constructs a Data.GeometryCollection from the given geometry objects or LatLngs.
Methods
forEachLatLng
forEachLatLng(callback)
Parameters: 
  • callbackfunction(LatLng)
Return Value:  None
getArray
getArray()
Parameters:  None
Return Value:  Array<Data.Geometry>
Returns an array of the contained geometry objects. A new array is returned each time getArray() is called.
getAt
getAt(n)
Parameters: 
  • nnumber
Return Value:  Data.Geometry
Returns the n-th contained geometry object.
getLength
getLength()
Parameters:  None
Return Value:  number
Returns the number of contained geometry objects.
getType
getType()
Parameters:  None
Return Value:  string
Returns the string "GeometryCollection".

Data.MouseEvent interface

google.maps.Data.MouseEvent interface

This object is passed to mouse event handlers on a Data object.

This interface extends MouseEvent.

Properties
feature
Type:  Data.Feature
The feature which generated the mouse event.

Data.AddFeatureEvent interface

google.maps.Data.AddFeatureEvent interface

The properties of a addfeature event.

Properties
feature
Type:  Data.Feature
The feature that was added to the FeatureCollection.

Data.RemoveFeatureEvent interface

google.maps.Data.RemoveFeatureEvent interface

The properties of a removefeature event.

Properties
feature
Type:  Data.Feature
The feature that was removed from the FeatureCollection.

Data.SetGeometryEvent interface

google.maps.Data.SetGeometryEvent interface

The properties of a setgeometry event.

Properties
feature
Type:  Data.Feature
The feature whose geometry was set.
newGeometry
The new feature geometry.
oldGeometry
The previous feature geometry.

Data.SetPropertyEvent interface

google.maps.Data.SetPropertyEvent interface

The properties of a setproperty event.

Properties
feature
Type:  Data.Feature
The feature whose property was set.
name
Type:  string
The property name.
newValue
Type:  *
The new value.
oldValue
Type:  *
The previous value. Will be undefined if the property was added.

Data.RemovePropertyEvent interface

google.maps.Data.RemovePropertyEvent interface

The properties of a removeproperty event.

Properties
feature
Type:  Data.Feature
The feature whose property was removed.
name
Type:  string
The property name.
oldValue
Type:  *
The previous value.

Send feedback about...

Google Maps JavaScript API
Google Maps JavaScript API
Need help? Visit our support page.