Security notice : We have become aware of a security issue that may be affecting websites using specific third-party libraries (including polyfill.io). This issue can sometimes redirect visitors away from the intended website without website owner knowledge or permission. Many of our JavaScript samples previously included a
polyfill.io
script declaration. We have removed this from our samples. If you have used our JavaScript samples that contain this declaration, we recommend removing the declaration.
Announcement : New basemap styling is coming soon to Google Maps Platform. This update to map styling includes a new default color palette, modernized pins, and improvements to map experiences and usability. All map styles will be automatically updated in March 2025. For more information on availability and how to opt in earlier, see
New map style for Google Maps Platform .
Send feedback
Simple Map
Stay organized with collections
Save and categorize content based on your preferences.
This product or feature is Experimental (pre-GA).
Pre-GA products and features might have limited support, and changes to pre-GA products and
features might not be compatible with other pre-GA versions. Pre-GA Offerings are covered by
the Google
Maps Platform Service Specific Terms . For more information, see the
launch stage descriptions .
This example creates a 3D map with labels, centered on San Francisco's Golden
Gate Bridge.
<!DOCTYPE html>
<html>
<head>
<title>Photorealistic 3D Maps in Maps JavaScript Simple Map Demo</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
gmp-map-3d {
height: 400px;
}
</style>
</head>
<body>
<gmp-map-3d center="37.819852, -122.478549" tilt="67.5"></gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=alpha&libraries=maps3d"></script>
</body>
</html>
To turn labels off, add default-labels-disabled
to the gmp-map-3d
tag, as
shown below:
<!DOCTYPE html>
<html>
<head>
<title>Photorealistic 3D Maps in Maps JavaScript Unlabeled Map Demo</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
gmp-map-3d {
height: 400px;
}
</style>
</head>
<body>
<gmp-map-3d center="37.819852, -122.478549" tilt="67.5" default-labels-disabled></gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=alpha&libraries=maps3d"></script>
</body>
</html>
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 2024-10-04 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
Need to tell us more?
{"lastModified": "Last updated 2024-10-04 UTC."}
[[["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 2024-10-04 UTC."]]