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.

Simple Map

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>