Send feedback
Change map mode Stay organized with collections
Save and categorize content based on your preferences.
The following example shows how to change the map mode, toggling the visibility
of labels. Read the documentation
.
JavaScript
let
map
;
async
function
init
()
{
const
{
Map3DElement
,
MapMode
}
=
await
google
.
maps
.
importLibrary
(
"maps3d"
);
map
=
new
Map3DElement
({
center
:
{
lat
:
37.79810773998413
,
lng
:
-
122.41784275049939
,
altitude
:
89.08476932205978
},
range
:
6062.016931506805
,
tilt
:
81.17100663963272
,
heading
:
-
56.047035719765596
,
});
map
.
mode
=
MapMode
.
SATELLITE
;
document
.
body
.
append
(
map
);
const
locationCamera
=
{
center
:
{
lat
:
21.263523536467105
,
lng
:
-
157.80663691939296
,
altitude
:
80.28936069489404
},
range
:
1500.8202963253427
,
tilt
:
76.9173260789542
,
heading
:
-
44.59196007522445
,
};
// Get the button element by its ID
const
toggleButton
=
document
.
getElementById
(
'toggleButton'
);
toggleButton
.
addEventListener
(
'click'
,
function
()
{
// Toggle the labels.
if
(
map
.
mode
==
MapMode
.
SATELLITE
)
{
// Setting the map mode to HYBRID turns the labels on.
map
.
mode
=
MapMode
.
HYBRID
;
document
.
getElementById
(
'toggleButton'
).
innerText
=
"Labels are on. (HYBRID)"
;
}
else
{
// Setting the map mode to SATELLITE turns the labels on.
map
.
mode
=
MapMode
.
SATELLITE
;
document
.
getElementById
(
'toggleButton'
).
innerText
=
"Labels are off. (SATELLITE)"
;
}
});
}
init
();
Note:
The JavaScript is compiled from the TypeScript snippet.
CSS
/* * Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
html
,
map
{
height
:
100
%
;
}
body
{
height
:
100
%
;
margin
:
0
;
padding
:
0
;
}
.
toggleButton
{
background
:
rgb
(
235
,
235
,
235
);
color
:
black
;
border
:
none
;
padding
:
10
px
20
px
;
text-align
:
center
;
text-decoration
:
none
;
display
:
inline-block
;
font-size
:
16
px
;
border-radius
:
4
px
;
cursor
:
pointer
;
position
:
fixed
;
bottom
:
10
px
;
left
:
50
%
;
transform
:
translateX
(
-50
%
);
z-index
:
1000
;
}
.
toggleButton
:
hover
{
background-color
:
#007bff
;
color
:
white
;
}
HTML
<html>
<head>
<title>Map</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<button class="toggleButton" id="toggleButton">Labels are off. (SATELLITE)</button>
<!-- 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: "beta",});</script>
</body>
</html>
Try Sample
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
-
label
-
toggle
npm
i
npm
start
Send feedback
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License
, and code samples are licensed under the Apache 2.0 License
. For details, see the Google Developers Site Policies
. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-09-04 UTC.
Need to tell us more?
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[],[],null,["The following example shows how to change the map mode, toggling the visibility of labels.\n\n\u003cbr /\u003e\n\nRead the [documentation](/maps/documentation/javascript/3d/map-controls). \n\nJavaScript \n\n```javascript\nlet map;\nasync function init() {\n const { Map3DElement, MapMode } = await google.maps.importLibrary(\"maps3d\");\n map = new Map3DElement({ center: { lat: 37.79810773998413, lng: -122.41784275049939, altitude: 89.08476932205978 }, range: 6062.016931506805, tilt: 81.17100663963272, heading: -56.047035719765596, });\n map.mode = MapMode.SATELLITE;\n document.body.append(map);\n const locationCamera = {\n center: { lat: 21.263523536467105, lng: -157.80663691939296, altitude: 80.28936069489404 },\n range: 1500.8202963253427, tilt: 76.9173260789542, heading: -44.59196007522445,\n };\n // Get the button element by its ID\n const toggleButton = document.getElementById('toggleButton');\n toggleButton.addEventListener('click', function () {\n // Toggle the labels.\n if (map.mode == MapMode.SATELLITE) {\n // Setting the map mode to HYBRID turns the labels on.\n map.mode = MapMode.HYBRID;\n document.getElementById('toggleButton').innerText = \"Labels are on. (HYBRID)\";\n }\n else {\n // Setting the map mode to SATELLITE turns the labels on.\n map.mode = MapMode.SATELLITE;\n document.getElementById('toggleButton').innerText = \"Labels are off. (SATELLITE)\";\n }\n });\n}\ninit();https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/3d-label-toggle/docs/index.js#L9-L35\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n\nCSS \n\n```css\n/* * Always set the map height explicitly to define the size of the div element\n * that contains the map. \n */\nhtml,\nmap {\n height: 100%;\n}\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}\n.toggleButton {\n background: rgb(235, 235, 235);\n color: black;\n border: none;\n padding: 10px 20px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n border-radius: 4px;\n cursor: pointer;\n position: fixed;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 1000;\n}\n\n.toggleButton:hover {\n background-color: #007bff;\n color: white;\n}https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/3d-label-toggle/docs/style.css#L7-L40\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eMap\u003c/title\u003e\n\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.css\" /\u003e\n \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n\n \u003cbutton class=\"toggleButton\" id=\"toggleButton\"\u003eLabels are off. (SATELLITE)\u003c/button\u003e\n\n \u003c!-- prettier-ignore --\u003e\n \u003cscript\u003e(g=\u003e{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=()=\u003eh||(h=new Promise(async(f,n)=\u003e{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(/[A-Z]/g,t=\u003e\"_\"+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=()=\u003eh=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)=\u003er.add(f)&&u().then(()=\u003ed[l](f,...n))})\n ({key: \"AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8\", v: \"beta\",});\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/3d-label-toggle/docs/index.html#L8-L24\n```\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/3d-label-toggle/jsfiddle)\n\nClone Sample\n\n\nGit and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. \n\n git clone https://github.com/googlemaps-samples/js-api-samples.git\n cd samples/3d-label-toggle\n npm i\n npm start"]]
