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.

Map styling

The following example creates a 3D map in Yosemite Valley, California; and applies a map style that colors recreation feature icons and text to orange.

Read the documentation .

JavaScript

 async 
  
 function 
  
 initMap 
 () 
  
 { 
  
 const 
  
 { 
  
 Map3DElement 
  
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'maps3d' 
 ); 
  
 const 
  
 map 
  
 = 
  
 new 
  
 Map3DElement 
 ({ 
  
 center 
 : 
  
 { 
  
 lat 
 : 
  
 37.75183154601466 
 , 
  
 lng 
 : 
  
 - 
 119.52369070507672 
 , 
  
 altitude 
 : 
  
 2200 
 , 
  
 }, 
  
 tilt 
 : 
  
 67.5 
 , 
  
 heading 
 : 
  
 108.94057782079429 
 , 
  
 range 
 : 
  
 6605.57279990986 
 , 
  
 mapId 
 : 
  
 'bcce776b92de1336e22c569f' 
 , 
  
 mode 
 : 
  
 'HYBRID' 
 , 
  
 gestureHandling 
 : 
  
 'COOPERATIVE' 
 , 
  
 }); 
  
 document 
 . 
 body 
 . 
 append 
 ( 
 map 
 ); 
 } 
 initMap 
 (); 
   index 
 . 
 js

CSS

 /* * Always set the map height explicitly to define the size of the div element 
 * that contains the map. 
 */ 
 # 
 gmp-map-3d 
  
 { 
  
 height 
 : 
  
 100 
 % 
 ; 
 } 
 html 
 , 
 body 
  
 { 
  
 height 
 : 
  
 100 
 % 
 ; 
  
 margin 
 : 
  
 0 
 ; 
  
 padding 
 : 
  
 0 
 ; 
 } 
   style 
 . 
 css

HTML

<html>
    <head>
        <title>3d map styling</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <!-- 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 
 / 
 3 
 d 
 - 
 map 
 - 
 styling 
 
  
  npm 
  
 i 
 
  
  npm 
  
 start