Page Summary

outlined_flag

• The Google Maps Data layer provides a flexible way to store, display, and style geospatial data, including GeoJSON, on a map.

• GeoJSON data can be easily loaded and rendered using theloadGeoJson() method, supporting points, lines, and polygons.

• Data styling can be customized usingsetStyle() with either aStyleOptions object for uniform styling or a function for dynamic, feature-based styling.

• User interaction with data features is enabled through event listeners likeclick,mouseover, and others, allowing for interactive map experiences.

• The Data layer allows associating arbitrary properties with features, facilitating data visualization and dynamic styling based on these properties.

The Google Maps Data layer provides a container for arbitrary geospatial data.You can use the Data layer to store your custom data, or to display GeoJSONdata on a Google map.

Overview

Watch this DevBytes video to learn more about the Data Layer.

With the Maps JavaScript API you can mark up a map with avariety of overlays, such as markers, polylines, polygons, etc. Each of theseannotations combines styling information with location data. Thegoogle.maps.Data class is a container for arbitrary geospatial data. Insteadof adding these overlays, you can use the Data layer to add arbitrarygeographical data to your map. If that data contains geometries, such as points,lines or polygons, the API will render these by default as markers, polylinesand polygons. You can style these features as you would a normal overlay, orapply styling rules based on other properties contained in your data set.

Thegoogle.maps.Data class allows you to:

• Draw polygons on your map.
• Add GeoJSON data to your map.
  GeoJSON is a standard for geospatial data on the internet. TheData class follows the structure of GeoJSON in its data representation and makes it easy to display GeoJSON data. Use theloadGeoJson() method to easily import GeoJSON data and display points, line-strings and polygons.
• Usegoogle.maps.Data to model arbitrary data.
  Most real-world entities have other properties associated with them. For example, stores have opening hours, roads have traffic speed, and each Girl Guide troupe has cookie-selling turf. Withgoogle.maps.Data, you can model these properties, and style your data accordingly.
• Choose how your data is represented, andchange your mind on the fly.
  The Data layer lets you make decisions about the visualization and interaction of your data. For example, when looking at a map of convenience stores you might choose to display only those stores that sell transit tickets.

Draw a polygon

TheData.Polygon class handles polygon winding for you. You can pass it an array of one or more linear rings, defined as latitude/longitude coordinates. The first linear ring defines the outer boundary of the polygon. If you pass more than one linear ring, the second and subsequent linear rings are used to define inner paths (holes) in the polygon.

The following example creates a rectangular polygon with two holes in it:

// This example uses the Google Maps JavaScript API's Data layer// to create a rectangular polygon with 2 holes in it.functioninitMap():void{constmap=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{zoom:6,center:{lat:-33.872,lng:151.252},});// Define the LatLng coordinates for the outer path.constouterCoords=[{lat:-32.364,lng:153.207},// north west{lat:-35.364,lng:153.207},// south west{lat:-35.364,lng:158.207},// south east{lat:-32.364,lng:158.207},// north east];// Define the LatLng coordinates for an inner path.constinnerCoords1=[{lat:-33.364,lng:154.207},{lat:-34.364,lng:154.207},{lat:-34.364,lng:155.207},{lat:-33.364,lng:155.207},];// Define the LatLng coordinates for another inner path.constinnerCoords2=[{lat:-33.364,lng:156.207},{lat:-34.364,lng:156.207},{lat:-34.364,lng:157.207},{lat:-33.364,lng:157.207},];map.data.add({geometry:newgoogle.maps.Data.Polygon([outerCoords,innerCoords1,innerCoords2,]),});}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
index.ts

// This example uses the Google Maps JavaScript API's Data layer// to create a rectangular polygon with 2 holes in it.functioninitMap(){constmap=newgoogle.maps.Map(document.getElementById("map"),{zoom:6,center:{lat:-33.872,lng:151.252},});// Define the LatLng coordinates for the outer path.constouterCoords=[{lat:-32.364,lng:153.207},// north west{lat:-35.364,lng:153.207},// south west{lat:-35.364,lng:158.207},// south east{lat:-32.364,lng:158.207},// north east];// Define the LatLng coordinates for an inner path.constinnerCoords1=[{lat:-33.364,lng:154.207},{lat:-34.364,lng:154.207},{lat:-34.364,lng:155.207},{lat:-33.364,lng:155.207},];// Define the LatLng coordinates for another inner path.constinnerCoords2=[{lat:-33.364,lng:156.207},{lat:-34.364,lng:156.207},{lat:-34.364,lng:157.207},{lat:-33.364,lng:157.207},];map.data.add({geometry:newgoogle.maps.Data.Polygon([outerCoords,innerCoords1,innerCoords2,]),});}window.initMap=initMap;
index.js

