The following 3D map modes are available in the 3D Maps in Maps JavaScript:
-
ROADMAPdisplays the default roadmap view with basemap labels. -
SATELLITEdisplays a photorealistic map based on aerial imagery. -
HYBRIDdisplays the satellite map view with basemap labels.
Here's an example of the 3D map in ROADMAP
mode:
TypeScript
async function init () { const { Map3DElement } = await google . maps . importLibrary ( 'maps3d' ); const map = new Map3DElement ({ center : { lat : 37.79334535092104 , lng : - 122.400742086205 , altitude : 0 , }, range : 2400 , tilt : 65 , heading : 0 , mode : 'ROADMAP' , internalUsageAttributionIds : [ 'gmp_git_jsapisamples_v1_3d-rendering' ], }); document . body . append ( map ); // Create the controls container const controls = document . createElement ( 'div' ); controls . id = 'controls' ; controls . classList . add ( 'map-mode-control' ); // Create the select element const selector = document . createElement ( 'select' ); selector . id = 'map-mode' ; const modes = [ 'ROADMAP' , 'SATELLITE' , 'HYBRID' ]; modes . forEach (( modeName ) = > { const option = document . createElement ( 'option' ); option . value = modeName ; option . textContent = modeName ; if ( modeName === 'ROADMAP' ) { option . selected = true ; } selector . appendChild ( option ); }); selector . addEventListener ( 'change' , function () { map . mode = this . value as google . maps . maps3d . MapMode ; }); controls . appendChild ( selector ); document . body . appendChild ( controls ); } void init ();
JavaScript
async function init () { const { Map3DElement } = await google . maps . importLibrary ( 'maps3d' ); const map = new Map3DElement ({ center : { lat : 37.79334535092104 , lng : - 122.400742086205 , altitude : 0 , }, range : 2400 , tilt : 65 , heading : 0 , mode : 'ROADMAP' , internalUsageAttributionIds : [ 'gmp_git_jsapisamples_v1_3d-rendering' ], }); document . body . append ( map ); // Create the controls container const controls = document . createElement ( 'div' ); controls . id = 'controls' ; controls . classList . add ( 'map-mode-control' ); // Create the select element const selector = document . createElement ( 'select' ); selector . id = 'map-mode' ; const modes = [ 'ROADMAP' , 'SATELLITE' , 'HYBRID' ]; modes . forEach (( modeName ) = > { const option = document . createElement ( 'option' ); option . value = modeName ; option . textContent = modeName ; if ( modeName === 'ROADMAP' ) { option . selected = true ; } selector . appendChild ( option ); }); selector . addEventListener ( 'change' , function () { map . mode = this . value ; }); controls . appendChild ( selector ); document . body . appendChild ( controls ); } void init ();
CSS
html , body { height : 100 % ; margin : 0 ; padding : 0 ; font-family : 'Roboto' , 'Helvetica' , 'Arial' , sans-serif ; } gmp-map-3d { height : 100 % ; width : 100 % ; } . map-mode-control { position : fixed ; bottom : 24 px ; right : 75 px ; display : flex ; align-items : center ; background-color : rgba ( 255 , 255 , 255 , 0.9 ); padding : 8 px ; border-radius : 8 px ; box-shadow : 0 4 px 20 px rgba ( 0 , 0 , 0 , 0.15 ); backdrop-filter : blur ( 8 px ); z-index : 1 ; } . map-mode-control select { font-size : 13 px ; padding : 4 px 8 px ; border : 1 px solid #dadce0 ; border-radius : 6 px ; background-color : white ; color : #3c4043 ; cursor : pointer ; outline : none ; transition : border-color 0.2 s , box-shadow 0.2 s ; } . map-mode-control select : hover { border-color : #1a73e8 ; } . map-mode-control select : focus { border-color : #1a73e8 ; box-shadow : 0 0 0 2 px rgba ( 26 , 115 , 232 , 0.2 ); }
HTML
<html> <head> <title>3d-map-roadmap</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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha" }); </script> </head> <body></body> </html>
Try Sample
Use cases
- Roadmap: Best for navigation-heavy apps where legibility and street-level data are primary.
- Satellite and hybrid: Ideal for real estate, environmental monitoring, or tourism apps where visual fidelity and terrain context are essential.
