Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Data Layer: Simple

Spark icon

Page Summary

This example demonstrates loading a GeoJSON file to display geographical data on a Google Map.
It uses the map.data.loadGeoJson function to fetch and render the GeoJSON data.
The map is centered on Australia and uses a zoom level of 4.
Included are code snippets in TypeScript, JavaScript, CSS, and HTML to showcase the implementation.
The sample can be run locally with Git and Node.js or tried online through provided links.

This example uses a data layer to set the stroke width and fill color for the samples provided from a GeoJSON file.

Read the documentation.

[フレーム]

TypeScript

asyncfunctioninit(){
awaitgoogle.maps.importLibrary('maps');
constmapElement=document.querySelector('gmp-map')!;
constinnerMap=mapElement.innerMap;
innerMap.data.loadGeoJson('google.json');
}
voidinit();index.ts

JavaScript

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

CSS

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

HTML

<html>
 <head>
 <title>Data Layer: Simple</title>
 <link rel="stylesheet" type="text/css" href="./style.css" />
 <script type="module" src="./index.js"></script>
 <script>
 // prettier-ignore
 (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: "GOOGLE_MAPS_API_KEY"
 });
 </script>
 </head>
 <body>
 <!-- Add a comment. -->
 <gmp-map center="-28,137" zoom="4"></gmp-map>
 </body>
</html>index.html

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

gitclonehttps://github.com/googlemaps-samples/js-api-samples.git
cdsamples/layer-data-simple
npmi
npmstart