Load GeoJSON

GeoJSON is a common standard for sharing geospatial dataon the internet. It is lightweight and easily human-readable, making it idealfor sharing and collaborating. With the Data layer, you can add GeoJSON data toa Google map in just one line of code.

map.data.loadGeoJson('google.json');

Every map has amap.dataobject, which acts as a data layer for arbitrary geospatial data, includingGeoJSON. You can load and display a GeoJSON file by calling theloadGeoJSON()method of thedata object. The below example shows how to add a map and loadexternal GeoJSON data.

asyncfunctioninitMap(){(awaitgoogle.maps.importLibrary('maps'))asgoogle.maps.MapsLibrary;constmapElement=document.querySelector('gmp-map')asgoogle.maps.MapElement;letinnerMap=mapElement.innerMap;innerMap.data.loadGeoJson('google.json');}initMap();
index.ts

asyncfunctioninitMap(){(awaitgoogle.maps.importLibrary('maps'));constmapElement=document.querySelector('gmp-map');letinnerMap=mapElement.innerMap;innerMap.data.loadGeoJson('google.json');}initMap();
index.js

Sample GeoJSON

Most of the examples on this page use a common GeoJSON file. This file definesthe six characters in ‘Google’ as polygons over Australia. Please feel free tocopy or modify this file as you test out the Data layer.

Note: In order to load a json file from another domain, that domain must haveenabledCross-origin resource sharing.

The full text of the file can be seen below by expanding the small arrow nextto the words google.json.

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"letter":"G","color":"blue","rank":"7","ascii":"71"},"geometry":{"type":"Polygon","coordinates":[[[123.61,-22.14],[122.38,-21.73],[121.06,-21.69],[119.66,-22.22],[119.00,-23.40],[118.65,-24.76],[118.43,-26.07],[118.78,-27.56],[119.22,-28.57],[120.23,-29.49],[121.77,-29.87],[123.57,-29.64],[124.45,-29.03],[124.71,-27.95],[124.80,-26.70],[124.80,-25.60],[123.61,-25.64],[122.56,-25.64],[121.72,-25.72],[121.81,-26.62],[121.86,-26.98],[122.60,-26.90],[123.57,-27.05],[123.57,-27.68],[123.35,-28.18],[122.51,-28.38],[121.77,-28.26],[121.02,-27.91],[120.49,-27.21],[120.14,-26.50],[120.10,-25.64],[120.27,-24.52],[120.67,-23.68],[121.72,-23.32],[122.43,-23.48],[123.04,-24.04],[124.54,-24.28],[124.58,-23.20],[123.61,-22.14]]]}},{"type":"Feature","properties":{"letter":"o","color":"red","rank":"15","ascii":"111"},"geometry":{"type":"Polygon","coordinates":[[[128.84,-25.76],[128.18,-25.60],[127.96,-25.52],[127.88,-25.52],[127.70,-25.60],[127.26,-25.79],[126.60,-26.11],[126.16,-26.78],[126.12,-27.68],[126.21,-28.42],[126.69,-29.49],[127.74,-29.80],[128.80,-29.72],[129.41,-29.03],[129.72,-27.95],[129.68,-27.21],[129.33,-26.23],[128.84,-25.76]],[[128.45,-27.44],[128.32,-26.94],[127.70,-26.82],[127.35,-27.05],[127.17,-27.80],[127.57,-28.22],[128.10,-28.42],[128.49,-27.80],[128.45,-27.44]]]}},{"type":"Feature","properties":{"letter":"o","color":"yellow","rank":"15","ascii":"111"},"geometry":{"type":"Polygon","coordinates":[[[131.87,-25.76],[131.35,-26.07],[130.95,-26.78],[130.82,-27.64],[130.86,-28.53],[131.26,-29.22],[131.92,-29.76],[132.45,-29.87],[133.06,-29.76],[133.72,-29.34],[134.07,-28.80],[134.20,-27.91],[134.07,-27.21],[133.81,-26.31],[133.37,-25.83],[132.71,-25.64],[131.87,-25.76]],[[133.15,-27.17],[132.71,-26.86],[132.09,-26.90],[131.74,-27.56],[131.79,-28.26],[132.36,-28.45],[132.93,-28.34],[133.15,-27.76],[133.15,-27.17]]]}},{"type":"Feature","properties":{"letter":"g","color":"blue","rank":"7","ascii":"103"},"geometry":{"type":"Polygon","coordinates":[[[138.12,-25.04],[136.84,-25.16],[135.96,-25.36],[135.26,-25.99],[135,-26.90],[135.04,-27.91],[135.26,-28.88],[136.05,-29.45],[137.02,-29.49],[137.81,-29.49],[137.94,-29.99],[137.90,-31.20],[137.85,-32.24],[136.88,-32.69],[136.45,-32.36],[136.27,-31.80],[134.95,-31.84],[135.17,-32.99],[135.52,-33.43],[136.14,-33.76],[137.06,-33.83],[138.12,-33.65],[138.86,-33.21],[139.30,-32.28],[139.30,-31.24],[139.30,-30.14],[139.21,-28.96],[139.17,-28.22],[139.08,-27.41],[139.08,-26.47],[138.99,-25.40],[138.73,-25.00],[138.12,-25.04]],[[137.50,-26.54],[136.97,-26.47],[136.49,-26.58],[136.31,-27.13],[136.31,-27.72],[136.58,-27.99],[137.50,-28.03],[137.68,-27.68],[137.59,-26.78],[137.50,-26.54]]]}},{"type":"Feature","properties":{"letter":"l","color":"green","rank":"12","ascii":"108"},"geometry":{"type":"Polygon","coordinates":[[[140.14,-21.04],[140.31,-29.42],[141.67,-29.49],[141.59,-20.92],[140.14,-21.04]]]}},{"type":"Feature","properties":{"letter":"e","color":"red","rank":"5","ascii":"101"},"geometry":{"type":"Polygon","coordinates":[[[144.14,-27.41],[145.67,-27.52],[146.86,-27.09],[146.82,-25.64],[146.25,-25.04],[145.45,-24.68],[144.66,-24.60],[144.09,-24.76],[143.43,-25.08],[142.99,-25.40],[142.64,-26.03],[142.64,-27.05],[142.64,-28.26],[143.30,-29.11],[144.18,-29.57],[145.41,-29.64],[146.46,-29.19],[146.64,-28.72],[146.82,-28.14],[144.84,-28.42],[144.31,-28.26],[144.14,-27.41]],[[144.18,-26.39],[144.53,-26.58],[145.19,-26.62],[145.72,-26.35],[145.81,-25.91],[145.41,-25.68],[144.97,-25.68],[144.49,-25.64],[144,-25.99],[144.18,-26.39]]]}}]}

