Places UI Kit :A ready-to-use library that provides room for customization and low-code development. Try it out, and share your input on your UI Kit experience.

Data Layer: Simple

AI-generated Key Takeaways

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

 async 
  
 function 
  
 initMap 
 () 
  
 { 
  
 ( 
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps" 
 )) 
  
 as 
  
 google 
 . 
 maps 
 . 
 MapsLibrary 
 ; 
  
 const 
  
 mapElement 
  
 = 
  
 document 
 . 
 querySelector 
 ( 
  
 "gmp-map" 
  
 ) 
  
 as 
  
 google 
 . 
 maps 
 . 
 MapElement 
 ; 
  
 let 
  
 innerMap 
  
 = 
  
 mapElement 
 . 
 innerMap 
 ; 
  
 innerMap 
 . 
 data 
 . 
 loadGeoJson 
 ( 
 "google.json" 
 ); 
 } 
 initMap 
 (); 
   index 
 . 
 ts

JavaScript

 async 
  
 function 
  
 initMap 
 () 
  
 { 
  
 ( 
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps" 
 )); 
  
 const 
  
 mapElement 
  
 = 
  
 document 
 . 
 querySelector 
 ( 
 "gmp-map" 
 ); 
  
 let 
  
 innerMap 
  
 = 
  
 mapElement 
 . 
 innerMap 
 ; 
  
 innerMap 
 . 
 data 
 . 
 loadGeoJson 
 ( 
 "google.json" 
 ); 
 } 
 initMap 
 (); 
   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>
  </head>
  <body>
    <!-- Add a comment. -->
    <gmp-map center="-28,137" zoom="4"></gmp-map>

    <!-- 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>
  </body>
</html>  index.html

Try Sample

JSFiddle.net

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.

  
  git 
  
 clone 
  
 https 
 : 
 //github.com/googlemaps-samples/js-api-samples.git 
 
  
  cd 
  
 samples 
 / 
 layer 
 - 
 data 
 - 
 simple 
 
  
  npm 
  
 i 
 
  
  npm 
  
 start