Add a Google Map to a Web Page | Maps JavaScript API

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Google for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#fff"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/developers/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/css/app.css"> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png"><link rel="canonical" href="https://developers.google.com/maps/documentation/javascript/add-google-map"><link rel="search" type="application/opensearchdescription+xml" title="Google for Developers" href="https://developers.google.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developers.google.com/maps/documentation/javascript/add-google-map" /><link rel="alternate" hreflang="x-default" href="https://developers.google.com/maps/documentation/javascript/add-google-map" /><link rel="alternate" hreflang="ar" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=fr" /><link rel="alternate" hreflang="de" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=de" /><link rel="alternate" hreflang="he" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=he" /><link rel="alternate" hreflang="hi" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=hi" /><link rel="alternate" hreflang="id" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=id" /><link rel="alternate" hreflang="it" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=it" /><link rel="alternate" hreflang="ja" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=th" /><link rel="alternate" hreflang="tr" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developers.google.com/maps/documentation/javascript/add-google-map?hl=vi" /><title>Add a Google Map to a Web Page  |  Maps JavaScript API  |  Google for Developers</title> <meta property="og:title" content="Add a Google Map to a Web Page  |  Maps JavaScript API  |  Google for Developers"><meta property="og:url" content="https://developers.google.com/maps/documentation/javascript/add-google-map"><meta property="og:image" content="https://developers.google.com/static/maps/images/google-maps-platform-1200x675.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@GMapsPlatform"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Add a Google Map to a Web Page" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Google Maps Platform", "item": "https://developers.google.com/maps" },{ "@type": "ListItem", "position": 2, "name": "Web", "item": "https://developers.google.com/maps/web" },{ "@type": "ListItem", "position": 3, "name": "Maps JavaScript API", "item": "https://developers.google.com/maps/documentation/javascript" },{ "@type": "ListItem", "position": 4, "name": "Add a Google Map to a Web Page", "item": "https://developers.google.com/maps/documentation/javascript/add-google-map" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="white" type="article" layout="docs" concierge='closed' display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="https://developers.google.com/maps"> <div class="devsite-product-logo-container" size="medium" > <picture> <img class="devsite-product-logo" alt="Google Maps Platform" src="https://developers.google.com/static/maps/images/maps-icon.svg" srcset=" /static/maps/images/maps-icon.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> <a href="https://developers.google.com/maps" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google Maps Platform" > <svg class="devsite-google-wordmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 48"> <title>Google</title> <path class="devsite-google-wordmark-svg-path" d="M19.58,37.65c-9.87,0-18.17-8.04-18.17-17.91c0-9.87,8.3-17.91,18.17-17.91c5.46,0,9.35,2.14,12.27,4.94l-3.45,3.45c-2.1-1.97-4.93-3.49-8.82-3.49c-7.21,0-12.84,5.81-12.84,13.02c0,7.21,5.64,13.02,12.84,13.02c4.67,0,7.34-1.88,9.04-3.58c1.4-1.4,2.32-3.41,2.66-6.16H19.58v-4.89h16.47c0.18,0.87,0.26,1.92,0.26,3.06c0,3.67-1.01,8.21-4.24,11.44C28.93,35.9,24.91,37.65,19.58,37.65z M61.78,26.12c0,6.64-5.1,11.53-11.36,11.53s-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53S61.78,19.43,61.78,26.12z M56.8,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C53.84,33.11,56.8,30.22,56.8,26.12z M87.25,26.12c0,6.64-5.1,11.53-11.36,11.53c-6.26,0-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53C82.15,14.59,87.25,19.43,87.25,26.12zM82.28,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C79.32,33.11,82.28,30.22,82.28,26.12z M112.09,15.29v20.7c0,8.52-5.02,12.01-10.96,12.01c-5.59,0-8.95-3.76-10.22-6.81l4.41-1.83c0.79,1.88,2.71,4.1,5.81,4.1c3.8,0,6.16-2.36,6.16-6.77v-1.66h-0.18c-1.14,1.4-3.32,2.62-6.07,2.62c-5.76,0-11.05-5.02-11.05-11.49c0-6.51,5.28-11.57,11.05-11.57c2.75,0,4.93,1.22,6.07,2.58h0.18v-1.88H112.09z M107.64,26.16c0-4.06-2.71-7.03-6.16-7.03c-3.49,0-6.42,2.97-6.42,7.03c0,4.02,2.93,6.94,6.42,6.94C104.93,33.11,107.64,30.18,107.64,26.16z M120.97,3.06v33.89h-5.07V3.06H120.97z M140.89,29.92l3.93,2.62c-1.27,1.88-4.32,5.11-9.61,5.11c-6.55,0-11.28-5.07-11.28-11.53c0-6.86,4.77-11.53,10.71-11.53c5.98,0,8.91,4.76,9.87,7.34l0.52,1.31l-15.42,6.38c1.18,2.31,3.01,3.49,5.59,3.49C137.79,33.11,139.58,31.84,140.89,29.92zM128.79,25.77l10.31-4.28c-0.57-1.44-2.27-2.45-4.28-2.45C132.24,19.04,128.66,21.31,128.79,25.77z"/> </svg>Maps Platform </a> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://mapsplatform.google.com/" track-metadata-eventdetail="https://mapsplatform.google.com/" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - overview" track-metadata-module="primary nav" data-category="home" data-label="navTopMenu" track-name="overview" data-action="tabClick" > Overview </a> </tab> <tab > <a href="https://mapsplatform.google.com/maps-products/" track-metadata-eventdetail="https://mapsplatform.google.com/maps-products/" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - products" track-metadata-module="primary nav" data-category="products" data-label="navTopMenu" track-name="products" data-action="tabClick" > Products </a> </tab> <tab > <a href="https://mapsplatform.google.com/pricing/" track-metadata-eventdetail="https://mapsplatform.google.com/pricing/" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - pricing" track-metadata-module="primary nav" data-category="pricing" data-label="navTopMenu" track-name="pricing" data-action="tabClick" > Pricing </a> </tab> <tab class="devsite-dropdown devsite-dropdown-full devsite-active "> <a href="https://developers.google.com/maps/documentation" track-metadata-eventdetail="https://developers.google.com/maps/documentation" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - documentation" track-metadata-module="primary nav" aria-label="Documentation, selected" data-category="documentation" data-label="navTopMenu" track-name="documentation" data-action="tabClick" > Documentation </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Documentation" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation" track-metadata-position="nav - documentation" track-metadata-module="primary nav" data-category="documentation" data-label="navTopMenu" track-name="documentation" data-action="tabClick" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Get Started</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/get-started" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/get-started" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Get Started with Google Maps Platform </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/api-picker" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/api-picker" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> API Picker </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/billing-and-pricing/overview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/billing-and-pricing/overview" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Billing & Pricing </div> </a> </li> <li class="devsite-nav-item"> <a href="https://mapsplatform.google.com/resources/trust-center" track-type="nav" track-metadata-eventdetail="https://mapsplatform.google.com/resources/trust-center" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Security & Compliance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/reporting-and-monitoring/overview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/reporting-and-monitoring/overview" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Reporting & Monitoring </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/faq" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/faq" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> FAQ </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/support" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/support" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Support and Resources </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/support/care" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/support/care" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Customer Care </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/incident-management" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/incident-management" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Incident Management </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Maps</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/javascript" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps JavaScript API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/android-sdk" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/android-sdk" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps SDK for Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/ios-sdk" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/ios-sdk" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps SDK for iOS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/flutter-package/overview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/flutter-package/overview" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Google Maps for Flutter </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/embed" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/embed" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps Embed API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/maps-static" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/maps-static" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps Static API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/streetview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/streetview" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Street View Static API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/urls" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/urls" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps URLs </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/aerial-view" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/aerial-view" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Aerial View API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/elevation" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/elevation" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Elevation API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/tile" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/tile" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Map Tiles API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/datasets" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/datasets" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps Datasets API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/web-components" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/web-components" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Web Components (Preview) </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Routes</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/routes" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/routes" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Routes API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/navigation/android-sdk" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/navigation/android-sdk" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Navigation SDK for Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/navigation/ios-sdk" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/navigation/ios-sdk" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Navigation SDK for iOS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/cross-platform/navigation" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/cross-platform/navigation" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Navigation for Flutter </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/cross-platform/navigation" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/cross-platform/navigation" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Navigation for React Native </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/roads" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/roads" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Roads API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/directions" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/directions" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Directions API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/distance-matrix" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/distance-matrix" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Distance Matrix API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/route-optimization" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/route-optimization" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Route Optimization API </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Solutions</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/solutions" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/solutions" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Industry solutions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/mobility" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/mobility" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Mobility services </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Places</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/places/web-service" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/places/web-service" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Places API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/places/android-sdk" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/places/android-sdk" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Places SDK for Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/places/ios-sdk" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/places/ios-sdk" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Places SDK for iOS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/javascript/places" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript/places" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Places Library, Maps JavaScript API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/geocoding" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/geocoding" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Geocoding API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/geolocation" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/geolocation" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Geolocation API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/address-validation" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/address-validation" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Address Validation API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/timezone" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/timezone" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Time Zone API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/places-insights" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/places-insights" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Places Insights API (Preview) </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Environment</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/air-quality" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/air-quality" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Air Quality API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/pollen" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/pollen" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Pollen API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/solar" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/solar" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Solar API </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Additional Resources</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/api-security-best-practices" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/api-security-best-practices" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> API Security Best Practices </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/digital-signature" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/digital-signature" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Digital Signature Guide </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/coverage" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/coverage" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Map Coverage Details </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/optimization-guide" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/optimization-guide" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Optimization Guide </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/software-support" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/software-support" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Mobile OS and software support </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/launch-stages" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/launch-stages" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Launch stages </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/deprecations" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/deprecations" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Deprecations </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/asset-tracking-plan" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/asset-tracking-plan" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Asset Tracking Plan </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/url-encoding" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/url-encoding" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> URL Encoding </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/third-party-platforms/wordpress" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/third-party-platforms/wordpress" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> WordPress Users </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://mapsplatform.google.com/resources/blog" track-metadata-eventdetail="https://mapsplatform.google.com/resources/blog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="blog" data-label="navTopMenu" track-name="blog" data-action="tabClick" > Blog </a> </tab> <tab class="devsite-dropdown "> <a href="https://developers.google.com/maps/developer-community" track-metadata-eventdetail="https://developers.google.com/maps/developer-community" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - community" track-metadata-module="primary nav" data-category="community" data-label="navTopMenu" track-name="community" data-action="tabClick" > Community </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Community" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/developer-community" track-metadata-position="nav - community" track-metadata-module="primary nav" data-category="community" data-label="navTopMenu" track-name="community" data-action="tabClick" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://stackoverflow.com/questions/tagged/google-maps" track-type="nav" track-metadata-eventdetail="https://stackoverflow.com/questions/tagged/google-maps" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> StackOverflow </div> </a> </li> <li class="devsite-nav-item"> <a href="https://github.com/googlemaps/" track-type="nav" track-metadata-eventdetail="https://github.com/googlemaps/" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> GitHub </div> </a> </li> <li class="devsite-nav-item"> <a href="https://www.youtube.com/c/GoogleMapsPlatform" track-type="nav" track-metadata-eventdetail="https://www.youtube.com/c/GoogleMapsPlatform" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> YouTube </div> </a> </li> <li class="devsite-nav-item"> <a href="https://discord.gg/f4hvx8Rp2q" track-type="nav" track-metadata-eventdetail="https://discord.gg/f4hvx8Rp2q" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Discord </div> </a> </li> <li class="devsite-nav-item"> <a href="https://twitter.com/GMapsPlatform" track-type="nav" track-metadata-eventdetail="https://twitter.com/GMapsPlatform" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> X (Twitter) </div> </a> </li> <li class="devsite-nav-item"> <a href="https://issuetracker.google.com/bookmark-groups/76561" track-type="nav" track-metadata-eventdetail="https://issuetracker.google.com/bookmark-groups/76561" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Issue Tracker </div> </a> </li> <li class="devsite-nav-item"> <a href="https://devlibrary.withgoogle.com/products/maps" track-type="nav" track-metadata-eventdetail="https://devlibrary.withgoogle.com/products/maps" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Google Dev Library </div> </a> </li> </ul> </div> </div> </div> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Maps JavaScript API" tenant-name="Google for Developers" project-scope="/maps/documentation/javascript" url-scoped="https://developers.google.com/s/results/maps/documentation/javascript" > <form class="devsite-search-form" action="https://developers.google.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles fp-auth id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" aria-label="Lower header breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/maps/web" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google Maps APIs for Web" > Web </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/maps/documentation/javascript" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Maps JavaScript API" > Maps JavaScript API </a> </li> </ul> </div> <div class="devsite-product-button-row"> <a href="https://console.cloud.google.com/google/maps-apis/start?utm_source=Docs_GS_Button&ref=https://developers.google.com/maps/&utm_content=Docs_maps-backend" class="button button-primary gc-analytics-event " data-modal-dialog-id="enable-billing-modal-dialog" data-label="nav" data-action="buttonClick" data-category="GMPgetStarted" >Get Started</a> <a href="https://cloud.google.com/contact-maps/" class="button gc-analytics-event " data-label="nav" data-action="buttonClick" data-category="GMPcontactSales" >Contact sales</a> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab class="devsite-active"> <a href="https://developers.google.com/maps/documentation/javascript" track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - guides" track-metadata-module="primary nav" aria-label="Guides, selected" data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides" > Guides </a> </tab> <tab > <a href="https://developers.google.com/maps/documentation/javascript/reference" track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript/reference" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - reference" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" > Reference </a> </tab> <tab > <a href="https://developers.google.com/maps/documentation/javascript/examples" track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript/examples" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - samples" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" > Samples </a> </tab> <tab > <a href="https://developers.google.com/maps/documentation/javascript/support" track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript/support" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - support" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Support" track-name="support" > Support </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="https://developers.google.com/maps"> <div class="devsite-product-logo-container" size="medium" > <picture> <img class="devsite-product-logo" alt="Google Maps Platform" src="https://developers.google.com/static/maps/images/maps-icon.svg" srcset=" /static/maps/images/maps-icon.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> <a href="https://developers.google.com/maps" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google Maps Platform" > <svg class="devsite-google-wordmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 48"> <title>Google</title> <path class="devsite-google-wordmark-svg-path" d="M19.58,37.65c-9.87,0-18.17-8.04-18.17-17.91c0-9.87,8.3-17.91,18.17-17.91c5.46,0,9.35,2.14,12.27,4.94l-3.45,3.45c-2.1-1.97-4.93-3.49-8.82-3.49c-7.21,0-12.84,5.81-12.84,13.02c0,7.21,5.64,13.02,12.84,13.02c4.67,0,7.34-1.88,9.04-3.58c1.4-1.4,2.32-3.41,2.66-6.16H19.58v-4.89h16.47c0.18,0.87,0.26,1.92,0.26,3.06c0,3.67-1.01,8.21-4.24,11.44C28.93,35.9,24.91,37.65,19.58,37.65z M61.78,26.12c0,6.64-5.1,11.53-11.36,11.53s-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53S61.78,19.43,61.78,26.12z M56.8,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C53.84,33.11,56.8,30.22,56.8,26.12z M87.25,26.12c0,6.64-5.1,11.53-11.36,11.53c-6.26,0-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53C82.15,14.59,87.25,19.43,87.25,26.12zM82.28,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C79.32,33.11,82.28,30.22,82.28,26.12z M112.09,15.29v20.7c0,8.52-5.02,12.01-10.96,12.01c-5.59,0-8.95-3.76-10.22-6.81l4.41-1.83c0.79,1.88,2.71,4.1,5.81,4.1c3.8,0,6.16-2.36,6.16-6.77v-1.66h-0.18c-1.14,1.4-3.32,2.62-6.07,2.62c-5.76,0-11.05-5.02-11.05-11.49c0-6.51,5.28-11.57,11.05-11.57c2.75,0,4.93,1.22,6.07,2.58h0.18v-1.88H112.09z M107.64,26.16c0-4.06-2.71-7.03-6.16-7.03c-3.49,0-6.42,2.97-6.42,7.03c0,4.02,2.93,6.94,6.42,6.94C104.93,33.11,107.64,30.18,107.64,26.16z M120.97,3.06v33.89h-5.07V3.06H120.97z M140.89,29.92l3.93,2.62c-1.27,1.88-4.32,5.11-9.61,5.11c-6.55,0-11.28-5.07-11.28-11.53c0-6.86,4.77-11.53,10.71-11.53c5.98,0,8.91,4.76,9.87,7.34l0.52,1.31l-15.42,6.38c1.18,2.31,3.01,3.49,5.59,3.49C137.79,33.11,139.58,31.84,140.89,29.92zM128.79,25.77l10.31-4.28c-0.57-1.44-2.27-2.45-4.28-2.45C132.24,19.04,128.66,21.31,128.79,25.77z"/> </svg>Maps Platform </a> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="https://mapsplatform.google.com/" class="devsite-nav-title gc-analytics-event " data-category="home" data-label="navTopMenu" track-name="overview" data-action="tabClick" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="https://mapsplatform.google.com/maps-products/" class="devsite-nav-title gc-analytics-event " data-category="products" data-label="navTopMenu" track-name="products" data-action="tabClick" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Products" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Products </span> </a> </li> <li class="devsite-nav-item"> <a href="https://mapsplatform.google.com/pricing/" class="devsite-nav-title gc-analytics-event " data-category="pricing" data-label="navTopMenu" track-name="pricing" data-action="tabClick" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Pricing" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Pricing </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="documentation" data-label="navTopMenu" track-name="documentation" data-action="tabClick" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Documentation" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Documentation </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="documentation" data-label="navTopMenu" track-name="documentation" data-action="tabClick" > <span class="devsite-nav-text" tooltip menu="Documentation"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Documentation"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/maps/documentation/javascript" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Guides" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Guides </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/javascript/reference" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reference" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Reference </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/javascript/examples" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Samples </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/javascript/support" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Support" track-name="support" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Support" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Support </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="https://mapsplatform.google.com/resources/blog" class="devsite-nav-title gc-analytics-event " data-category="blog" data-label="navTopMenu" track-name="blog" data-action="tabClick" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/developer-community" class="devsite-nav-title gc-analytics-event " data-category="community" data-label="navTopMenu" track-name="community" data-action="tabClick" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Community" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Community </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="community" data-label="navTopMenu" track-name="community" data-action="tabClick" > <span class="devsite-nav-text" tooltip menu="Community"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Community"> </span> </span> </li> </ul> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item"><a href="/maps/documentation/javascript" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript" ><span class="devsite-nav-text" tooltip>Maps JavaScript API</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-setup" ><span class="devsite-nav-text" tooltip>Set up your Google Cloud project</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/get-api-key" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/get-api-key" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/get-api-key" ><span class="devsite-nav-text" tooltip>Use API Keys</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/load-maps-js-api" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/load-maps-js-api" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/load-maps-js-api" ><span class="devsite-nav-text" tooltip>Load the Maps JavaScript API</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/troubleshooting" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/troubleshooting" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/troubleshooting" ><span class="devsite-nav-text" tooltip>Troubleshooting</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Tutorials</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/add-google-map-wc-tut" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/add-google-map-wc-tut" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/add-google-map-wc-tut" ><span class="devsite-nav-text" tooltip>Add a Google Map with a marker using HTML</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/adding-a-google-map" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/adding-a-google-map" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/adding-a-google-map" ><span class="devsite-nav-text" tooltip>Add a Google Map with a marker using JavaScript</span></a></li> <li class="devsite-nav-item"><a href="/codelabs/maps-platform/maps-platform-101-react-js" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /codelabs/maps-platform/maps-platform-101-react-js" track-type="bookNav" track-name="click" track-metadata-eventdetail="/codelabs/maps-platform/maps-platform-101-react-js" ><span class="devsite-nav-text" tooltip>Add a Google Map to a React app</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/tutorials" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/tutorials" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/tutorials" ><span class="devsite-nav-text" tooltip>More tutorials</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Concepts</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/versions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/versions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/versions" ><span class="devsite-nav-text" tooltip>Versioning</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/localization" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/localization" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/localization" ><span class="devsite-nav-text" tooltip>Localization</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/best-practices" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/best-practices" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/best-practices" ><span class="devsite-nav-text" tooltip>Best practices</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/using-typescript" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/using-typescript" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/using-typescript" ><span class="devsite-nav-text" tooltip>TypeScript</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/promises" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/promises" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/promises" ><span class="devsite-nav-text" tooltip>Promises</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Base map</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/add-google-map" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/add-google-map" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/add-google-map" ><span class="devsite-nav-text" tooltip>Add a Google Map to a web page</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/events" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/events" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/events" ><span class="devsite-nav-text" tooltip>Map events</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/controls" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/controls" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/controls" ><span class="devsite-nav-text" tooltip>Map controls</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/interaction" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/interaction" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/interaction" ><span class="devsite-nav-text" tooltip>Control zoom and pan</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/map-rendering-type" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/map-rendering-type" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/map-rendering-type" ><span class="devsite-nav-text" tooltip>Rendering type (raster and vector)</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/maptypes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/maptypes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/maptypes" ><span class="devsite-nav-text" tooltip>Map types</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/mapcolorscheme" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/mapcolorscheme" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/mapcolorscheme" ><span class="devsite-nav-text" tooltip>Map color scheme</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/coordinates" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/coordinates" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/coordinates" ><span class="devsite-nav-text" tooltip>Map and tile coordinates</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Customize with cloud-based maps styling</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Get Started</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/setup-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/setup-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/setup-leg" ><span class="devsite-nav-text" tooltip>Get started and set up</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/tut-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/tut-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/tut-leg" ><span class="devsite-nav-text" tooltip>Tutorial - Highlight a road network</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/update-legacy" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/update-legacy" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/update-legacy" ><span class="devsite-nav-text" tooltip>Update a map style to the latest version</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/update-old2-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/update-old2-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/update-old2-leg" ><span class="devsite-nav-text" tooltip>Map feature changes</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Create and use map styles</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/map-styles-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/map-styles-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/map-styles-leg" ><span class="devsite-nav-text" tooltip>Create and use map styles</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/test-style-updates" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/test-style-updates" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/test-style-updates" ><span class="devsite-nav-text" tooltip>Test map style updates</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/zoom-levels-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/zoom-levels-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/zoom-levels-leg" ><span class="devsite-nav-text" tooltip>Style zoom levels</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/versions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/versions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/versions" ><span class="devsite-nav-text" tooltip>Work with map style versions</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/taxonomy" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/taxonomy" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/taxonomy" ><span class="devsite-nav-text" tooltip>What you can style on a map</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/map-hier-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/map-hier-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/map-hier-leg" ><span class="devsite-nav-text" tooltip>Understand map style inheritance and hierarchy</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/overlap-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/overlap-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/overlap-leg" ><span class="devsite-nav-text" tooltip>Manage styles that overlap</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Modify map settings</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/poi-behavior-customization-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/poi-behavior-customization-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/poi-behavior-customization-leg" ><span class="devsite-nav-text" tooltip>Control the density of Points of interest</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/viz-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/viz-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/viz-leg" ><span class="devsite-nav-text" tooltip>Filter which map features to display</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/building-style-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/building-style-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/building-style-leg" ><span class="devsite-nav-text" tooltip>Change the style of buildings</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/landmarks-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/landmarks-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/landmarks-leg" ><span class="devsite-nav-text" tooltip>Change the style of landmarks</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/app-background-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/app-background-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/app-background-leg" ><span class="devsite-nav-text" tooltip>Change the app background color</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Style examples and guidelines</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/style-examples-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/style-examples-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/style-examples-leg" ><span class="devsite-nav-text" tooltip>Styling examples</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/design-resources-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/design-resources-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/design-resources-leg" ><span class="devsite-nav-text" tooltip>Design checklist</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/troubleshoot" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/troubleshoot" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/troubleshoot" ><span class="devsite-nav-text" tooltip>Troubleshoot</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Legacy cloud-based maps styling</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/legacy-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/legacy-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/legacy-overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Get Started</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/legacy-setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/legacy-setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/legacy-setup" ><span class="devsite-nav-text" tooltip>Set up and billing</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/use-style-editor" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/use-style-editor" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/use-style-editor" ><span class="devsite-nav-text" tooltip>Legacy Map Style Editor walkthrough</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Use legacy cloud styling</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/map-styles" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/map-styles" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/map-styles" ><span class="devsite-nav-text" tooltip>Manage legacy map styles</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/zoom-levels" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/zoom-levels" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/zoom-levels" ><span class="devsite-nav-text" tooltip>Work with legacy zoom levels</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/poi-behavior-customization" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/poi-behavior-customization" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/poi-behavior-customization" ><span class="devsite-nav-text" tooltip>Customize legacy POI behavior</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/building-style" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/building-style" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/building-style" ><span class="devsite-nav-text" tooltip>Customize legacy building style</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/legacy-examples" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/legacy-examples" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/legacy-examples" ><span class="devsite-nav-text" tooltip>Legacy examples</span></a></li></ul></div></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Customize with JSON styling</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/json-styling-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/json-styling-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/json-styling-overview" ><span class="devsite-nav-text" tooltip>JSON styling overview</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/style-reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/style-reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/style-reference" ><span class="devsite-nav-text" tooltip>JSON style reference</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Markers</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/start" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/start" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/start" ><span class="devsite-nav-text" tooltip>Get started</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/add-marker" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/add-marker" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/add-marker" ><span class="devsite-nav-text" tooltip>Add a marker to a map</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/basic-customization" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/basic-customization" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/basic-customization" ><span class="devsite-nav-text" tooltip>Basic marker customization</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/graphic-markers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/graphic-markers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/graphic-markers" ><span class="devsite-nav-text" tooltip>Create markers with graphics</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/html-markers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/html-markers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/html-markers" ><span class="devsite-nav-text" tooltip>Create markers with HTML and CSS</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/collision-behavior" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/collision-behavior" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/collision-behavior" ><span class="devsite-nav-text" tooltip>Control collision behavior, altitude, and visibility</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/accessible-markers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/accessible-markers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/accessible-markers" ><span class="devsite-nav-text" tooltip>Make markers clickable and accessible</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/draggable-markers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/draggable-markers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/draggable-markers" ><span class="devsite-nav-text" tooltip>Make markers draggable</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/migration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/migration" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/migration" ><span class="devsite-nav-text" tooltip>Migrate to advanced markers</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/markers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/markers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/markers" ><span class="devsite-nav-text" tooltip>Markers (Legacy)</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Work with Places</span> </div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Places (New)</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-get-started" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-get-started" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-get-started" ><span class="devsite-nav-text" tooltip>Get Started</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-search" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-search" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-search" ><span class="devsite-nav-text" tooltip>Text Search (New)</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/nearby-search" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/nearby-search" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/nearby-search" ><span class="devsite-nav-text" tooltip>Nearby Search (New)</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-details" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-details" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-details" ><span class="devsite-nav-text" tooltip>Place Details</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-photos" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-photos" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-photos" ><span class="devsite-nav-text" tooltip>Place Photos</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-reviews" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-reviews" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-reviews" ><span class="devsite-nav-text" tooltip>Place Reviews</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Place Autocomplete</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-autocomplete-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-autocomplete-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-autocomplete-overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item devsite-nav-preview"><a href="/maps/documentation/javascript/place-autocomplete-new" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-autocomplete-new" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-autocomplete-new" ><span class="devsite-nav-text" tooltip>Place Autocomplete Widget (Preview)</span><span class="devsite-nav-icon material-icons" data-icon="preview" data-title="Preview" aria-hidden="true"></span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-autocomplete-data" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-autocomplete-data" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-autocomplete-data" ><span class="devsite-nav-text" tooltip>Place Autocomplete Data API</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/session-pricing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/session-pricing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/session-pricing" ><span class="devsite-nav-text" tooltip>Autocomplete and session pricing</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-class-data-fields" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-class-data-fields" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-class-data-fields" ><span class="devsite-nav-text" tooltip>Place Data Fields</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-types" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-types" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-types" ><span class="devsite-nav-text" tooltip>Place Types</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Migrate to Places (New)</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-overview" ><span class="devsite-nav-text" tooltip>Migration Overview</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-details" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-details" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-details" ><span class="devsite-nav-text" tooltip>Migrate to the new Place Details</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-search" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-search" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-search" ><span class="devsite-nav-text" tooltip>Migrate to the new Place Search</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-nearby" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-nearby" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-nearby" ><span class="devsite-nav-text" tooltip>Migrate to the new Nearby Search</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-photos" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-photos" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-photos" ><span class="devsite-nav-text" tooltip>Migrate to the new Place Photos</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-reviews" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-reviews" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-reviews" ><span class="devsite-nav-text" tooltip>Migrate to the new Place Reviews</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-autocomplete" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-autocomplete" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-autocomplete" ><span class="devsite-nav-text" tooltip>Migrate to the new Place Autocomplete</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Places Service (Legacy)</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places" ><span class="devsite-nav-text" tooltip>Place Search and Details</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-autocomplete" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-autocomplete" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-autocomplete" ><span class="devsite-nav-text" tooltip>Place Autocomplete</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-data-fields" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-data-fields" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-data-fields" ><span class="devsite-nav-text" tooltip>Place Data Fields</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/supported_types" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/supported_types" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/supported_types" ><span class="devsite-nav-text" tooltip>Place Types</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Places Guides</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-icons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-icons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-icons" ><span class="devsite-nav-text" tooltip>Place Icons</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-id" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-id" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-id" ><span class="devsite-nav-text" tooltip>Place IDs</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Draw on the map</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/overlays" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/overlays" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/overlays" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/infowindows" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/infowindows" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/infowindows" ><span class="devsite-nav-text" tooltip>Info windows</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/shapes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/shapes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/shapes" ><span class="devsite-nav-text" tooltip>Shapes and lines</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/symbols" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/symbols" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/symbols" ><span class="devsite-nav-text" tooltip>Symbols</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>WebGL Features</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/webgl" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/webgl" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/webgl" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/vector-map" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/vector-map" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/vector-map" ><span class="devsite-nav-text" tooltip>Vector Map Features</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/webgl/webgl-overlay-view" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/webgl/webgl-overlay-view" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/webgl/webgl-overlay-view" ><span class="devsite-nav-text" tooltip>WebGL Overlay View</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/webgl/support" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/webgl/support" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/webgl/support" ><span class="devsite-nav-text" tooltip>Support</span></a></li></ul></div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/deckgl-overlay-view" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/deckgl-overlay-view" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/deckgl-overlay-view" ><span class="devsite-nav-text" tooltip>Deck.gl data visualizations</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/groundoverlays" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/groundoverlays" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/groundoverlays" ><span class="devsite-nav-text" tooltip>Ground overlays</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/customoverlays" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/customoverlays" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/customoverlays" ><span class="devsite-nav-text" tooltip>Custom overlays</span></a></li> <li class="devsite-nav-item devsite-nav-heading devsite-nav-experimental"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Work with 3D maps (Experimental)</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span> </div></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-overview" ><span class="devsite-nav-text" tooltip>Overview</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-getting-started" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-getting-started" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-getting-started" ><span class="devsite-nav-text" tooltip>Get started</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-markers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-markers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-markers" ><span class="devsite-nav-text" tooltip>Markers</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-models" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-models" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-models" ><span class="devsite-nav-text" tooltip>3D models</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-draw" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-draw" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-draw" ><span class="devsite-nav-text" tooltip>Draw on the map</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-interact" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-interact" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-interact" ><span class="devsite-nav-text" tooltip>Interact with the map</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-support" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-support" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-support" ><span class="devsite-nav-text" tooltip>Support</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Display data</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/layers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/layers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/layers" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Data-driven styling for datasets</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/start" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/start" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/start" ><span class="devsite-nav-text" tooltip>Get started</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/create-dataset" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/create-dataset" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/create-dataset" ><span class="devsite-nav-text" tooltip>Create and manage a dataset</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/add-dataset-to-map" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/add-dataset-to-map" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/add-dataset-to-map" ><span class="devsite-nav-text" tooltip>Add a dataset to a map</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/style-data-features" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/style-data-features" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/style-data-features" ><span class="devsite-nav-text" tooltip>Style data features</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/make-data-features-clickable" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/make-data-features-clickable" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/make-data-features-clickable" ><span class="devsite-nav-text" tooltip>Handle mouse events</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/dataset-policies" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/dataset-policies" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/dataset-policies" ><span class="devsite-nav-text" tooltip>Policies for data-driven stylng for datasets</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Data-driven styling for boundaries</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/start" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/start" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/start" ><span class="devsite-nav-text" tooltip>Get started</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/style-polygon" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/style-polygon" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/style-polygon" ><span class="devsite-nav-text" tooltip>Style a boundary polygon</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/choropleth-map" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/choropleth-map" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/choropleth-map" ><span class="devsite-nav-text" tooltip>Make a choropleth map</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/handle-events" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/handle-events" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/handle-events" ><span class="devsite-nav-text" tooltip>Handle mouse events</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/dds-use-maps-places-apis" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/dds-use-maps-places-apis" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/dds-use-maps-places-apis" ><span class="devsite-nav-text" tooltip>Use Places APIs and Geocoding with data-driven styling</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/coverage" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/coverage" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/coverage" ><span class="devsite-nav-text" tooltip>Google boundaries coverage</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>KML</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/kmllayer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/kmllayer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/kmllayer" ><span class="devsite-nav-text" tooltip>KML and GeoRSS</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/kml" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/kml" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/kml" ><span class="devsite-nav-text" tooltip>Display KML data</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>JSON</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/importing_data" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/importing_data" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/importing_data" ><span class="devsite-nav-text" tooltip>Import GeoJSON data into maps</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/earthquakes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/earthquakes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/earthquakes" ><span class="devsite-nav-text" tooltip>Data Visualization</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/combining-data" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/combining-data" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/combining-data" ><span class="devsite-nav-text" tooltip>Combine and Visualize Multiple Data Sources</span></a></li></ul></div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/datalayer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/datalayer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/datalayer" ><span class="devsite-nav-text" tooltip>Data layer</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/heatmaplayer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/heatmaplayer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/heatmaplayer" ><span class="devsite-nav-text" tooltip>Heatmap</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/trafficlayer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/trafficlayer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/trafficlayer" ><span class="devsite-nav-text" tooltip>Traffic, Transit, and Bicycling Layers</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Services</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/directions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/directions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/directions" ><span class="devsite-nav-text" tooltip>Directions</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/distancematrix" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/distancematrix" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/distancematrix" ><span class="devsite-nav-text" tooltip>Distance Matrix</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/elevation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/elevation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/elevation" ><span class="devsite-nav-text" tooltip>Elevation</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/geocoding" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/geocoding" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/geocoding" ><span class="devsite-nav-text" tooltip>Geocoding</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/maxzoom" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/maxzoom" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/maxzoom" ><span class="devsite-nav-text" tooltip>Maximum Zoom Imagery</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/streetview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/streetview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/streetview" ><span class="devsite-nav-text" tooltip>Street View</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Additional Libraries</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/libraries" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/libraries" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/libraries" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/drawinglayer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/drawinglayer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/drawinglayer" ><span class="devsite-nav-text" tooltip>Drawing Library</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/geometry" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/geometry" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/geometry" ><span class="devsite-nav-text" tooltip>Geometry Library</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/visualization" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/visualization" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/visualization" ><span class="devsite-nav-text" tooltip>Visualization Library</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/libraries-open-source" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/libraries-open-source" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/libraries-open-source" ><span class="devsite-nav-text" tooltip>Open Source Libraries</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Policies and Terms</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/policies" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/policies" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/policies" ><span class="devsite-nav-text" tooltip>Policies and attributions</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/usage-and-billing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/usage-and-billing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/usage-and-billing" ><span class="devsite-nav-text" tooltip>Usage and billing</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/report-monitor" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/report-monitor" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/report-monitor" ><span class="devsite-nav-text" tooltip>Reporting and monitoring</span></a></li> <li class="devsite-nav-item"><a href="https://cloud.google.com/maps-platform/terms/" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: https://cloud.google.com/maps-platform/terms/" track-type="bookNav" track-name="click" track-metadata-eventdetail="https://cloud.google.com/maps-platform/terms/" ><span class="devsite-nav-text" tooltip>Terms of service</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/content-security-policy" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/content-security-policy" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/content-security-policy" ><span class="devsite-nav-text" tooltip>Content Security Policy Guide</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>More Guides</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/google-loader-migration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/google-loader-migration" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/google-loader-migration" ><span class="devsite-nav-text" tooltip>Google Loader Migration Guide</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/place_field_js_migration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place_field_js_migration" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place_field_js_migration" ><span class="devsite-nav-text" tooltip>Place Field Migration (open_now, utc_offset)</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/v2tov3" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/v2tov3" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/v2tov3" ><span class="devsite-nav-text" tooltip>Upgrading from v2 to v3</span></a></li> </ul> <ul class="devsite-nav-list" menu="Documentation" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Get Started </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/get-started" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get Started with Google Maps Platform" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get Started with Google Maps Platform </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/api-picker" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: API Picker" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > API Picker </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/billing-and-pricing/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Billing & Pricing" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Billing & Pricing </span> </a> </li> <li class="devsite-nav-item"> <a href="https://mapsplatform.google.com/resources/trust-center" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Security & Compliance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Security & Compliance </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/reporting-and-monitoring/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reporting & Monitoring" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Reporting & Monitoring </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/faq" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: FAQ" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > FAQ </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/support" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Support and Resources" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Support and Resources </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/support/care" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Customer Care" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Customer Care </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/incident-management" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Incident Management" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Incident Management </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Maps </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps JavaScript API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps JavaScript API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/android-sdk" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps SDK for Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps SDK for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/ios-sdk" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps SDK for iOS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps SDK for iOS </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/flutter-package/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Maps for Flutter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Maps for Flutter </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/embed" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps Embed API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps Embed API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/maps-static" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps Static API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps Static API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/streetview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Street View Static API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Street View Static API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/urls" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps URLs" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps URLs </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/aerial-view" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Aerial View API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Aerial View API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/elevation" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Elevation API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Elevation API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/tile" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Map Tiles API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Map Tiles API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/datasets" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps Datasets API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps Datasets API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/web-components" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Components (Preview)" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Components (Preview) </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Routes </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/routes" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Routes API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Routes API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/navigation/android-sdk" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Navigation SDK for Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Navigation SDK for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/navigation/ios-sdk" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Navigation SDK for iOS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Navigation SDK for iOS </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/cross-platform/navigation" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Navigation for Flutter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Navigation for Flutter </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/cross-platform/navigation" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Navigation for React Native" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Navigation for React Native </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/roads" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Roads API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Roads API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/directions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Directions API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Directions API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/distance-matrix" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Distance Matrix API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Distance Matrix API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/route-optimization" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Route Optimization API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Route Optimization API </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Solutions </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/solutions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Industry solutions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Industry solutions </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/mobility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Mobility services" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Mobility services </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Places </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/places/web-service" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Places API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Places API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/places/android-sdk" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Places SDK for Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Places SDK for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/places/ios-sdk" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Places SDK for iOS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Places SDK for iOS </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/javascript/places" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Places Library, Maps JavaScript API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Places Library, Maps JavaScript API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/geocoding" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Geocoding API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Geocoding API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/geolocation" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Geolocation API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Geolocation API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/address-validation" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Address Validation API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Address Validation API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/timezone" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Time Zone API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Time Zone API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/places-insights" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Places Insights API (Preview)" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Places Insights API (Preview) </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Environment </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/air-quality" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Air Quality API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Air Quality API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/pollen" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Pollen API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Pollen API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/solar" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Solar API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Solar API </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Additional Resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/api-security-best-practices" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: API Security Best Practices" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > API Security Best Practices </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/digital-signature" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Digital Signature Guide" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Digital Signature Guide </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/coverage" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Map Coverage Details" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Map Coverage Details </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/optimization-guide" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Optimization Guide" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Optimization Guide </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/software-support" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Mobile OS and software support" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Mobile OS and software support </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/launch-stages" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Launch stages" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Launch stages </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/deprecations" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Deprecations" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Deprecations </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/asset-tracking-plan" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Asset Tracking Plan" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Asset Tracking Plan </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/url-encoding" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: URL Encoding" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > URL Encoding </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/third-party-platforms/wordpress" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: WordPress Users" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > WordPress Users </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Community" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="https://stackoverflow.com/questions/tagged/google-maps" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: StackOverflow" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > StackOverflow </span> </a> </li> <li class="devsite-nav-item"> <a href="https://github.com/googlemaps/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: GitHub" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > GitHub </span> </a> </li> <li class="devsite-nav-item"> <a href="https://www.youtube.com/c/GoogleMapsPlatform" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: YouTube" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > YouTube </span> </a> </li> <li class="devsite-nav-item"> <a href="https://discord.gg/f4hvx8Rp2q" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Discord" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Discord </span> </a> </li> <li class="devsite-nav-item"> <a href="https://twitter.com/GMapsPlatform" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: X (Twitter)" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > X (Twitter) </span> </a> </li> <li class="devsite-nav-item"> <a href="https://issuetracker.google.com/bookmark-groups/76561" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Issue Tracker" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Issue Tracker </span> </a> </li> <li class="devsite-nav-item"> <a href="https://devlibrary.withgoogle.com/products/maps" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Dev Library" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Dev Library </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav > <devsite-content> <article class="devsite-article"><style> /* Styles inlined from /maps/documentation/local_extensions.css */ .version { text-align: right; } .code { color: #006000; font-family: "Courier", monospace; font-size: 100%; } .grid td { padding: 4px; border-collapse: collapse; border: 1px solid gray; } .header td { font-weight: bold; background: #EEEEEE; } .encodeBox { width: 550px; height: 40px; font-size: 14px; font-family: Courier; } .inputField { width: 160px; } #pointList { width: 300px; font-size: 12px; } #txtAddress { width: 14em; } .welcome { border: none; } .welcome td{ border: none; padding:0 10px 0 10px; } .number { background-color: #E5ECF9; text-align:center; vertical-align:middle; padding: 0 5px; } .leftpadding { padding: 0 0 0 10px; } .identifier { color: black; } /* List the contents inline to save vertical space */ .summarylist { margin-right: 4em; } .summarylist li { display: inline; margin: 0em; margin-right: 0.2em; line-height: 1.5em; } /* Self-links for Maps API for Flash */ a.self-link:link { color: #0000cc; text-decoration: none; } a.self-link:active { color: #0000cc; text-decoration: none; } a.self-link:visited { color: #0000cc; text-decoration: none; } /* Self-links for Maps API */ .self-link { cursor: pointer; } .blackbg { background: #333; } </style><style> /* Styles inlined from /maps/styles/common.css */ /* Enable Billing Modal Dialog Styles */ .devsite-enable-billing-dialog { left: 50%; margin-left: -274px; top: 25%; width: 548px; } .devsite-dialog-close { color: #747474; } #devsite-dialog-onload-billing-enabled { padding: 0; } #devsite-dialog-onload-billing-enabled .get-key-check { background: no-repeat #8cc152 center/72px url(/maps/images/lhimages/v2/check@2x.png); height: 150px; width: 100%; } #devsite-dialog-onload-billing-enabled .devsite-dialog-contents, #devsite-dialog-onload-billing-enabled .devsite-dialog-buttons { margin: 8px; } .devsite-enable-billing-dialog ol { list-style: none; margin: 40px 0; padding: 0; } .devsite-enable-billing-dialog li { counter-increment: step-counter; font-size: 14px; line-height: 16px; margin-bottom: 28px; } .devsite-enable-billing-dialog li::before { border-radius: 50%; border: 2px solid #ececec; color: #00bcd4; content: counter(step-counter); font-size: 14px; font-weight: 500; margin-right: 22px; padding: 6px 10px; } /* Style Wizard introduction */ .styleWizardIntroMain { border-radius: 3px; height: 500; width: 640; } .styleWizardIntroSixMapSamples { left: calc(50% - (500px / 2)); line-height: 1; position: relative; text-align: center; width: 500px; } .styleWizardIntroSample { border: 1px solid rgba(0,0,0,0.07); border-radius: 3px; box-shadow: 0 1px 12px 0 rgba(0,0,0,0.10); display: inline-block; height: 140px; margin: 10px; overflow: hidden; width: 140px; } .styleWizardIntroCaption { text-align: center; } /* TODO(cl/330601385) waiting on fix to be deployed */ .devsite-jsfiddle-hide { position:absolute; top: -99999px; left: -99999px; display:block; } /* Styles for /maps/solutions best practices content */ #bp-background { border-radius: 25px; background: #e8eaed; } #bp-heading span { float:left; margin-right:10px; position:relative; padding: 10px; } /* Use as <ul id="bp-bullet><li>{{ [bp|add]_bullet }}Text here... to have icons serve as the bullet symbol. */ #bp-bullet { list-style-type: none; text-indent: -20px; margin-left: 50px; } #platform-box { float: right; position: relative; width: 35%; padding: 20px 20px 0 20px; margin-left: 30px; margin-bottom: 30px; background-color: #ceead6; border-color: #e8eaed; border-style: solid; } #sb-box { float: right; position: relative; width: 25%; padding: 20px 20px 0 20px; margin-left: 30px; margin-bottom: 30px; background-color: #d2e3fc; border-color: #e8eaed; border-style: solid; } /** Table formatting used in the How to use, How to access, and Inputs and * outputs sections of the API overviews. You can leave the first column blank, * as shown in the How to access sections. For questions, contact @wildwood **/ .implementation-path tr td:first-of-type { background: var(--tenant-background-1) !important; max-width: 48px; vertical-align: top; } .implementation-path tr td:nth-of-type(2) { background: var(--tenant-background-1) !important; color: var(--tenant-primary-text-color); min-width: 200px; text-align: left; vertical-align: top; } .implementation-path tr td { color: var(--tenant-secondary-text-color); padding: 24px; } .implementation-path tr { border-top: var(--tenant-primary-border); vertical-align: top; } /** From docs-intro.css - This forms the bubbles with numbers in the above table. **/ .implementation-path .numbered { background: var(--tenant-numbered-row-background-color, #BDBDBD); border-radius: 50%; color: var(--tenant-inverted-text-color); display: inline-block; font-size: 20px; height: 36px; line-height: 36px; margin-right: 20px; text-align: center; vertical-align: top; width: 36px; position: relative; top:-8px; } </style> <div class="devsite-banner devsite-banner-announcement nocontent" > <div class="devsite-banner-message"> <div class="devsite-banner-message-text"> <b>Announcement:</b> 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 <a href="/maps/new-map-style-opt-in">New map style for Google Maps Platform</a>. </div> </div> </div> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/products" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="" > Products </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/maps" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Google Maps Platform" > Google Maps Platform </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/maps/documentation" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="" > Documentation </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/maps/web" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="5" track-type="globalNav" track-name="breadcrumb" track-metadata-position="5" track-metadata-eventdetail="Google Maps APIs for Web" > Web </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/maps/documentation/javascript" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="6" track-type="globalNav" track-name="breadcrumb" track-metadata-position="6" track-metadata-eventdetail="Maps JavaScript API" > Maps JavaScript API </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <devsite-feedback position="header" project-name="Maps JavaScript API" product-id="81777" bucket="" context="Maps JS API v3" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="header" class="nocontent" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png" project-support-url="https://developers.google.com/maps/documentation/javascript/support" > <button> Send feedback </button> </devsite-feedback> <h1 class="devsite-page-title" tabindex="-1"> Add a Google Map to a Web Page </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix ">   <style> .center { text-align: center } </style> <p> <devsite-iframe style="height: 400px"> <iframe src="https://geo-devrel-javascript-samples.web.app/samples/map-simple/app/dist/" allow="fullscreen; "></iframe> </devsite-iframe> </p> <p>You can add a Google map to a web page using HTML, CSS, and JavaScript code. This page shows how to add a map to a web page in two ways: by using the <code translate="no" dir="ltr">gmp-map</code> custom HTML element, and by using a <code translate="no" dir="ltr">div</code> element.</p> <ul> <li><a href="#gmp-map-element">Add a map using a <code translate="no" dir="ltr">gmp-map</code> element</a></li> <li><a href="#div-element">Add a map using a <code translate="no" dir="ltr">div</code> element and JavaScript</a></li> </ul> <h2 id="overview" data-text="Overview" tabindex="-1">Overview</h2> <p>To load a map, your web page must do the following things:</p> <ul> <li>Load the Maps JavaScript API using a bootstrap loader. This is where your API key is passed, and can be added to either the HTML or JavaScript source files.</li> <li>Add the map to the HTML page, and add the needed CSS styles.</li> <li>Load the <code translate="no" dir="ltr">maps</code> library and initialize the map.</li> </ul> <h2 id="gmp-map-element" data-text="Add a map using a gmp-map element" tabindex="-1">Add a map using a <code translate="no" dir="ltr">gmp-map</code> element</h2> <p>The <code translate="no" dir="ltr">gmp-map</code> element is a custom HTML element created using web components. To add a map to a web page using a <code translate="no" dir="ltr">gmp-map</code> element, take the following steps.</p> <ol> <li><p>On the HTML page, add a <code translate="no" dir="ltr">script</code> element containing the bootstrap configured with your API key and any other options. In the following example bootstrap, the <code translate="no" dir="ltr">callback</code> parameter has been omitted, as it is not needed.</p> <p> <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="HTML"><script src="https://maps.googleapis.com/maps/api/js?key=<span data-devsite-credential-type="api_key" class="replaceable-credential">YOUR_API_KEY</span>&loading=async&libraries=maps&v=beta" defer> </script></pre></devsite-code> </p></li> <li><p>On the HTML page, add a <code translate="no" dir="ltr">gmp-map</code> element. Specify latitude and longitude coordinates for <code translate="no" dir="ltr">center</code>, and a zoom value for <code translate="no" dir="ltr">zoom</code>. In this example the <code translate="no" dir="ltr">height</code> style attribute is also specified.</p> <p> <div></div><devsite-code><pre id="maps_web_components_map_gmpmap-html" data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/web-components-map/docs/index.html" data-git-revision="main" data-region-tag="maps_web_components_map_gmpmap" data-copy-event-label="maps_web_components_map_gmpmap-html" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="HTML"><gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px" ></gmp-map><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/3a7f666640b90fcbed4b17b8f6e59f9e371f4263/dist/samples/web-components-map/docs/index.html#L17-L22" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/web-components-map/docs/index.html#maps_web_components_map_gmpmap" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/web-components-map/docs/index.html" data-region-tag="maps_web_components_map_gmpmap">index.html</a></div></pre></devsite-code></p></li> </ol> <h3 id="complete_example_code" data-text="Complete example code" tabindex="-1">Complete example code</h3> <p> <div></div><devsite-code><pre id="maps_web_components_map-html" data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/web-components-map/docs/index.html" data-git-revision="main" data-region-tag="maps_web_components_map" data-copy-event-label="maps_web_components_map-html" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="HTML"><html> <head> <title>Add a Map using HTML</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px" ></gmp-map>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps&v=beta" defer ></script> </body> </html><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/3a7f666640b90fcbed4b17b8f6e59f9e371f4263/dist/samples/web-components-map/docs/index.html#L8-L37" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/web-components-map/docs/index.html#maps_web_components_map" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/web-components-map/docs/index.html" data-region-tag="maps_web_components_map">index.html</a></div></pre></devsite-code></p> <h2 id="div-element" data-text="Add a map using a div element and JavaScript" tabindex="-1">Add a map using a <code translate="no" dir="ltr">div</code> element and JavaScript</h2> <p>To add a map to a web page using a <code translate="no" dir="ltr">div</code> element, take the following steps.</p> <ol> <li><p>On the HTML page, add a <code translate="no" dir="ltr">script</code> element containing the bootstrap loader configured with your API key and any other options. Alternatively, add the bootstrap loader code directly to a TypeScript or JavaScript file, minus the <code translate="no" dir="ltr">script</code> tags.</p> <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript"><<span class="devsite-syntax-nx">script</span>> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">g</span><span class="devsite-syntax-p">=>{</span><span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">h</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">a</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">k</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">p</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-s2">"The Google Maps JavaScript API"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">c</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-s2">"google"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">l</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-s2">"importLibrary"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">q</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-s2">"__ib__"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">m</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-nb">document</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">b</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-nb">window</span><span class="devsite-syntax-p">;</span><span class="devsite-syntax-nx">b</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-nx">b</span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">c</span><span class="devsite-syntax-p">]</span><span class="devsite-syntax-o">||</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">b</span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">c</span><span class="devsite-syntax-p">]</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-p">{});</span><span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">d</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-nx">b</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">maps</span><span class="devsite-syntax-o">||</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">b</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">maps</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-p">{}),</span><span class="devsite-syntax-nx">r</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Set</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">e</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">URLSearchParams</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">u</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-p">()=></span><span class="devsite-syntax-nx">h</span><span class="devsite-syntax-o">||</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">h</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Promise</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-k">async</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">f</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">n</span><span class="devsite-syntax-p">)=>{</span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">a</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-nx">m</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">createElement</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"script"</span><span class="devsite-syntax-p">));</span><span class="devsite-syntax-nx">e</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">set</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"libraries"</span><span class="devsite-syntax-p">,[...</span><span class="devsite-syntax-nx">r</span><span class="devsite-syntax-p">]</span><span class="devsite-syntax-o">+</span><span class="devsite-syntax-s2">""</span><span class="devsite-syntax-p">);</span><span class="devsite-syntax-k">for</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">k</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ow">in</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">g</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-nx">e</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">set</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">k</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">replace</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-sr">/[A-Z]/g</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">t</span><span class="devsite-syntax-p">=></span><span class="devsite-syntax-s2">"_"</span><span class="devsite-syntax-o">+</span><span class="devsite-syntax-nx">t</span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-mf">0</span><span class="devsite-syntax-p">].</span><span class="devsite-syntax-nx">toLowerCase</span><span class="devsite-syntax-p">()),</span><span class="devsite-syntax-nx">g</span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">k</span><span class="devsite-syntax-p">]);</span><span class="devsite-syntax-nx">e</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">set</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"callback"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">c</span><span class="devsite-syntax-o">+</span><span class="devsite-syntax-s2">".maps."</span><span class="devsite-syntax-o">+</span><span class="devsite-syntax-nx">q</span><span class="devsite-syntax-p">);</span><span class="devsite-syntax-nx">a</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">src</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-sb">`https://maps.</span><span class="devsite-syntax-si">${</span><span class="devsite-syntax-nx">c</span><span class="devsite-syntax-si">}</span><span class="devsite-syntax-sb">apis.com/maps/api/js?`</span><span class="devsite-syntax-o">+</span><span class="devsite-syntax-nx">e</span><span class="devsite-syntax-p">;</span><span class="devsite-syntax-nx">d</span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">q</span><span class="devsite-syntax-p">]</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-nx">f</span><span class="devsite-syntax-p">;</span><span class="devsite-syntax-nx">a</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">onerror</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-p">()=></span><span class="devsite-syntax-nx">h</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-nx">n</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-ne">Error</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">p</span><span class="devsite-syntax-o">+</span><span class="devsite-syntax-s2">" could not load."</span><span class="devsite-syntax-p">));</span><span class="devsite-syntax-nx">a</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">nonce</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-nx">m</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">querySelector</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"script[nonce]"</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-o">?</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">nonce</span><span class="devsite-syntax-o">||</span><span class="devsite-syntax-s2">""</span><span class="devsite-syntax-p">;</span><span class="devsite-syntax-nx">m</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">head</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">append</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">a</span><span class="devsite-syntax-p">)}));</span><span class="devsite-syntax-nx">d</span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">l</span><span class="devsite-syntax-p">]</span><span class="devsite-syntax-o">?</span><span class="devsite-syntax-nx">console</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">warn</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">p</span><span class="devsite-syntax-o">+</span><span class="devsite-syntax-s2">" only loads once. Ignoring:"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-nx">g</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-nx">d</span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">l</span><span class="devsite-syntax-p">]</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">f</span><span class="devsite-syntax-p">,...</span><span class="devsite-syntax-nx">n</span><span class="devsite-syntax-p">)=></span><span class="devsite-syntax-nx">r</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">add</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">f</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-o">&&</span><span class="devsite-syntax-nx">u</span><span class="devsite-syntax-p">().</span><span class="devsite-syntax-nx">then</span><span class="devsite-syntax-p">(()=></span><span class="devsite-syntax-nx">d</span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">l</span><span class="devsite-syntax-p">](</span><span class="devsite-syntax-nx">f</span><span class="devsite-syntax-p">,...</span><span class="devsite-syntax-nx">n</span><span class="devsite-syntax-p">))})({</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">key</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"<span data-devsite-credential-type="api_key" class="replaceable-credential">YOUR_API_KEY</span>"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">v</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"weekly"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// Use the 'v' parameter to indicate the <a href="/maps/documentation/javascript/versions">version</a> to use (weekly, beta, alpha, etc.).</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// Add other <a href="/maps/documentation/javascript/load-maps-js-api#required_parameters">bootstrap parameters</a> as needed, using camel case.</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">});</span> <<span class="devsite-syntax-err">/script</span>></pre></devsite-code></li> <li><p>On the HTML page, add a <code translate="no" dir="ltr">div</code> element to contain the map.</p> <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript"><<span class="devsite-syntax-nx">div</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-s2">"map"</span>><<span class="devsite-syntax-o">/</span><span class="devsite-syntax-nx">div</span>></pre></devsite-code></li> <li><p>In the CSS, set the map height to 100%.</p> <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript"><span class="devsite-syntax-err">#</span><span class="devsite-syntax-nx">map</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">height</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">100</span><span class="devsite-syntax-o">%</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-p">}</span></pre></devsite-code></li> <li><p>In the JavaScript file, create a function to load the <code translate="no" dir="ltr">maps</code> library and initialize the map. Specify latitude and longitude coordinates for <code translate="no" dir="ltr">center</code>, and the zoom level to use for <code translate="no" dir="ltr">zoom</code>.</p> <p> <div></div><devsite-code><pre id="maps_map_simple-javascript" data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/map-simple/docs/index.js" data-git-revision="main" data-region-tag="maps_map_simple" data-copy-event-label="maps_map_simple-javascript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript"><span class="devsite-syntax-kd">let</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">map</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-k">async</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">function</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">initMap</span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Map</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">maps</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">importLibrary</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"maps"</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">map</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Map</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nb">document</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">getElementById</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"map"</span><span class="devsite-syntax-p">),</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">center</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">lat</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">-</span><span class="devsite-syntax-mf">34.397</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">lng</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">150.644</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">zoom</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">8</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">});</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-nx">initMap</span><span class="devsite-syntax-p">();</span><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/3a7f666640b90fcbed4b17b8f6e59f9e371f4263/dist/samples/map-simple/docs/index.js#L7-L18" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/map-simple/docs/index.js#maps_map_simple" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/map-simple/docs/index.js" data-region-tag="maps_map_simple"><span class="devsite-syntax-nx">index</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">js</span></a></div></pre></devsite-code></p></li> </ol> <h3 id="complete_example_code_2" data-text="Complete example code" tabindex="-1">Complete example code</h3> <p> <div id="maps_map_simple-code-sample"> <div class="ds-selector-tabs"> <section> <h3 id="maps_map_simple-typescript" track-type="sampleTabNav" track-name="typescript" track-metadata-position="maps_map_simple" data-text="TypeScript" tabindex="-1">TypeScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/samples/map-simple/index.ts" data-git-revision="main" data-region-tag="maps_map_simple" data-scope="maps_map_simple" data-copy-event-label="maps_map_simple-typescript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="TypeScript"><span class="devsite-syntax-kd">let</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">map</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kt">google.maps.Map</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-k">async</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">function</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">initMap</span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">Promise<void></span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Map</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">maps</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">importLibrary</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"maps"</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kr">as</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">maps</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">MapsLibrary</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">map</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Map</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nb">document</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">getElementById</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"map"</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kr">as</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">HTMLElement</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">center</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">lat</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">-</span><span class="devsite-syntax-mf">34.397</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">lng</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kt">150.644</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">zoom</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kt">8</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">});</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-nx">initMap</span><span class="devsite-syntax-p">();</span><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/3a7f666640b90fcbed4b17b8f6e59f9e371f4263/samples/map-simple/index.ts#L8-L17" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/samples/map-simple/index.ts#maps_map_simple" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/samples/map-simple/index.ts" data-region-tag="maps_map_simple"><span class="devsite-syntax-nx">index</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">ts</span></a></div></pre></devsite-code> <aside class="note"> <b>Note:</b> Read the <a href="/maps/documentation/javascript/using-typescript">guide</a> on using TypeScript and Google Maps. </aside> </section> <section> <h3 id="maps_map_simple-javascript" track-type="sampleTabNav" track-name="javascript" track-metadata-position="maps_map_simple" data-text="JavaScript" tabindex="-1">JavaScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/map-simple/docs/index.js" data-git-revision="main" data-region-tag="maps_map_simple" data-scope="maps_map_simple" data-copy-event-label="maps_map_simple-javascript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript"><span class="devsite-syntax-kd">let</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">map</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-k">async</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">function</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">initMap</span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Map</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">maps</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">importLibrary</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"maps"</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">map</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Map</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nb">document</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">getElementById</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"map"</span><span class="devsite-syntax-p">),</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">center</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">lat</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">-</span><span class="devsite-syntax-mf">34.397</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">lng</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">150.644</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">zoom</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">8</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">});</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-nx">initMap</span><span class="devsite-syntax-p">();</span><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/3a7f666640b90fcbed4b17b8f6e59f9e371f4263/dist/samples/map-simple/docs/index.js#L7-L18" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/map-simple/docs/index.js#maps_map_simple" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/map-simple/docs/index.js" data-region-tag="maps_map_simple"><span class="devsite-syntax-nx">index</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">js</span></a></div></pre></devsite-code> <aside class="note"> <b>Note:</b> The JavaScript is compiled from the TypeScript snippet. </aside> </section> <section> <h3 id="maps_map_simple-css" track-type="sampleTabNav" track-name="css" track-metadata-position="maps_map_simple" data-text="CSS" tabindex="-1">CSS</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/map-simple/docs/style.css" data-git-revision="main" data-region-tag="maps_map_simple" data-scope="maps_map_simple" data-copy-event-label="maps_map_simple-css" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="CSS"><span class="devsite-syntax-c">/* </span> <span class="devsite-syntax-c"> * Always set the map height explicitly to define the size of the div element</span> <span class="devsite-syntax-c"> * that contains the map. </span> <span class="devsite-syntax-c"> */</span> <span class="devsite-syntax-p">#</span><span class="devsite-syntax-nn">map</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">height</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">100</span><span class="devsite-syntax-kt">%</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-c">/* </span> <span class="devsite-syntax-c"> * Optional: Makes the sample page fill the window. </span> <span class="devsite-syntax-c"> */</span> <span class="devsite-syntax-nt">html</span><span class="devsite-syntax-o">,</span> <span class="devsite-syntax-nt">body</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">height</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">100</span><span class="devsite-syntax-kt">%</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">margin</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">0</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">padding</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">0</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-p">}</span> <div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/3a7f666640b90fcbed4b17b8f6e59f9e371f4263/dist/samples/map-simple/docs/style.css#L7-L24" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/map-simple/docs/style.css#maps_map_simple" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/map-simple/docs/style.css" data-region-tag="maps_map_simple"><span class="devsite-syntax-nt">style</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">css</span></a></div></pre></devsite-code> </section> <section> <h3 id="maps_map_simple-html" track-type="sampleTabNav" track-name="html" track-metadata-position="maps_map_simple" data-text="HTML" tabindex="-1">HTML</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/map-simple/docs/index.html" data-git-revision="main" data-region-tag="maps_map_simple" data-scope="maps_map_simple" data-copy-event-label="maps_map_simple-html" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="HTML"><html> <head> <title>Simple Map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div>  <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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/3a7f666640b90fcbed4b17b8f6e59f9e371f4263/dist/samples/map-simple/docs/index.html#L8-L22" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/map-simple/docs/index.html#maps_map_simple" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/map-simple/docs/index.html" data-region-tag="maps_map_simple">index.html</a></div></pre></devsite-code> </section> </div> <h3 id="try-sample" data-text=" Try Sample " tabindex="-1"> Try Sample </h3> <div style="display: flex; width: 100%; flex-wrap:wrap;gap: 8px"> <a target="_blank" class="button button-primary gc-analytics-event" style="margin:0;" data-category="GMP" style="margin:0;" data-label="map-simple" data-action="open-sample-in-jsfiddle" href="https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/map-simple/jsfiddle" class="button button-primary">JSFiddle.net</a> <a target="_blank" class="button button-primary gc-analytics-event" style="margin:0;" data-category="GMP" style="margin:0;" data-label="map-simple" data-action="open-sample-in-cloud-shell" href="https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-map-simple&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=." class="button button-primary">Google Cloud Shell</a> </div> </div></p> </div> <devsite-recommendations display="in-page" hidden yield> </devsite-recommendations> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <devsite-feedback position="footer" project-name="Maps JavaScript API" product-id="81777" bucket="" context="Maps JS API v3" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="footer" class="nocontent" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png" project-support-url="https://developers.google.com/maps/documentation/javascript/support" > <button> Send feedback </button> </devsite-feedback> <devsite-recommendations id="recommendations-link" yield></devsite-recommendations> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2024-11-26 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-thumb-rating-feedback"> <devsite-feedback position="thumb-rating" project-name="Maps JavaScript API" product-id="81777" bucket="" context="Maps JS API v3" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="thumb-rating" class="nocontent" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png" project-support-url="https://developers.google.com/maps/documentation/javascript/support" > <button> Need to tell us more? </button> </devsite-feedback> </template> <template class="devsite-content-data-template"> [[["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-11-26 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> <nav class="devsite-footer-promos nocontent" aria-label="Promotions"> <ul class="devsite-footer-promos-list"> <li class="devsite-footer-promo"> <a href="http://stackoverflow.com/questions/tagged/google-maps" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 1)" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/logo-stack-overflow.svg" loading="lazy" alt="Stack Overflow"> </picture> <span class="devsite-footer-promo-label"> Stack Overflow </span> </a> <div class="devsite-footer-promo-description">Ask a question under the google-maps tag.</div> </li> <li class="devsite-footer-promo"> <a href="https://github.com/googlemaps/" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 2)" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/logo-github.svg" loading="lazy" alt="GitHub"> </picture> <span class="devsite-footer-promo-label"> GitHub </span> </a> <div class="devsite-footer-promo-description">Fork our samples and try them yourself.</div> </li> <li class="devsite-footer-promo"> <a href="https://discord.gg/f4hvx8Rp2q" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 3)" > <picture> <img class="devsite-footer-promo-icon" src="/static/maps/images/discord-color.png" loading="lazy" alt="Discord"> </picture> <span class="devsite-footer-promo-label"> Discord </span> </a> <div class="devsite-footer-promo-description">Chat with fellow developers about Google Maps Platform.</div> </li> <li class="devsite-footer-promo"> <a href="https://issuetracker.google.com/issues/new?component=188853&template=788207" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 4)" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/developers_64dp.png" loading="lazy" alt="Issue Tracker"> </picture> <span class="devsite-footer-promo-label"> Issue Tracker </span> </a> <div class="devsite-footer-promo-description">Something wrong? Send us a bug report!</div> </li> </ul> </nav> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Learn More</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/maps/faq" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > FAQ </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/maps/documentation/api-picker" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > API Picker </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/maps/documentation/javascript/tutorials" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Tutorials </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Platforms</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/maps/apis-by-platform#android" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Android </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/maps/apis-by-platform#ios" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > iOS </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/maps/apis-by-platform#web_apis" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Web </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/maps/apis-by-platform#web_service_apis" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Web Services </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Product Info</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/maps/pricing-and-plans" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-action="linkClick"data-category="pricingAndPlans"data-label="footerMen"> Pricing and Plans </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://cloud.google.com/contact-maps/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-category="contactSales"data-label="footerMenu"data-action="linkClick"> Contact Sales </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://developers.google.com/maps/support/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Support </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://cloud.google.com/maps-platform/terms" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Terms of Service </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <picture> <img class="devsite-footer-sites-logo" src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/lockup-google-for-developers.svg" loading="lazy" alt="Google Developers"> </picture> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//developer.android.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link" > Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link" > Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//firebase.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link" > Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//cloud.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link" > Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//ai.google.dev/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google AI Link" > Google AI </a> </li> <li class="devsite-footer-sites-item"> <a href="/products" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link" > All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/terms/site-terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> <li class="devsite-footer-utility-item devsite-footer-utility-button"> <span class="devsite-footer-utility-description">Sign up for the Google for Developers newsletter</span> <a class="devsite-footer-utility-link gc-analytics-event" href="/newsletter/subscribe" data-category="Site-Wide Custom Events" data-label="Footer Subscribe link" > Subscribe </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> <devsite-concierge data-info-panel data-ai-panel data-api-explorer-panel > </devsite-concierge> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[{"dimensions": {"dimension1": "Signed out", "dimension11": false, "dimension3": false, "dimension6": "en", "dimension4": "Maps JavaScript API", "dimension5": "en"}, "gaid": "UA-24532603-1", "metrics": {"ratings_count": "metric2", "ratings_value": "metric1"}, "purpose": 1}]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [{"id": "G-272J68FCRF", "purpose": 1}], "ga4p": [{"id": "G-272J68FCRF", "purpose": 1}], "gtm": [{"id": "GTM-W2H69MN", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Maps JavaScript API", "signedIn": "False", "tenant": "developers", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="jmZFI3P7qSc4m1tNxbUWd8Nzo+0TZM"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/js/app_loader.js', '[1,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers","https://developers-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/developers/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","developers.google.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Search__enable_page_map","Concierge__enable_concierge_restricted","CloudShell__cloud_code_overflow_menu","Profiles__enable_complete_playlist_endpoint","Profiles__enable_release_notes_notifications","Cloud__enable_cloudx_ping","Concierge__enable_concierge","Cloud__enable_cloudx_experiment_ids","Cloud__enable_llm_concierge_chat","Profiles__enable_awarding_url","Search__enable_ai_search_summaries_restricted","TpcFeatures__enable_required_headers","Profiles__enable_dashboard_curated_recommendations","TpcFeatures__enable_mirror_tenant_redirects","Experiments__reqs_query_experiments","Cloud__enable_cloud_facet_chat","EngEduTelemetry__enable_engedu_telemetry","Cloud__enable_free_trial_server_call","MiscFeatureFlags__enable_explain_this_code","Concierge__enable_pushui","Significatio__enable_by_tenant","Profiles__enable_developer_profiles_callout","Profiles__require_profile_eligibility_for_signin","Cloud__enable_cloud_shell","Profiles__enable_completecodelab_endpoint","Profiles__enable_profile_collections","Search__enable_ai_eligibility_checks","DevPro__enable_developer_subscriptions","Analytics__enable_clearcut_logging","BookNav__enable_tenant_cache_key","Cloud__enable_legacy_calculator_redirect","MiscFeatureFlags__developers_footer_image","Profiles__enable_public_developer_profiles","DevPro__enable_cloud_innovators_plus","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__enable_variable_operator","Profiles__enable_recognition_badges","MiscFeatureFlags__enable_project_variables","CloudShell__cloud_shell_button","Profiles__enable_page_saving","MiscFeatureFlags__enable_view_transitions","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloud_dlp_service","MiscFeatureFlags__developers_footer_dark_image","Cloud__enable_cloud_shell_fte_user_flow","MiscFeatureFlags__emergency_css","Search__enable_ai_search_summaries","Search__enable_suggestions_from_borg"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.clients6.google.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.clients6.google.com",1,4,null,"https://developerprofiles-pa.clients6.google.com",[1,"developers","Google for Developers","developers.google.com",null,"developers-dot-devsite-v2-prod.appspot.com",null,null,[1,1,[1],null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],[1,null,null,[1,20],"/recommendations/information"],null,null,null,[1,1,1],[1,1,null,1,1]],null,[null,null,null,null,null,null,"/images/lockup-new.svg","/images/touchicon-180-new.png",null,null,null,null,1,null,null,null,null,null,null,null,null,1,null,null,null,"/images/lockup-dark-theme-new.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[6,1,14,15,20,22,23,29,32,36],null,[[null,null,null,[3,7,10,2,39,17,4,32,24,11,12,13,34,15,25],null,null,[1,[["docType","Choose a content type",[["Tutorial",null,null,null,null,null,null,null,null,"Tutorial"],["Guide",null,null,null,null,null,null,null,null,"Guide"],["Sample",null,null,null,null,null,null,null,null,"Sample"]]],["product","Choose a product",[["Android",null,null,null,null,null,null,null,null,"Android"],["ARCore",null,null,null,null,null,null,null,null,"ARCore"],["ChromeOS",null,null,null,null,null,null,null,null,"ChromeOS"],["Firebase",null,null,null,null,null,null,null,null,"Firebase"],["Flutter",null,null,null,null,null,null,null,null,"Flutter"],["Assistant",null,null,null,null,null,null,null,null,"Google Assistant"],["GoogleCloud",null,null,null,null,null,null,null,null,"Google Cloud"],["GoogleMapsPlatform",null,null,null,null,null,null,null,null,"Google Maps Platform"],["GooglePay",null,null,null,null,null,null,null,null,"Google Pay & Google Wallet"],["GooglePlay",null,null,null,null,null,null,null,null,"Google Play"],["Tensorflow",null,null,null,null,null,null,null,null,"TensorFlow"]]],["category","Choose a topic",[["AiAndMachineLearning",null,null,null,null,null,null,null,null,"AI and Machine Learning"],["Data",null,null,null,null,null,null,null,null,"Data"],["Enterprise",null,null,null,null,null,null,null,null,"Enterprise"],["Gaming",null,null,null,null,null,null,null,null,"Gaming"],["Mobile",null,null,null,null,null,null,null,null,"Mobile"],["Web",null,null,null,null,null,null,null,null,"Web"]]]]]],[1,1],null,1],[[["UA-24532603-1"],["UA-22084204-5"],null,null,["UA-24532603-5"],null,null,[["G-272J68FCRF"],null,null,[["G-272J68FCRF",2]]],[["UA-24532603-1",2]],null,[["UA-24532603-5",2]],null,1],[[15,12],[3,2],[5,4],[12,9],[14,11],[13,10],[4,3],[1,1],[11,8],[6,5],[16,13]],[[1,1],[2,2]]],null,4,null,null,null,null,null,null,null,null,null,null,null,null,null,"developers.devsite.google"],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Add a Google Map to a Web Page | Maps JavaScript API | Google for Developers