Style GeoJSON Data

Use theData.setStyle() method to specify how your data should look. ThesetStyle() method takes either aStyleOptionsobject literal, or a function that computes the style for each feature.

Simple style rules

The simplest way to style features is to pass aStyleOptions object literaltosetStyle(). This will set a single style for each feature in yourcollection. Note that each feature type is only able to render a subset of theavailable options. This means that its possible to combine styles for differentfeature types in a single object literal. For example, the below snippet setsboth a customicon, which only affects point geometries, andfillColor,which only affects polygons.

map.data.setStyle({icon:'//example.com/path/to/image.png',fillColor:'green'});

More information on valid style/feature combinations can be found inStyleOptions.

Below is an example of setting the stroke and fill color for several featuresusing aStyleOptions object literal. Notice that each polygon is styled thesame.

asyncfunctioninitMap(){(awaitgoogle.maps.importLibrary('maps'))asgoogle.maps.MapsLibrary;constmapElement=document.querySelector('gmp-map')asgoogle.maps.MapElement;constinnerMap=mapElement.innerMap;// Load GeoJSON.google.maps.event.addListenerOnce(innerMap,'idle',()=>{innerMap.data.loadGeoJson('google.json');});// Set the stroke width, and fill color for each polygoninnerMap.data.setStyle({fillColor:'green',strokeWeight:1,});}initMap();
index.ts

asyncfunctioninitMap(){(awaitgoogle.maps.importLibrary('maps'));constmapElement=document.querySelector('gmp-map');constinnerMap=mapElement.innerMap;// Load GeoJSON.google.maps.event.addListenerOnce(innerMap,'idle',()=>{innerMap.data.loadGeoJson('google.json');});// Set the stroke width, and fill color for each polygoninnerMap.data.setStyle({fillColor:'green',strokeWeight:1,});}initMap();
index.js

/* * Always set the map height explicitly to define the size of the div element * that contains the map. */gmp-map{height:100%;}/* * Optional: Makes the sample page fill the window. */html,body{height:100%;margin:0;padding:0;}
style.css

<html>    <head>        <title>Data Layer: Styling</title>        <link rel="stylesheet" type="text/css" href="./style.css" />        <script type="module" src="./index.js"></script>        <!-- prettier-ignore -->        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>    </head>    <body>        <gmp-map center="-28,137" zoom="4"></gmp-map>    </body></html>
index.html

Declarative style rules

If you want to update the style of a large number of overlays, such as markersor polylines, you typically have to iterate through each overlay on your mapand set its style individually. With the Data layer, you can set rulesdeclaratively and they will be applied across your entire data set. When eitherthe data, or the rules, are updated, the styling will be automatically appliedto every feature. You can use a features properties to customize its style.

For example, the below code sets the color of each character in ourgoogle.json by examining its position in the ascii character set. In this casewe’ve encoded the character position along with our data.

// Color Capital letters blue, and lower case letters red.// Capital letters are represented in ascii by values less than 91map.data.setStyle(function(feature){varascii=feature.getProperty('ascii');varcolor=ascii >91?'red':'blue';return{fillColor:color,strokeWeight:1};});

Remove styles

If you’d like to remove any applied styles, pass an empty object literal to thesetStyles() method.

// Remove custom styles.map.data.setStyle({});

This will remove any custom styles that you’ve specified, and the features willrender using the default styles. If you’d instead like to no longer render thefeatures, set thevisible property ofStyleOptions tofalse.

// Hide the Data layer.map.data.setStyle({visible:false});

Override default styles

Styling rules are typically applied to every feature in the Data layer.However, there are times when you’d like to apply special styling rules tospecific features. For example, as a way to highlight a feature on click.

To apply special styling rules, use theoverrideStyle() method. Any propertiesthat you change with theoverrideStyle() method are appliedin addition to theglobal styles already specified insetStyle(). For example, the below codewill change the fill color of a polygon on click, but will not set any otherstyles.

// Set the global styles.map.data.setStyle({fillColor:'green',strokeWeight:3});// Set the fill color to red when the feature is clicked.// Stroke weight remains 3.map.data.addListener('click',function(event){map.data.overrideStyle(event.feature,{fillColor:'red'});});

Call therevertStyle() method to remove all style overrides.

Style options

The options available for styling each feature depend upon the feature type.For example,fillColor will only render on polygon geometries, whileiconwill only appear on a point geometry. More information is available in thereference documentation forStyleOptions.

Available on all geometries

• clickable: Iftrue, the feature receives mouse and touch events
• visible: Iftrue, the feature is visible.
• zIndex: All features are displayed on the map in order of theirzIndex,with higher values displaying in front of features with lower values.Markers are always displayed in front of line-strings and polygons.

Available on point geometries

• cursor: Mouse cursor to show on hover.
• icon: Icon to show for the point geometry.
• shape: Defines the image map used for hit detection.
• title: Rollover text.

Available on line geometries

• strokeColor: The stroke color. All CSS3 colors are supported except forextended named colors.
• strokeOpacity: The stroke opacity between 0.0 and 1.0.
• strokeWeight: The stroke width in pixels.

Available on polygon geometries

• fillColor: The fill color. All CSS3 colors are supported except forextended named colors.
• fillOpacity: The fill opacity between0.0 and1.0.
• strokeColor: The stroke color. All CSS3 colors are supported except forextended named colors.
• strokeOpacity: The stroke opacity between 0.0 and 1.0.
• strokeWeight: The stroke width in pixels.

Add Event Handlers

Features respond to events, such asmouseup ormousedown. You can add eventlisteners to allow users to interact with the data on the map. In the belowexample, we add a mouseover event, that displays information about the featureunder the mouse cursor.

// Set mouseover event for each feature.innerMap.data.addListener('mouseover',(event)=>{document.getElementById('info-box').textContent=event.feature.getProperty('letter');});
index.js

Data layer events

The following events are common to all features, regardless of their geometrytype:

• addfeature
• click
• dblclick
• mousedown
• mouseout
• mouseover
• mouseup
• removefeature
• removeproperty
• rightclick
• setgeometry
• setproperty

More information about these events can be found in the reference documentationfor thegoogle.maps.data class.

Change Appearance Dynamically

You can set the style of the Data layer by passing a function that computes thestyle of each feature to thegoogle.maps.data.setStyle() method. Thisfunction will be called each time a feature’s properties are updated.

In the below example, we add an event listener for theclick event thatupdates the feature’sisColorful property. The feature styling is updated toreflect the change as soon as the property is set.

// Color each letter gray. Change the color when the isColorful property// is set to true.map.data.setStyle(function(feature){varcolor='gray';if(feature.getProperty('isColorful')){color=feature.getProperty('color');}return/** @type {!google.maps.Data.StyleOptions} */({fillColor:color,strokeColor:color,strokeWeight:2});});// When the user clicks, set 'isColorful', changing the color of the letters.map.data.addListener('click',function(event){event.feature.setProperty('isColorful',true);});// When the user hovers, tempt them to click by outlining the letters.// Call revertStyle() to remove all overrides. This will use the style rules// defined in the function passed to setStyle()map.data.addListener('mouseover',function(event){map.data.revertStyle();map.data.overrideStyle(event.feature,{strokeWeight:8});});map.data.addListener('mouseout',function(event){map.data.revertStyle();});