Street View Service | 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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/css/app.css"> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/images/favicon-new.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/images/touchicon-180-new.png"><link rel="canonical" href="https://developers.google.com/maps/documentation/javascript/streetview"><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/streetview" /><link rel="alternate" hreflang="x-default" href="https://developers.google.com/maps/documentation/javascript/streetview" /><link rel="alternate" hreflang="ar" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=fr" /><link rel="alternate" hreflang="de" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=de" /><link rel="alternate" hreflang="he" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=he" /><link rel="alternate" hreflang="hi" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=hi" /><link rel="alternate" hreflang="id" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=id" /><link rel="alternate" hreflang="it" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=it" /><link rel="alternate" hreflang="ja" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=th" /><link rel="alternate" hreflang="tr" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developers.google.com/maps/documentation/javascript/streetview?hl=vi" /><title>Street View Service  |  Maps JavaScript API  |  Google for Developers</title> <meta property="og:title" content="Street View Service  |  Maps JavaScript API  |  Google for Developers"><meta property="og:url" content="https://developers.google.com/maps/documentation/javascript/streetview"><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": "Street View Service" } </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": "Street View Service", "item": "https://developers.google.com/maps/documentation/javascript/streetview" }] } </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> <a href="#main-content" class="skip-link button"> Skip to main content </a> <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> <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> </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/" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://mapsplatform.google.com/" 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/" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://mapsplatform.google.com/maps-products/" 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/" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://mapsplatform.google.com/pricing/" 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" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/maps/documentation" 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> <button aria-haspopup="menu" 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"></button> <div class="devsite-tabs-dropdown" role="menu" 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-js" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript/places-js" 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/legacy" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/legacy" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Legacy products </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" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://mapsplatform.google.com/resources/blog" 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" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/maps/developer-community" 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> <button aria-haspopup="menu" 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"></button> <div class="devsite-tabs-dropdown" role="menu" 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://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://www.linkedin.com/showcase/googlemapsplatform/" track-type="nav" track-metadata-eventdetail="https://www.linkedin.com/showcase/googlemapsplatform/" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> LinkedIn </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://developers.google.com/maps/innovators" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/innovators" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Innovators </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> </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"> Sign in </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-label="nav" data-modal-dialog-id="enable-billing-modal-dialog" data-category="GMPgetStarted" data-action="buttonClick" >Get Started</a> <a href="https://cloud.google.com/contact-maps/" class="button gc-analytics-event " data-category="GMPcontactSales" data-label="nav" data-action="buttonClick" >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" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript" 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" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript/reference" 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" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript/examples" 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" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript/support" 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" > <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> </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> <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> </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"> Overview </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"> Products </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"> Pricing </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"> Documentation </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> More </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"> Guides </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"> Reference </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"> Samples </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"> Support </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"> Blog </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"> Community </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> More </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" >Maps JavaScript API</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" >Overview</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" >Set up your Google Cloud project</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" >Use API Keys</a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/maps-app-check" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/maps-app-check" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/maps-app-check" >Use App Check to Secure Your API Key</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" >Load the Maps JavaScript API</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" >Troubleshooting</a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Tutorials </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" >Add a Google Map with a marker using HTML</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" >Add a Google Map with a marker using JavaScript</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" >Add a Google Map to a React app</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" >More tutorials</a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Concepts </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" >Versioning</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" >Localization</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" >Best practices</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" >TypeScript</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" >Promises</a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Base map </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" >Add a Google Map to a web page</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" >Map events</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" >Map controls</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" >Control zoom and pan</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" >Rendering type (raster and vector)</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" >Map types</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" >Map color scheme</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" >Map and tile coordinates</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"> Customize maps </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/map-ids/customize-maps-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/map-ids/customize-maps-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/map-ids/customize-maps-overview" >Overview</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"> Manage map IDs </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/map-ids/mapid-over" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/map-ids/mapid-over" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/map-ids/mapid-over" >Map ID overview</a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/map-ids/get-map-id" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/map-ids/get-map-id" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/map-ids/get-map-id" >Create map IDs</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"> Cloud-based maps styling </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" >Overview</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"> Get Started </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" >Get started and set up</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" >Tutorial - Highlight a road network</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" >Update a map style to the latest version</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" >Map feature changes</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"> Create and use map styles </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" >Create and use map styles</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" >Test map style updates</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" >Style zoom levels</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" >Work with map style versions</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" >What you can style on a map</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" >Understand map style inheritance and hierarchy</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" >Manage styles that overlap</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"> Modify map settings </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" >Control the density of Points of interest</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" >Filter which map features to display</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" >Change the style of buildings</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" >Change the style of landmarks</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" >Change the app background color</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"> Style examples and guidelines </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" >Styling examples</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" >Design checklist</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" >Troubleshoot</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"> Legacy cloud-based maps styling </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" >Overview</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"> Get Started </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" >Set up and billing</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" >Legacy Map Style Editor walkthrough</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"> Use legacy cloud styling </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" >Manage legacy map styles</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" >Work with legacy zoom levels</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" >Customize legacy POI behavior</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" >Customize legacy building style</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" >Legacy examples</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"> JSON styling </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" >JSON styling overview</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" >JSON style reference</a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Markers </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" >Overview</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" >Get started</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" >Add a marker to a map</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" >Basic marker customization</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" >Create markers with graphics</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" >Create markers with HTML and CSS</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" >Control collision behavior, altitude, and visibility</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" >Make markers clickable and accessible</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" >Make markers draggable</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" >Migrate to advanced markers</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" >Markers (Legacy)</a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Work with Places </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-js" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-js" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-js" >Overview</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"> Places (New) </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" >Overview</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" >Get Started</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" >Text Search (New)</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" >Nearby Search (New)</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" >Place Details</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" >Place Photos</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" >Place Reviews</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"> Place Autocomplete </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" >Overview</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" >Place Autocomplete Widget (Preview)</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" >Place Autocomplete Data API</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" >Autocomplete and session pricing</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" >Place Data Fields</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" >Place Types</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"> Migrate to Places (New) </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" >Migration Overview</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" >Migrate to the new Place Details</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" >Migrate to the new Place Search</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" >Migrate to the new Nearby Search</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" >Migrate to the new Place Photos</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" >Migrate to the new Place Reviews</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" >Migrate to the new Place Autocomplete</a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-experimental"><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"> Places UI Kit (Experimental) </div><ul class="devsite-nav-section"><li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/places-ui-kit/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-ui-kit/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-ui-kit/overview" >Overview</a></li><li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/places-ui-kit/get-started" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-ui-kit/get-started" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-ui-kit/get-started" >Get started</a></li><li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/places-ui-kit/place-details" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-ui-kit/place-details" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-ui-kit/place-details" >Place Details</a></li><li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/places-ui-kit/place-list" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-ui-kit/place-list" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-ui-kit/place-list" >Place List</a></li><li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/places-ui-kit/elevation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-ui-kit/elevation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-ui-kit/elevation" >Elevation</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"> Places Service (Legacy) </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" >Place Search and Details</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" >Place Autocomplete</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" >Place Data Fields</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" >Place Types</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"> Places Guides </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" >Place Icons</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" >Place IDs</a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-app-check" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-app-check" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-app-check" >Use App Check to Secure your API key</a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Draw on the map </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" >Overview</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" >Info windows</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" >Shapes and lines</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" >Symbols</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"> WebGL Features </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" >Overview</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" >Vector Map Features</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" >WebGL Overlay View</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" >Support</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" >Deck.gl data visualizations</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" >Ground overlays</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" >Custom overlays</a></li> <li class="devsite-nav-item devsite-nav-heading devsite-nav-experimental"><div class="devsite-nav-title devsite-nav-title-no-path"> Work with 3D maps (Experimental) </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" >Overview</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" >Get started</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" >Markers</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" >3D models</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" >Draw on the map</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" >Interact with the map</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" >Support</a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Display data </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" >Overview</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"> Data-driven styling for datasets </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" >Overview</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" >Get started</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" >Create and manage a dataset</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" >Add a dataset to a map</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" >Style data features</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" >Handle mouse events</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" >Policies for data-driven stylng for datasets</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"> Data-driven styling for boundaries </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" >Overview</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" >Get started</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" >Style a boundary polygon</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" >Make a choropleth map</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" >Handle mouse events</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" >Use Places APIs and Geocoding with data-driven styling</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" >Google boundaries coverage</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"> KML </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" >KML and GeoRSS</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" >Display KML data</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"> JSON </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" >Import GeoJSON data into maps</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" >Data Visualization</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" >Combine and Visualize Multiple Data Sources</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" >Data layer</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" >Heatmap</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" >Traffic, Transit, and Bicycling Layers</a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Services </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" >Directions</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" >Distance Matrix</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" >Elevation</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" >Geocoding</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" >Maximum Zoom Imagery</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" >Street View</a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Additional Libraries </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" >Overview</a></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/air-quality-widget" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/air-quality-widget" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/air-quality-widget" >Air Quality Meter Widget (Experimental)</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" >Drawing Library</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" >Geometry Library</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" >Visualization Library</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" >Open Source Libraries</a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Policies and Terms </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" >Policies and attributions</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" >Usage and billing</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" >Reporting and monitoring</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/" >Terms of service</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" >Content Security Policy Guide</a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> More Guides </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" >Google Loader Migration Guide</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" >Place Field Migration (open_now, utc_offset)</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" >Upgrading from v2 to v3</a></li> </ul> <ul class="devsite-nav-list" menu="Documentation" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> Get Started </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"> Get Started with Google Maps Platform </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"> API Picker </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"> Billing & Pricing </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"> Security & Compliance </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"> Reporting & Monitoring </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"> FAQ </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"> Support and Resources </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"> Customer Care </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"> Incident Management </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Maps </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"> Maps JavaScript API </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"> Maps SDK for Android </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"> Maps SDK for iOS </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"> Google Maps for Flutter </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"> Maps Embed API </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"> Maps Static API </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"> Street View Static API </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"> Maps URLs </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"> Aerial View API </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"> Elevation API </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"> Map Tiles API </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"> Maps Datasets API </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"> Web Components (Preview) </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Routes </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"> Routes API </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"> Navigation SDK for Android </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"> Navigation SDK for iOS </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"> Navigation for Flutter </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"> Navigation for React Native </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"> Roads API </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"> Directions API </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"> Distance Matrix API </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"> Route Optimization API </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Solutions </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"> Industry solutions </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"> Mobility services </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Places </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"> Places API </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"> Places SDK for Android </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"> Places SDK for iOS </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/javascript/places-js" 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"> Places Library, Maps JavaScript API </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"> Geocoding API </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"> Geolocation API </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"> Address Validation API </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"> Time Zone API </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"> Places Insights API (Preview) </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Environment </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"> Air Quality API </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"> Pollen API </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"> Solar API </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Additional Resources </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"> API Security Best Practices </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"> Digital Signature Guide </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"> Map Coverage Details </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"> Optimization Guide </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"> Mobile OS and software support </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"> Launch stages </a> </li> <li class="devsite-nav-item"> <a href="/maps/legacy" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Legacy products" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> Legacy products </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"> Deprecations </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"> Asset Tracking Plan </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"> URL Encoding </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"> WordPress Users </a> </li> </ul> <ul class="devsite-nav-list" menu="Community" aria-label="Side menu" hidden> <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"> GitHub </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"> YouTube </a> </li> <li class="devsite-nav-item"> <a href="https://www.linkedin.com/showcase/googlemapsplatform/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: LinkedIn" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> LinkedIn </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"> Discord </a> </li> <li class="devsite-nav-item"> <a href="/maps/innovators" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Innovators" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> Innovators </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"> Issue Tracker </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" 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><style> .center { text-align: center } </style> <div class="devsite-banner devsite-banner-announcement nocontent" > <div class="devsite-banner-message"> <div class="devsite-banner-message-text"> Announcement: New basemap styling is coming soon to Google Maps Platform. This update to map styling includes a new default color palette, modernized pins, and improvements to map experiences and usability. All map styles will be automatically updated in March 2025. For more information on availability and how to opt in earlier, see <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-20250211-r00-rc00.466928320959134316" 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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/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"> Street View Service </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> Stay organized with collections Save and categorize content based on your preferences. </devsite-feature-tooltip> <devsite-key-takeaways></devsite-key-takeaways> <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 "> <h2 id="StreetView" data-text="Overview" tabindex="-1">Overview</h2> <style> .page_switcher { margin: 16px -40px; border-top: 1px solid #dadce0; border-bottom: 1px solid #dadce0; padding: 16px 40px; background-color: rgb(241, 243, 244); } </style> <div class="page_switcher"> Select platform: <a class="button" class="gc-analytics-event" data-category="GMPPlatformSwitch" data-label="maps_streetview_android" style="border-radius: 16px;height: 32px; line-height:30px;" title="View this page for the Android platform docs." href="/maps/documentation/android-sdk/streetview">Android</a> <a class="button" class="gc-analytics-event" data-category="GMPPlatformSwitch" data-label="maps_streetview_ios" style="border-radius: 16px;height: 32px; line-height:30px;" title="View this page for the iOS platform docs." href="/maps/documentation/ios-sdk/streetview">iOS</a> <a class="button button-primary" class="gc-analytics-event" data-category="GMPPlatformSwitch" data-label="maps_streetview_js" style="border-radius: 16px;height: 32px; line-height:30px;" title="View this page for the JavaScript platform docs." href="/maps/documentation/javascript/streetview">JavaScript</a> </div> <aside class="note"> Also see the Maps JavaScript API Reference: <a href="/maps/documentation/javascript/reference/street-view">Rendering</a>, <a href="/maps/documentation/javascript/reference/street-view-service">Service</a>) </aside> Google Street View provides panoramic 360 degree views from designated roads throughout its coverage area. Street View's API coverage is the same as that for the Google Maps application (<code translate="no" dir="ltr">https://maps.google.com/</code>). The list of currently supported cities for Street View is available at the <a href="http://www.google.com/maps/about/behind-the-scenes/streetview/#where">Google Maps website</a>. <aside class="note">Note: Street View imagery <a href="https://www.google.com/streetview/" class="external">comes from two sources</a>: Google (non-public developer-controlled imagery), and the public (UGC, or public user-generated content). Note that there is no way to use only one source of Street View imagery over the other. Learn more about our <a href="https://www.google.com/streetview/privacy/" class="external">Street view imagery privacy policy</a>.</aside> A sample Street View image is shown below. <devsite-iframe style="height: 400px"> <iframe src="https://geo-devrel-javascript-samples.web.app/samples/streetview-embed/app/dist/" allow="fullscreen; "></iframe> </devsite-iframe> The Maps JavaScript API provides a Street View service for obtaining and manipulating the imagery used in Google Maps Street View. This Street View service is supported natively within the browser. <h2 id="StreetViewMapUsage" data-text="Street View Map Usage" tabindex="-1">Street View Map Usage</h2> Although Street View can be used within a <a href="#StreetViewContainers">standalone DOM element</a>, it is most useful when indicating a location on a map. By default, Street View is enabled on a map, and a Street View Pegman control appears integrated within the navigation (zoom and pan) controls. You may hide this control within the map's <code translate="no" dir="ltr">MapOptions</code> by setting <code translate="no" dir="ltr">streetViewControl</code> to <code translate="no" dir="ltr">false</code>. You may also change the default position of the Street View control by setting the <code translate="no" dir="ltr">Map</code>'s <code translate="no" dir="ltr">streetViewControlOptions.position</code> property to a new <code translate="no" dir="ltr">ControlPosition</code>. The Street View Pegman control allows you to view Street View panoramas directly within the map. When the user clicks and holds the Pegman, the map updates to show blue outlines around Street View-enabled streets, offering a user experience similar to the Google Maps app. When the user drops the Pegman marker onto a street, the map updates to display a Street View panorama of the indicated location. <h2 id="StreetViewPanoramas" data-text="Street View Panoramas" tabindex="-1">Street View Panoramas</h2> <aside class="note">Note: Only Street View panoramas generated with the <code translate="no" dir="ltr">StreetViewPanorama</code> object are billed. The built-in Street View experience based on the Street View Pegman control, and the <code translate="no" dir="ltr">StreetViewService</code>, are not billed. For more information, see <a href="/maps/documentation/javascript/usage-and-billing#dynamic-street-view" target="_blank">Pricing</a>. </aside> Street View images are supported through use of the <code translate="no" dir="ltr">StreetViewPanorama</code> object, which provides an API interface to a Street View "viewer." Each map contains a default Street View panorama, which you can retrieve by calling the map's <code translate="no" dir="ltr">getStreetView()</code> method. When you add a Street View control to the map by setting its <code translate="no" dir="ltr">streetViewControl</code> option to <code translate="no" dir="ltr">true</code>, you automatically connect the Pegman control to this default Street View panorama. You may also create your own <code translate="no" dir="ltr">StreetViewPanorama</code> object and set the map to use that instead of the default, by setting the map's <code translate="no" dir="ltr">streetView</code> property explicitly to that constructed object. You may wish to override the default panorama if you want to modify default behavior, such as the automatic sharing of overlays between the map and the panorama. (See <a href="#StreetViewOverlays">Overlays within Street View</a> below.) <h2 id="StreetViewContainers" data-text="Street View Containers" tabindex="-1">Street View Containers</h2> You may instead wish to display a <code translate="no" dir="ltr">StreetViewPanorama</code> within a separate DOM element, often a <code translate="no" dir="ltr"><div></code> element. Simply pass the DOM element within the <code translate="no" dir="ltr">StreetViewPanorama</code>'s constructor. For optimum display of images, we recommend a minimum size of 200 pixels by 200 pixels. Note: Although Street View functionality is designed to be used in conjunction with a map, this usage is not required. You may use a standalone Street View object without a map. <h2 id="StreetViewLocation" data-text="Street View Locations and Point-of-View (POV)" tabindex="-1">Street View Locations and Point-of-View (POV)</h2> The <code translate="no" dir="ltr">StreetViewPanorama</code> constructor also allows you to set the Street View location and point of view using the <code translate="no" dir="ltr">StreetViewOptions</code> parameter. You may call <code translate="no" dir="ltr"> setPosition()</code> and <code translate="no" dir="ltr">setPov()</code> on the object after construction to change its location and POV. The Street View location defines the placement of the camera focus for an image, but it does not define the orientation of the camera for that image. For that purpose, the <code translate="no" dir="ltr">StreetViewPov</code> object defines two properties: <ul> <li><code translate="no" dir="ltr">heading</code> (default <code translate="no" dir="ltr">0</code>) defines the rotation angle around the camera locus in degrees relative from true north. Headings are measured clockwise (90 degrees is true east).</li> <li><code translate="no" dir="ltr">pitch</code> (default <code translate="no" dir="ltr">0</code>) defines the angle variance "up" or "down" from the camera's initial default pitch, which is often (but not always) flat horizontal. (For example, an image taken on a hill will likely exhibit a default pitch that is not horizontal.) Pitch angles are measured with positive values looking up (to +90 degrees straight up and orthogonal to the default pitch) and negative values looking down (to -90 degrees straight down and orthogonal to the default pitch).</li> </ul> The <code translate="no" dir="ltr">StreetViewPov</code> object is most often used to determine the point of view of the Street View camera. You can also determine the point-of-view of the photographer — typically the direction the <a href="https://maps.google.com/help/maps/streetview/learn/cars-trikes-and-more.html">car or trike</a> was facing — with the <code translate="no" dir="ltr">StreetViewPanorama.getPhotographerPov()</code> method. The following code displays a map of Boston with an initial view of Fenway Park. Selecting the Pegman and dragging it to a supported location on the map will change the Street View panorama: <div id="maps_streetview_simple-code-sample"> <div class="ds-selector-tabs"> <section> <h3 id="maps_streetview_simple-typescript" track-type="sampleTabNav" track-name="typescript" track-metadata-position="maps_streetview_simple" data-text="TypeScript" tabindex="-1">TypeScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/samples/streetview-simple/index.ts" data-git-revision="main" data-region-tag="maps_streetview_simple" data-scope="maps_streetview_simple" data-copy-event-label="maps_streetview_simple-typescript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="TypeScript">function initialize() { const fenway = { lat: 42.345573, lng: -71.098326 }; const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: fenway, zoom: 14, } ); const panorama = new google.maps.StreetViewPanorama( document.getElementById("pano") as HTMLElement, { position: fenway, pov: { heading: 34, pitch: 10, }, } ); map.setStreetView(panorama); } declare global { interface Window { initialize: () => void; } } window.initialize = initialize;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/samples/streetview-simple/index.ts#L8-L36" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/samples/streetview-simple/index.ts#maps_streetview_simple" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/samples/streetview-simple/index.ts" data-region-tag="maps_streetview_simple">index.ts</a></div></pre></devsite-code> <aside class="note"> Note: Read the <a href="/maps/documentation/javascript/using-typescript">guide</a> on using TypeScript and Google Maps. </aside> </section> <section> <h3 id="maps_streetview_simple-javascript" track-type="sampleTabNav" track-name="javascript" track-metadata-position="maps_streetview_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/streetview-simple/docs/index.js" data-git-revision="main" data-region-tag="maps_streetview_simple" data-scope="maps_streetview_simple" data-copy-event-label="maps_streetview_simple-javascript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript">function initialize() { const fenway = { lat: 42.345573, lng: -71.098326 }; const map = new google.maps.Map(document.getElementById("map"), { center: fenway, zoom: 14, }); const panorama = new google.maps.StreetViewPanorama( document.getElementById("pano"), { position: fenway, pov: { heading: 34, pitch: 10, }, }, ); map.setStreetView(panorama); } window.initialize = initialize;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-simple/docs/index.js#L7-L27" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-simple/docs/index.js#maps_streetview_simple" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-simple/docs/index.js" data-region-tag="maps_streetview_simple">index.js</a></div></pre></devsite-code> <aside class="note"> Note: The JavaScript is compiled from the TypeScript snippet. </aside> </section> <section> <h3 id="maps_streetview_simple-css" track-type="sampleTabNav" track-name="css" track-metadata-position="maps_streetview_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/streetview-simple/docs/style.css" data-git-revision="main" data-region-tag="maps_streetview_simple" data-scope="maps_streetview_simple" data-copy-event-label="maps_streetview_simple-css" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="CSS">html, body { height: 100%; margin: 0; padding: 0; } #map, #pano { float: left; height: 100%; width: 50%; } <div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-simple/docs/style.css#L7-L20" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-simple/docs/style.css#maps_streetview_simple" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-simple/docs/style.css" data-region-tag="maps_streetview_simple">style.css</a></div></pre></devsite-code> </section> <section> <h3 id="maps_streetview_simple-html" track-type="sampleTabNav" track-name="html" track-metadata-position="maps_streetview_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/streetview-simple/docs/index.html" data-git-revision="main" data-region-tag="maps_streetview_simple" data-scope="maps_streetview_simple" data-copy-event-label="maps_streetview_simple-html" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="HTML"><html> <head> <title>Street View split-map-panes</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <div id="pano"></div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly" defer ></script> </body> </html><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-simple/docs/index.html#L8-L31" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-simple/docs/index.html#maps_streetview_simple" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-simple/docs/index.html" data-region-tag="maps_streetview_simple">index.html</a></div></pre></devsite-code> </section> </div> <a class="button button-primary" href="/maps/documentation/javascript/examples/streetview-simple">View example</a> <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="streetview-simple" data-action="open-sample-in-jsfiddle" href="https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/streetview-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="streetview-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-streetview-simple&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=." class="button button-primary">Google Cloud Shell</a> </div> </div> <h2 id="motion-tracking" data-text="Motion tracking on mobile devices" tabindex="-1">Motion tracking on mobile devices</h2> On devices that support device orientation events, the API offers users the ability to change the Street View point of view based on the movement of the device. Users can look around by moving their devices. This is called motion tracking or device rotation tracking. As app developer, you can change the default behavior as follows: <ul> <li>Enable or disable the motion tracking functionality. By default, motion tracking is enabled on any device that supports it. The following sample disables motion tracking, but leaves the motion tracking control visible. (Note that the user can turn on motion tracking by tapping the control.) <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript">var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), { position: {lat: 37.869260, lng: -122.254811}, pov: {heading: 165, pitch: 0}, motionTracking: false });</pre></devsite-code> </li> <li> Hide or show the motion tracking control. By default, the control is shown on devices that support motion tracking. The user can tap the control to turn motion tracking on or off. Note that the control will never appear if the device doesn't support motion tracking, regardless of the value of <code translate="no" dir="ltr">motionTrackingControl</code>. The following sample disables both motion tracking and the motion tracking control. In this case, the user can't turn motion tracking on: <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript">var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), { position: {lat: 37.869260, lng: -122.254811}, pov: {heading: 165, pitch: 0}, motionTracking: false, motionTrackingControl: false });</pre></devsite-code> </li> <li>Change the default position of the motion tracking control. By default, the control appears near the bottom right of the panorama (position <code translate="no" dir="ltr">RIGHT_BOTTOM</code>). The following sample sets the position of the control to left bottom: <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript">var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), { position: {lat: 37.869260, lng: -122.254811}, pov: {heading: 165, pitch: 0}, motionTrackingControlOptions: { position: google.maps.ControlPosition.LEFT_BOTTOM } });</pre></devsite-code> </li> </ul> To see motion tracking in action, view the following sample on a mobile device (or any device that supports device orientation events): <devsite-iframe style="height: 400px"> <iframe src="https://geo-devrel-javascript-samples.web.app/samples/streetview-embed/app/dist/" allow="fullscreen; "></iframe> </devsite-iframe> <a class="button button-primary" href="/maps/documentation/javascript/examples/streetview-embed">View example</a> <h2 id="StreetViewOverlays" data-text="Overlays within Street View" tabindex="-1">Overlays within Street View</h2> The default <code translate="no" dir="ltr">StreetViewPanorama</code> object supports the native display of map <a href="/maps/documentation/javascript/overlays">overlays</a>. Overlays generally appear at "street level" anchored at <code translate="no" dir="ltr">LatLng</code> positions. (Markers will appear with their tails anchored to the location's horizontal plane within the Street View panorama for example.) Currently, the types of overlays which are supported on Street View panoramas are limited to <code translate="no" dir="ltr">Marker</code>s, <code translate="no" dir="ltr">InfoWindow</code>s and custom <code translate="no" dir="ltr">OverlayView</code>s. Overlays which you display on a map may be displayed on a Street View panorama by treating the panorama as a substitute for the <code translate="no" dir="ltr">Map</code> object, calling <code translate="no" dir="ltr">setMap()</code> and passing the <code translate="no" dir="ltr">StreetViewPanorama</code> as an argument instead of a map. Info windows similarly may be opened within a Street View panorama by calling <code translate="no" dir="ltr">open()</code>, passing the <code translate="no" dir="ltr">StreetViewPanorama()</code> instead of a map. Additionally, when creating a map with a default <code translate="no" dir="ltr">StreetViewPanorama</code>, any markers created on a map are shared automatically with the map's associated Street View panorama, provided that panorama is visible. To retrieve the default Street View panorama, call <code translate="no" dir="ltr">getStreetView()</code> on the <code translate="no" dir="ltr">Map</code> object. Note that if you explicitly set the map's <code translate="no" dir="ltr">streetView</code> property to a <code translate="no" dir="ltr">StreetViewPanorama</code> of your own construction, you will override the default panorama. The following example shows markers denoting various locations around Astor Place, New York City. Toggle the display to Street View to show the shared markers displaying within the <code translate="no" dir="ltr">StreetViewPanorama</code>. <div id="maps_streetview_overlays-code-sample"> <div class="ds-selector-tabs"> <section> <h3 id="maps_streetview_overlays-typescript" track-type="sampleTabNav" track-name="typescript" track-metadata-position="maps_streetview_overlays" data-text="TypeScript" tabindex="-1">TypeScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/samples/streetview-overlays/index.ts" data-git-revision="main" data-region-tag="maps_streetview_overlays" data-scope="maps_streetview_overlays" data-copy-event-label="maps_streetview_overlays-typescript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="TypeScript">let panorama: google.maps.StreetViewPanorama; function initMap(): void { const astorPlace = { lat: 40.729884, lng: -73.990988 }; // Set up the map const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: astorPlace, zoom: 18, streetViewControl: false, } ); document .getElementById("toggle")! .addEventListener("click", toggleStreetView); const cafeIcon = document.createElement("img"); cafeIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg"; const dollarIcon = document.createElement("img"); dollarIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg"; const busIcon = document.createElement("img"); busIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg"; // Set up the markers on the map const cafeMarker = new google.maps.Marker({ position: { lat: 40.730031, lng: -73.991428 }, map, title: "Cafe", icon: cafeIcon.src, }); const bankMarker = new google.maps.Marker({ position: { lat: 40.729681, lng: -73.991138 }, map, title: "Bank", icon: dollarIcon.src, }); const busMarker = new google.maps.Marker({ position: { lat: 40.729559, lng: -73.990741 }, map, title: "Bus Stop", icon: busIcon.src, }); // We get the map's default panorama and set up some defaults. // Note that we don't yet set it visible. panorama = map.getStreetView()!; // TODO fix type panorama.setPosition(astorPlace); panorama.setPov( /** @type {google.maps.StreetViewPov} */ { heading: 265, pitch: 0, } ); } function toggleStreetView(): void { const toggle = panorama.getVisible(); if (toggle == false) { panorama.setVisible(true); } else { panorama.setVisible(false); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/samples/streetview-overlays/index.ts#L8-L86" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/samples/streetview-overlays/index.ts#maps_streetview_overlays" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/samples/streetview-overlays/index.ts" data-region-tag="maps_streetview_overlays">index.ts</a></div></pre></devsite-code> <aside class="note"> Note: Read the <a href="/maps/documentation/javascript/using-typescript">guide</a> on using TypeScript and Google Maps. </aside> </section> <section> <h3 id="maps_streetview_overlays-javascript" track-type="sampleTabNav" track-name="javascript" track-metadata-position="maps_streetview_overlays" data-text="JavaScript" tabindex="-1">JavaScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-overlays/docs/index.js" data-git-revision="main" data-region-tag="maps_streetview_overlays" data-scope="maps_streetview_overlays" data-copy-event-label="maps_streetview_overlays-javascript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript">let panorama; function initMap() { const astorPlace = { lat: 40.729884, lng: -73.990988 }; // Set up the map const map = new google.maps.Map(document.getElementById("map"), { center: astorPlace, zoom: 18, streetViewControl: false, }); document.getElementById("toggle").addEventListener("click", toggleStreetView); const cafeIcon = document.createElement("img"); cafeIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg"; const dollarIcon = document.createElement("img"); dollarIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg"; const busIcon = document.createElement("img"); busIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg"; // Set up the markers on the map const cafeMarker = new google.maps.Marker({ position: { lat: 40.730031, lng: -73.991428 }, map, title: "Cafe", icon: cafeIcon.src, }); const bankMarker = new google.maps.Marker({ position: { lat: 40.729681, lng: -73.991138 }, map, title: "Bank", icon: dollarIcon.src, }); const busMarker = new google.maps.Marker({ position: { lat: 40.729559, lng: -73.990741 }, map, title: "Bus Stop", icon: busIcon.src, }); // We get the map's default panorama and set up some defaults. // Note that we don't yet set it visible. panorama = map.getStreetView(); // TODO fix type panorama.setPosition(astorPlace); panorama.setPov( /** @type {google.maps.StreetViewPov} */ { heading: 265, pitch: 0, }, ); } function toggleStreetView() { const toggle = panorama.getVisible(); if (toggle == false) { panorama.setVisible(true); } else { panorama.setVisible(false); } } window.initMap = initMap;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-overlays/docs/index.js#L7-L77" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-overlays/docs/index.js#maps_streetview_overlays" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-overlays/docs/index.js" data-region-tag="maps_streetview_overlays">index.js</a></div></pre></devsite-code> <aside class="note"> Note: The JavaScript is compiled from the TypeScript snippet. </aside> </section> <section> <h3 id="maps_streetview_overlays-css" track-type="sampleTabNav" track-name="css" track-metadata-position="maps_streetview_overlays" data-text="CSS" tabindex="-1">CSS</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-overlays/docs/style.css" data-git-revision="main" data-region-tag="maps_streetview_overlays" data-scope="maps_streetview_overlays" data-copy-event-label="maps_streetview_overlays-css" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="CSS">/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: "Roboto", "sans-serif"; line-height: 30px; padding-left: 10px; } #floating-panel { margin-left: -100px; } <div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-overlays/docs/style.css#L7-L42" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-overlays/docs/style.css#maps_streetview_overlays" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-overlays/docs/style.css" data-region-tag="maps_streetview_overlays">style.css</a></div></pre></devsite-code> </section> <section> <h3 id="maps_streetview_overlays-html" track-type="sampleTabNav" track-name="html" track-metadata-position="maps_streetview_overlays" data-text="HTML" tabindex="-1">HTML</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-overlays/docs/index.html" data-git-revision="main" data-region-tag="maps_streetview_overlays" data-scope="maps_streetview_overlays" data-copy-event-label="maps_streetview_overlays-html" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="HTML"><html> <head> <title>Overlays Within Street View</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="floating-panel"> <input type="button" value="Toggle Street View" id="toggle" /> </div> <div id="map"></div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=weekly" defer ></script> </body> </html><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-overlays/docs/index.html#L8-L33" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-overlays/docs/index.html#maps_streetview_overlays" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-overlays/docs/index.html" data-region-tag="maps_streetview_overlays">index.html</a></div></pre></devsite-code> </section> </div> <a class="button button-primary" href="/maps/documentation/javascript/examples/streetview-overlays">View example</a> <h3 id="try-sample_1" 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="streetview-overlays" data-action="open-sample-in-jsfiddle" href="https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/streetview-overlays/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="streetview-overlays" 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-streetview-overlays&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=." class="button button-primary">Google Cloud Shell</a> </div> </div> <h2 id="StreetViewEvents" data-text="Street View Events" tabindex="-1">Street View Events</h2> When navigating between Street View or manipulating its orientation, you may wish to monitor several events that indicate changes to the <code translate="no" dir="ltr">StreetViewPanorama</code>'s state: <ul> <li><code translate="no" dir="ltr">pano_changed</code> fires whenever the individual pano ID changes. This event does not guarantee that any associated data within the panorama (such as the links) has also changed by the time this event is triggered; this event only indicates that a pano ID has changed. Note that the pano ID (which you can use to reference this panorama) is only stable within the current browser session.</li> <li><code translate="no" dir="ltr">position_changed</code> fires whenever the underlying (<code translate="no" dir="ltr">LatLng</code>) position of the panorama changes. Rotating a panorama will not trigger this event. Note that you could change a panorama's underlying position without changing the associated pano ID, since the API will automatically associate the nearest pano ID to the panorama's position.</li> <li><code translate="no" dir="ltr">pov_changed</code> fires whenever the Street View's <code translate="no" dir="ltr">StreetViewPov</code> changes. Note that this event may fire while the position, and pano ID, remain stable.</li> <li><code translate="no" dir="ltr">links_changed</code> fires whenever the Street View's links change. Note that this event may fire asynchronously after a change in the pano ID indicated through <code translate="no" dir="ltr">pano_changed</code>.</li> <li><code translate="no" dir="ltr">visible_changed</code> fires whenever the Street View's visibility changes. Note that this event may fire asynchronously after a change in the pano ID indicated through <code translate="no" dir="ltr">pano_changed</code>.</li> </ul> The following code illustrates how these events can be handled to collect data about the underlying <code translate="no" dir="ltr">StreetViewPanorama</code>: <div id="maps_streetview_events-code-sample"> <div class="ds-selector-tabs"> <section> <h3 id="maps_streetview_events-typescript" track-type="sampleTabNav" track-name="typescript" track-metadata-position="maps_streetview_events" data-text="TypeScript" tabindex="-1">TypeScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/samples/streetview-events/index.ts" data-git-revision="main" data-region-tag="maps_streetview_events" data-scope="maps_streetview_events" data-copy-event-label="maps_streetview_events-typescript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="TypeScript">function initPano() { const panorama = new google.maps.StreetViewPanorama( document.getElementById("pano") as HTMLElement, { position: { lat: 37.869, lng: -122.255 }, pov: { heading: 270, pitch: 0, }, visible: true, } ); panorama.addListener("pano_changed", () => { const panoCell = document.getElementById("pano-cell") as HTMLElement; panoCell.innerHTML = panorama.getPano(); }); panorama.addListener("links_changed", () => { const linksTable = document.getElementById("links_table") as HTMLElement; while (linksTable.hasChildNodes()) { linksTable.removeChild(linksTable.lastChild as ChildNode); } const links = panorama.getLinks(); for (const i in links) { const row = document.createElement("tr"); linksTable.appendChild(row); const labelCell = document.createElement("td"); labelCell.innerHTML = "Link: " + i + ""; const valueCell = document.createElement("td"); valueCell.innerHTML = links[i].description as string; linksTable.appendChild(labelCell); linksTable.appendChild(valueCell); } }); panorama.addListener("position_changed", () => { const positionCell = document.getElementById( "position-cell" ) as HTMLElement; (positionCell.firstChild as HTMLElement).nodeValue = panorama.getPosition() + ""; }); panorama.addListener("pov_changed", () => { const headingCell = document.getElementById("heading-cell") as HTMLElement; const pitchCell = document.getElementById("pitch-cell") as HTMLElement; (headingCell.firstChild as HTMLElement).nodeValue = panorama.getPov().heading + ""; (pitchCell.firstChild as HTMLElement).nodeValue = panorama.getPov().pitch + ""; }); } declare global { interface Window { initPano: () => void; } } window.initPano = initPano;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/samples/streetview-events/index.ts#L8-L78" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/samples/streetview-events/index.ts#maps_streetview_events" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/samples/streetview-events/index.ts" data-region-tag="maps_streetview_events">index.ts</a></div></pre></devsite-code> <aside class="note"> Note: Read the <a href="/maps/documentation/javascript/using-typescript">guide</a> on using TypeScript and Google Maps. </aside> </section> <section> <h3 id="maps_streetview_events-javascript" track-type="sampleTabNav" track-name="javascript" track-metadata-position="maps_streetview_events" data-text="JavaScript" tabindex="-1">JavaScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-events/docs/index.js" data-git-revision="main" data-region-tag="maps_streetview_events" data-scope="maps_streetview_events" data-copy-event-label="maps_streetview_events-javascript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript">function initPano() { const panorama = new google.maps.StreetViewPanorama( document.getElementById("pano"), { position: { lat: 37.869, lng: -122.255 }, pov: { heading: 270, pitch: 0, }, visible: true, }, ); panorama.addListener("pano_changed", () => { const panoCell = document.getElementById("pano-cell"); panoCell.innerHTML = panorama.getPano(); }); panorama.addListener("links_changed", () => { const linksTable = document.getElementById("links_table"); while (linksTable.hasChildNodes()) { linksTable.removeChild(linksTable.lastChild); } const links = panorama.getLinks(); for (const i in links) { const row = document.createElement("tr"); linksTable.appendChild(row); const labelCell = document.createElement("td"); labelCell.innerHTML = "Link: " + i + ""; const valueCell = document.createElement("td"); valueCell.innerHTML = links[i].description; linksTable.appendChild(labelCell); linksTable.appendChild(valueCell); } }); panorama.addListener("position_changed", () => { const positionCell = document.getElementById("position-cell"); positionCell.firstChild.nodeValue = panorama.getPosition() + ""; }); panorama.addListener("pov_changed", () => { const headingCell = document.getElementById("heading-cell"); const pitchCell = document.getElementById("pitch-cell"); headingCell.firstChild.nodeValue = panorama.getPov().heading + ""; pitchCell.firstChild.nodeValue = panorama.getPov().pitch + ""; }); } window.initPano = initPano;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-events/docs/index.js#L7-L64" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-events/docs/index.js#maps_streetview_events" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-events/docs/index.js" data-region-tag="maps_streetview_events">index.js</a></div></pre></devsite-code> <aside class="note"> Note: The JavaScript is compiled from the TypeScript snippet. </aside> </section> <section> <h3 id="maps_streetview_events-css" track-type="sampleTabNav" track-name="css" track-metadata-position="maps_streetview_events" data-text="CSS" tabindex="-1">CSS</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-events/docs/style.css" data-git-revision="main" data-region-tag="maps_streetview_events" data-scope="maps_streetview_events" data-copy-event-label="maps_streetview_events-css" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="CSS">/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: "Roboto", "sans-serif"; line-height: 30px; padding-left: 10px; } #pano { width: 50%; height: 100%; float: left; } #floating-panel { width: 45%; height: 100%; float: right; text-align: left; overflow: auto; position: static; border: 0px solid #999; } <div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-events/docs/style.css#L7-L54" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-events/docs/style.css#maps_streetview_events" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-events/docs/style.css" data-region-tag="maps_streetview_events">style.css</a></div></pre></devsite-code> </section> <section> <h3 id="maps_streetview_events-html" track-type="sampleTabNav" track-name="html" track-metadata-position="maps_streetview_events" data-text="HTML" tabindex="-1">HTML</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-events/docs/index.html" data-git-revision="main" data-region-tag="maps_streetview_events" data-scope="maps_streetview_events" data-copy-event-label="maps_streetview_events-html" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="HTML"><html> <head> <title>Street View Events</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="pano"></div> <div id="floating-panel"> <table> <tr> <td>Position</td> <td id="position-cell">&nbsp;</td> </tr> <tr> <td>POV Heading</td> <td id="heading-cell">270</td> </tr> <tr> <td>POV Pitch</td> <td id="pitch-cell">0.0</td> </tr> <tr> <td>Pano ID</td> <td id="pano-cell">&nbsp;</td> </tr> <table id="links_table"></table> </table> </div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly" defer ></script> </body> </html><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-events/docs/index.html#L8-L51" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-events/docs/index.html#maps_streetview_events" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-events/docs/index.html" data-region-tag="maps_streetview_events">index.html</a></div></pre></devsite-code> </section> </div> <a class="button button-primary" href="/maps/documentation/javascript/examples/streetview-events">View example</a> <h3 id="try-sample_2" 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="streetview-events" data-action="open-sample-in-jsfiddle" href="https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/streetview-events/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="streetview-events" 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-streetview-events&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=." class="button button-primary">Google Cloud Shell</a> </div> </div> <h2 id="StreetViewControls" data-text="Street View Controls" tabindex="-1">Street View Controls</h2> When displaying a <code translate="no" dir="ltr">StreetViewPanorama</code>, a variety of controls appear on the panorama by default. You can enable or disable these controls by setting their appropriate fields within the <a href="/maps/documentation/javascript/3.exp/reference#StreetViewPanoramaOptions"><code translate="no" dir="ltr">StreetViewPanoramaOptions</code></a> to <code translate="no" dir="ltr">true</code> or <code translate="no" dir="ltr">false</code>: <ul> <li>A <code translate="no" dir="ltr">panControl</code> provides a way to rotate the panorama. This control appears by default as a standard integrated compass and pan control. You may alter the control's position by providing <code translate="no" dir="ltr">PanControlOptions</code> within the <code translate="no" dir="ltr">panControlOptions</code> field.</li> <li>A <code translate="no" dir="ltr">zoomControl</code> provides a way to zoom within the image. This control appears by default near the bottom right of the panorama. You can alter the control's appearance by providing <code translate="no" dir="ltr">ZoomControlOptions</code> within the <code translate="no" dir="ltr">zoomControlOptions</code> field.</li> <li>An <code translate="no" dir="ltr">addressControl</code> provides a textual overlay indicating the address of the associated location, and offers a link to open the location in Google Maps. You can alter the control's appearance by providing <code translate="no" dir="ltr">StreetViewAddressControlOptions</code> within the <code translate="no" dir="ltr">addressControlOptions</code> field.</li> <li>A <code translate="no" dir="ltr">fullscreenControl</code> offers the option to open Street View in fullscreen mode. You can alter the control's appearance by providing <code translate="no" dir="ltr">FullscreenControlOptions</code> within the <code translate="no" dir="ltr">fullscreenControlOptions</code> field.</li> <li>A <code translate="no" dir="ltr">motionTrackingControl</code> offers the option to enable or disable motion tracking on mobile devices. This control appears only on devices that support device orientation events. By default, the control appears near the bottom right of the panorama. You can alter the control's position by providing <code translate="no" dir="ltr">MotionTrackingControlOptions</code>. For more information, see the section on <a href="#motion-tracking">motion tracking</a>.</li> <li>A <code translate="no" dir="ltr">linksControl</code> provides guide arrows on the image for traveling to adjacent panorama images.</li> <li>A Close control allows the user to close the Street View viewer. You can enable or disable the Close control by setting <code translate="no" dir="ltr">enableCloseButton</code> to <code translate="no" dir="ltr">true</code> or <code translate="no" dir="ltr">false</code>. </ul> The following example alters the controls displayed within the associated Street View and removes the view's links: <div id="maps_streetview_controls-code-sample"> <div class="ds-selector-tabs"> <section> <h3 id="maps_streetview_controls-typescript" track-type="sampleTabNav" track-name="typescript" track-metadata-position="maps_streetview_controls" data-text="TypeScript" tabindex="-1">TypeScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/samples/streetview-controls/index.ts" data-git-revision="main" data-region-tag="maps_streetview_controls" data-scope="maps_streetview_controls" data-copy-event-label="maps_streetview_controls-typescript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="TypeScript">function initPano() { // Note: constructed panorama objects have visible: true // set by default. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map") as HTMLElement, { position: { lat: 42.345573, lng: -71.098326 }, addressControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER, }, linksControl: false, panControl: false, enableCloseButton: false, } ); } declare global { interface Window { initPano: () => void; } } window.initPano = initPano;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/samples/streetview-controls/index.ts#L8-L30" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/samples/streetview-controls/index.ts#maps_streetview_controls" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/samples/streetview-controls/index.ts" data-region-tag="maps_streetview_controls">index.ts</a></div></pre></devsite-code> <aside class="note"> Note: Read the <a href="/maps/documentation/javascript/using-typescript">guide</a> on using TypeScript and Google Maps. </aside> </section> <section> <h3 id="maps_streetview_controls-javascript" track-type="sampleTabNav" track-name="javascript" track-metadata-position="maps_streetview_controls" data-text="JavaScript" tabindex="-1">JavaScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-controls/docs/index.js" data-git-revision="main" data-region-tag="maps_streetview_controls" data-scope="maps_streetview_controls" data-copy-event-label="maps_streetview_controls-javascript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript">function initPano() { // Note: constructed panorama objects have visible: true // set by default. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map"), { position: { lat: 42.345573, lng: -71.098326 }, addressControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER, }, linksControl: false, panControl: false, enableCloseButton: false, }, ); } window.initPano = initPano;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-controls/docs/index.js#L7-L24" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-controls/docs/index.js#maps_streetview_controls" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-controls/docs/index.js" data-region-tag="maps_streetview_controls">index.js</a></div></pre></devsite-code> <aside class="note"> Note: The JavaScript is compiled from the TypeScript snippet. </aside> </section> <section> <h3 id="maps_streetview_controls-css" track-type="sampleTabNav" track-name="css" track-metadata-position="maps_streetview_controls" data-text="CSS" tabindex="-1">CSS</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-controls/docs/style.css" data-git-revision="main" data-region-tag="maps_streetview_controls" data-scope="maps_streetview_controls" data-copy-event-label="maps_streetview_controls-css" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="CSS">/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } <div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-controls/docs/style.css#L7-L24" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-controls/docs/style.css#maps_streetview_controls" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-controls/docs/style.css" data-region-tag="maps_streetview_controls">style.css</a></div></pre></devsite-code> </section> <section> <h3 id="maps_streetview_controls-html" track-type="sampleTabNav" track-name="html" track-metadata-position="maps_streetview_controls" data-text="HTML" tabindex="-1">HTML</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-controls/docs/index.html" data-git-revision="main" data-region-tag="maps_streetview_controls" data-scope="maps_streetview_controls" data-copy-event-label="maps_streetview_controls-html" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="HTML"><html> <head> <title>Street View Controls</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly" defer ></script> </body> </html><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-controls/docs/index.html#L8-L30" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-controls/docs/index.html#maps_streetview_controls" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-controls/docs/index.html" data-region-tag="maps_streetview_controls">index.html</a></div></pre></devsite-code> </section> </div> <a class="button button-primary" href="/maps/documentation/javascript/examples/streetview-controls">View example</a> <h3 id="try-sample_3" 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="streetview-controls" data-action="open-sample-in-jsfiddle" href="https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/streetview-controls/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="streetview-controls" 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-streetview-controls&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=." class="button button-primary">Google Cloud Shell</a> </div> </div> <h2 id="StreetViewService" data-text="Directly Accessing Street View Data" tabindex="-1">Directly Accessing Street View Data</h2> You may wish to programmatically determine the availability of Street View data, or return information about particular panoramas, without requiring direct manipulation of a map/panorama. You may do so using the <code translate="no" dir="ltr">StreetViewService</code> object, which provides an interface to the data stored in Google's Street View service. <h3 id="StreetViewServiceRequests" data-text="Street View Service Requests" tabindex="-1">Street View Service Requests</h3> Accessing the Street View service is asynchronous, since the Google Maps API needs to make a call to an external server. For that reason, you need to pass a callback method to execute upon completion of the request. This callback method processes the result. You can initiate requests to the <code translate="no" dir="ltr">StreetViewService</code> using <code translate="no" dir="ltr">StreetViewPanoRequest</code> or <code translate="no" dir="ltr">StreetViewLocationRequest</code>. A request using <code translate="no" dir="ltr">StreetViewPanoRequest</code> returns panorama data given a reference ID which uniquely identifies the panorama. Note that these reference IDs are only stable for the lifetime of the imagery of that panorama. A request using <code translate="no" dir="ltr">StreetViewLocationRequest</code> searches for panorama data at a specified location, using the following parameters: <ul> <li><code translate="no" dir="ltr">location</code> specifies the location (latitude and longitude) to search for a panorama.</li> <li><code translate="no" dir="ltr">preference</code> sets a preference for which panorama should be found within the radius: the one nearest to the provided location, or the best one within the radius.</li> <li><code translate="no" dir="ltr">radius</code> sets a radius, specified in meters, in which to search for a panorama, centered on the given latitude and longitude. Defaults to 50 when not supplied.</li> <li><code translate="no" dir="ltr">source</code> specifies the source of panoramas to search. Valid values are: <ul> <li><code translate="no" dir="ltr">default</code> uses the default sources for Street View; searches are not limited to specific sources.</li> <li><code translate="no" dir="ltr">outdoor</code> limits searches to outdoor collections. Note that outdoor panoramas may not exist for the specified location.</li> </ul> </li> </ul> <h3 id="StreetViewServiceResponses" data-text="Street View Service Responses" tabindex="-1">Street View Service Responses</h3> The function <code translate="no" dir="ltr">getPanorama()</code> needs a callback function to execute upon retrieval of a result from the Street View service. This callback function returns a set of panorama data within a <code translate="no" dir="ltr">StreetViewPanoramaData</code> object and a <code translate="no" dir="ltr">StreetViewStatus</code> code denoting the status of the request, in that order. A <code translate="no" dir="ltr">StreetViewPanoramaData</code> object specification contains meta-data about a Street View panorama of the following form: <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript">{ "location": { "latLng": LatLng, "description": string, "pano": string }, "copyright": string, "links": [{ "heading": number, "description": string, "pano": string, "roadColor": string, "roadOpacity": number }], "tiles": { "worldSize": Size, "tileSize": Size, "centerHeading": number } }</pre></devsite-code> Note that this data object is not a <code translate="no" dir="ltr">StreetViewPanorama</code> object itself. To create a Street View object using this data, you would need to create a <code translate="no" dir="ltr">StreetViewPanorama</code> and call <code translate="no" dir="ltr">setPano()</code>, passing it the ID as noted in the returned <code translate="no" dir="ltr">location.pano</code> field. The <code translate="no" dir="ltr">status</code> code may return one of the following values: <ul> <li><code translate="no" dir="ltr">OK</code> indicates that the service found a matching panorama.</li> <li><code translate="no" dir="ltr">ZERO_RESULTS</code> indicates that the service could not find a matching panorama with the passed criteria.</li> <li><code translate="no" dir="ltr">UNKNOWN_ERROR</code> indicates that a Street View request could not be processed, though the exact reason is unknown.</li> </ul> The following code creates a <code translate="no" dir="ltr">StreetViewService</code> that responds to user clicks on a map by creating markers which, when clicked, display a <code translate="no" dir="ltr">StreetViewPanorama</code> of that location. The code uses the contents of <code translate="no" dir="ltr">StreetViewPanoramaData</code> returned from the service. <div id="maps_streetview_service-code-sample"> <div class="ds-selector-tabs"> <section> <h3 id="maps_streetview_service-typescript" track-type="sampleTabNav" track-name="typescript" track-metadata-position="maps_streetview_service" data-text="TypeScript" tabindex="-1">TypeScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/samples/streetview-service/index.ts" data-git-revision="main" data-region-tag="maps_streetview_service" data-scope="maps_streetview_service" data-copy-event-label="maps_streetview_service-typescript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="TypeScript">/* * Click the map to set a new location for the Street View camera. */ let map: google.maps.Map; let panorama: google.maps.StreetViewPanorama; function initMap(): void { const berkeley = { lat: 37.869085, lng: -122.254775 }; const sv = new google.maps.StreetViewService(); panorama = new google.maps.StreetViewPanorama( document.getElementById("pano") as HTMLElement ); // Set up the map. map = new google.maps.Map(document.getElementById("map") as HTMLElement, { center: berkeley, zoom: 16, streetViewControl: false, }); // Set the initial Street View camera to the center of the map sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData); // Look for a nearby Street View panorama when the map is clicked. // getPanorama will return the nearest pano when the given // radius is 50 meters or less. map.addListener("click", (event) => { sv.getPanorama({ location: event.latLng, radius: 50 }) .then(processSVData) .catch((e) => console.error("Street View data not found for this location.") ); }); } function processSVData({ data }: google.maps.StreetViewResponse) { const location = data.location!; const marker = new google.maps.Marker({ position: location.latLng, map, title: location.description, }); panorama.setPano(location.pano as string); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); marker.addListener("click", () => { const markerPanoID = location.pano; // Set the Pano to use the passed panoID. panorama.setPano(markerPanoID as string); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/samples/streetview-service/index.ts#L8-L80" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/samples/streetview-service/index.ts#maps_streetview_service" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/samples/streetview-service/index.ts" data-region-tag="maps_streetview_service">index.ts</a></div></pre></devsite-code> <aside class="note"> Note: Read the <a href="/maps/documentation/javascript/using-typescript">guide</a> on using TypeScript and Google Maps. </aside> </section> <section> <h3 id="maps_streetview_service-javascript" track-type="sampleTabNav" track-name="javascript" track-metadata-position="maps_streetview_service" data-text="JavaScript" tabindex="-1">JavaScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-service/docs/index.js" data-git-revision="main" data-region-tag="maps_streetview_service" data-scope="maps_streetview_service" data-copy-event-label="maps_streetview_service-javascript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript">/* * Click the map to set a new location for the Street View camera. */ let map; let panorama; function initMap() { const berkeley = { lat: 37.869085, lng: -122.254775 }; const sv = new google.maps.StreetViewService(); panorama = new google.maps.StreetViewPanorama( document.getElementById("pano"), ); // Set up the map. map = new google.maps.Map(document.getElementById("map"), { center: berkeley, zoom: 16, streetViewControl: false, }); // Set the initial Street View camera to the center of the map sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData); // Look for a nearby Street View panorama when the map is clicked. // getPanorama will return the nearest pano when the given // radius is 50 meters or less. map.addListener("click", (event) => { sv.getPanorama({ location: event.latLng, radius: 50 }) .then(processSVData) .catch((e) => console.error("Street View data not found for this location."), ); }); } function processSVData({ data }) { const location = data.location; const marker = new google.maps.Marker({ position: location.latLng, map, title: location.description, }); panorama.setPano(location.pano); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); marker.addListener("click", () => { const markerPanoID = location.pano; // Set the Pano to use the passed panoID. panorama.setPano(markerPanoID); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); }); } window.initMap = initMap;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-service/docs/index.js#L7-L67" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-service/docs/index.js#maps_streetview_service" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-service/docs/index.js" data-region-tag="maps_streetview_service">index.js</a></div></pre></devsite-code> <aside class="note"> Note: The JavaScript is compiled from the TypeScript snippet. </aside> </section> <section> <h3 id="maps_streetview_service-css" track-type="sampleTabNav" track-name="css" track-metadata-position="maps_streetview_service" data-text="CSS" tabindex="-1">CSS</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-service/docs/style.css" data-git-revision="main" data-region-tag="maps_streetview_service" data-scope="maps_streetview_service" data-copy-event-label="maps_streetview_service-css" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="CSS">/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } <div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-service/docs/style.css#L7-L24" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-service/docs/style.css#maps_streetview_service" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-service/docs/style.css" data-region-tag="maps_streetview_service">style.css</a></div></pre></devsite-code> </section> <section> <h3 id="maps_streetview_service-html" track-type="sampleTabNav" track-name="html" track-metadata-position="maps_streetview_service" data-text="HTML" tabindex="-1">HTML</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-service/docs/index.html" data-git-revision="main" data-region-tag="maps_streetview_service" data-scope="maps_streetview_service" data-copy-event-label="maps_streetview_service-html" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="HTML"><html> <head> <title>Directly Accessing Street View Data</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map" style="width: 45%; height: 100%; float: left"></div> <div id="pano" style="width: 45%; height: 100%; float: left"></div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-service/docs/index.html#L8-L31" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-service/docs/index.html#maps_streetview_service" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-service/docs/index.html" data-region-tag="maps_streetview_service">index.html</a></div></pre></devsite-code> </section> </div> <a class="button button-primary" href="/maps/documentation/javascript/examples/streetview-service">View example</a> <h3 id="try-sample_4" 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="streetview-service" data-action="open-sample-in-jsfiddle" href="https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/streetview-service/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="streetview-service" 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-streetview-service&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=." class="button button-primary">Google Cloud Shell</a> </div> </div> <h2 id="CustomStreetView" data-text="Providing Custom Street View Panoramas" tabindex="-1">Providing Custom Street View Panoramas</h2> The Maps JavaScript API supports the display of custom panoramas within the <code translate="no" dir="ltr">StreetViewPanorama</code> object. Using custom panoramas, you can display the interior of buildings, views from scenic locations, or anything from your imagination. You can even link these custom panoramas to Google's existing Street View panoramas. Setting up a set of custom panorama imagery involves the following steps: <ul> <li>Create a base panoramic image for each custom panorama. This base image should be at the highest resolution image with which you wish to serve zoomed in imagery.</li> <li>(Optional, but recommended) Create a set of panoramic tiles at different zoom levels from the basic image.</li> <li>Create links between your custom panoramas.</li> <li>(Optional) Designate "entry" panoramas within Google's existing Street View imagery and customize links to/from the custom set to the standard set.</li> <li>Define metadata for each panorama image within a <code translate="no" dir="ltr">StreetViewPanoramaData</code> object.</li> <li>Implement a method which determines the custom panorama data and images and designate that method as your custom handler within the <code translate="no" dir="ltr">StreetViewPanorama</code> object.</li> </ul> The following sections explain this process. <h3 id="CreatingPanoramas" data-text="Creating Custom Panoramas" tabindex="-1">Creating Custom Panoramas</h3> Each Street View panorama is an image or set of images that provides a full 360 degree view from a single location. The <code translate="no" dir="ltr">StreetViewPanorama</code> object uses images that conform to the equirectangular (Plate Carrée) projection. Such a projection contains 360 degrees of horizontal view (a full wrap-around) and 180 degrees of vertical view (from straight up to straight down). These fields of view result in an image with an aspect ratio of 2:1. A full wrap-around panorama is shown below. <img alt="Panorama view of a city street" src="/static/maps/documentation/javascript/images/samplePanorama.png"> Panorama images are generally obtained by taking multiple photos from one position and stitching them together using panorama software. (See Wikipedia's <a href="https://en.wikipedia.org/wiki/Comparison_of_photo_stitching_applications_(software)"> Comparison of photo stitching applications</a> for more information.) Such images should share a single "camera" locus, from which each of the panorama images are taken. The resulting 360 degree panorama can then define a projection on a sphere with the image wrapped to the two-dimensional surface of the sphere. <img alt="Sphere with a panorama view of a street on its surface" src="/static/maps/documentation/javascript/images/panoramaSphere.png"> Treating the panorama as a projection on a sphere with a rectilinear coordinate system is advantageous when dividing up the image into rectilinear tiles, and serving images based on computed tile coordinates. <h3 id="TilingPanoramas" data-text="Creating Custom Panorama Tiles" tabindex="-1">Creating Custom Panorama Tiles</h3> Street View also supports different levels of image detail through the use of a zoom control, which allows you to zoom in and out from the default view. Generally, Street View provides five levels of zoom resolution for any given panorama image. If you were to rely on a single panorama image to serve all zoom levels, such an image would either necessarily be quite large and significantly slow down your application, or be of such poor resolution at higher zoom levels that you would serve a poorly pixellated image. Luckily, however, we can use a similar design pattern used to serve <a href="/maps/documentation/javascript/coordinates#tile-coordinates"> Google's map tiles</a> at different zoom levels to provide appropriate resolution imagery for panoramas at each zoom level. When a <code translate="no" dir="ltr">StreetViewPanorama</code> first loads, by default it displays an image consisting of 25% (90 degrees of arc) of the horizontal breadth of the panorama at zoom level 1. This view corresponds roughly with a normal human field of view. Zooming "out" from this default view essentially provides a wider arc, while zooming in narrows the field of a view to a smaller arc. The <code translate="no" dir="ltr">StreetViewPanorama</code> automatically calculates the appropriate field of view for the selected zoom level, and then selects imagery most appropriate for that resolution by selecting a tile set that roughly matches the dimensions of the horizontal field of view. The following fields of view map to Street View zoom levels: <table> <tr> <th>Street View zoom level</th> <th>Field of View (degrees)</th> </tr> <tr> <td>0</td> <td>180</td> </tr> <tr> <td>1 (default)</td> <td>90</td> </tr><tr> <td>2</td> <td>45</td> </tr><tr> <td>3</td> <td>22.5</td> </tr><tr> <td>4</td> <td>11.25</td> </tr> </table> Note that the size of the image shown within Street View is entirely dependent on the screen size (width) of the Street View container. If you provide a wider container, the service will still provide the same field of view for any given zoom level, though it may select tiles more appropriate for that resolution instead. Because each panorama consists of an equirectangular projection, creating panorama tiles is relatively easy. As the projection provides an image with an aspect ratio of 2:1, tiles with 2:1 ratios are easier to use, though square tiles may provide better performance on square maps (since the field of view will be square). For 2:1 tiles, a single image encompassing the entire panorama represents the entire panorama "world" (the base image) at zoom level 0, with each increasing zoom level offering 4zoomLevel tiles. (E.g. at zoom level 2, the entire panorama consists of 16 tiles.) Note: zoom levels in Street View tiling do not match directly to zoom levels as provided using the Street View control; instead the Street View control zoom levels select a Field of View (FoV), from which appropriate tiles are selected. <img alt="Panorama view of a city street divided into tiles" src="/static/maps/documentation/javascript/images/panoramaTiles.png"> Generally, you will want to name your image tiles so they can be selected programmatically. Such a naming scheme is discussed below in <a href="#CustomPanoramaMethod">Handling Custom Panorama Requests</a>. <h3 id="CustomPanoramaMethod" data-text="Handling Custom Panorama Requests" tabindex="-1">Handling Custom Panorama Requests</h3> To use a custom panorama, call <code translate="no" dir="ltr">StreetViewPanorama.registerPanoProvider()</code>, specifying the name of your custom panorama provider method. The panorama provider method must return a <code translate="no" dir="ltr">StreetViewPanoramaData</code> object, and has the following signature: <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript">Function(pano):StreetViewPanoramaData</pre></devsite-code> A <code translate="no" dir="ltr">StreetViewPanoramaData</code> is an object of the following form: <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript">{ copyright: string, location: { description: string, latLng: google.maps.LatLng, pano: string }, tiles: { tileSize: google.maps.Size, worldSize: google.maps.Size, heading: number, getTileUrl: Function }, links: [ description: string, heading: number, pano: string, roadColor: string, roadOpacity: number ] }</pre></devsite-code> Display a custom panorama as follows: <ul> <li>Set the <a href="/maps/documentation/javascript/3.exp/reference#StreetViewPanoramaOptions"><code translate="no" dir="ltr">StreetViewPanoramaOptions.pano</code></a> property to a custom value.</li> <li>Call <a href="/maps/documentation/javascript/3.exp/reference#StreetViewPanorama"><code translate="no" dir="ltr">StreetViewPanorama.registerPanoProvider()</code></a> to supply a custom panorama provider function.</li> <li>Implement your custom panorama provider function to handle the specified <code translate="no" dir="ltr">pano</code> value.</li> <li>Construct a <a href="/maps/documentation/javascript/3.exp/reference#StreetViewPanoramaData"><code translate="no" dir="ltr">StreetViewPanoramaData</code></a> object.</li> <li>Set the <a href="/maps/documentation/javascript/3.exp/reference#StreetViewTileData"><code translate="no" dir="ltr">StreetViewTileData.getTileUrl</code></a> property to the name of a custom tile provider function that you supply. For example, <code translate="no" dir="ltr">getCustomPanoramaTileUrl</code>.</li> <li>Implement your custom tile provider function, as shown in the samples below.</li> <li>Return the <code translate="no" dir="ltr">StreetViewPanoramaData</code> object.</li> </ul> Note: Do not directly set a <code translate="no" dir="ltr">position</code> on the <code translate="no" dir="ltr">StreetViewPanorama</code> when you wish to display custom panoramas, as such a position will instruct the Street View service to request the default Street View imagery close to that location. Instead, set this position within the custom <code translate="no" dir="ltr">StreetViewPanoramaData</code> object's <code translate="no" dir="ltr">location.latLng</code> field. The following example displays a custom panorama of the Google Sydney office. Note that that this example doesn't use a map or default Street View imagery: <div id="maps_streetview_custom_simple-code-sample"> <div class="ds-selector-tabs"> <section> <h3 id="maps_streetview_custom_simple-typescript" track-type="sampleTabNav" track-name="typescript" track-metadata-position="maps_streetview_custom_simple" data-text="TypeScript" tabindex="-1">TypeScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/samples/streetview-custom-simple/index.ts" data-git-revision="main" data-region-tag="maps_streetview_custom_simple" data-scope="maps_streetview_custom_simple" data-copy-event-label="maps_streetview_custom_simple-typescript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="TypeScript">function initPano() { // Set up Street View and initially set it visible. Register the // custom panorama provider function. Set the StreetView to display // the custom panorama 'reception' which we check for below. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map") as HTMLElement, { pano: "reception", visible: true } ); panorama.registerPanoProvider(getCustomPanorama); } // Return a pano image given the panoID. function getCustomPanoramaTileUrl( pano: string, zoom: number, tileX: number, tileY: number ): string { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); } // Construct the appropriate StreetViewPanoramaData given // the passed pano IDs. function getCustomPanorama(pano: string): google.maps.StreetViewPanoramaData { if (pano === "reception") { return { location: { pano: "reception", description: "Google Sydney - Reception", }, links: [], // The text for the copyright control. copyright: "Imagery (c) 2010 Google", // The definition of the tiles for this panorama. tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), // The heading in degrees at the origin of the panorama // tile set. centerHeading: 105, getTileUrl: getCustomPanoramaTileUrl, }, }; } // @ts-ignore TODO fix typings return null; } declare global { interface Window { initPano: () => void; } } window.initPano = initPano;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/samples/streetview-custom-simple/index.ts#L10-L73" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/samples/streetview-custom-simple/index.ts#maps_streetview_custom_simple" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/samples/streetview-custom-simple/index.ts" data-region-tag="maps_streetview_custom_simple">index.ts</a></div></pre></devsite-code> <aside class="note"> Note: Read the <a href="/maps/documentation/javascript/using-typescript">guide</a> on using TypeScript and Google Maps. </aside> </section> <section> <h3 id="maps_streetview_custom_simple-javascript" track-type="sampleTabNav" track-name="javascript" track-metadata-position="maps_streetview_custom_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/streetview-custom-simple/docs/index.js" data-git-revision="main" data-region-tag="maps_streetview_custom_simple" data-scope="maps_streetview_custom_simple" data-copy-event-label="maps_streetview_custom_simple-javascript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript">function initPano() { // Set up Street View and initially set it visible. Register the // custom panorama provider function. Set the StreetView to display // the custom panorama 'reception' which we check for below. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map"), { pano: "reception", visible: true }, ); panorama.registerPanoProvider(getCustomPanorama); } // Return a pano image given the panoID. function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); } // Construct the appropriate StreetViewPanoramaData given // the passed pano IDs. function getCustomPanorama(pano) { if (pano === "reception") { return { location: { pano: "reception", description: "Google Sydney - Reception", }, links: [], // The text for the copyright control. copyright: "Imagery (c) 2010 Google", // The definition of the tiles for this panorama. tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), // The heading in degrees at the origin of the panorama // tile set. centerHeading: 105, getTileUrl: getCustomPanoramaTileUrl, }, }; } // @ts-ignore TODO fix typings return null; } window.initPano = initPano;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-custom-simple/docs/index.js#L8-L61" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-custom-simple/docs/index.js#maps_streetview_custom_simple" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-custom-simple/docs/index.js" data-region-tag="maps_streetview_custom_simple">index.js</a></div></pre></devsite-code> <aside class="note"> Note: The JavaScript is compiled from the TypeScript snippet. </aside> </section> <section> <h3 id="maps_streetview_custom_simple-css" track-type="sampleTabNav" track-name="css" track-metadata-position="maps_streetview_custom_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/streetview-custom-simple/docs/style.css" data-git-revision="main" data-region-tag="maps_streetview_custom_simple" data-scope="maps_streetview_custom_simple" data-copy-event-label="maps_streetview_custom_simple-css" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="CSS">/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } <div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-custom-simple/docs/style.css#L7-L24" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-custom-simple/docs/style.css#maps_streetview_custom_simple" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-custom-simple/docs/style.css" data-region-tag="maps_streetview_custom_simple">style.css</a></div></pre></devsite-code> </section> <section> <h3 id="maps_streetview_custom_simple-html" track-type="sampleTabNav" track-name="html" track-metadata-position="maps_streetview_custom_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/streetview-custom-simple/docs/index.html" data-git-revision="main" data-region-tag="maps_streetview_custom_simple" data-scope="maps_streetview_custom_simple" data-copy-event-label="maps_streetview_custom_simple-html" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="HTML"><html> <head> <title>Custom Street View Panoramas</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly" defer ></script> </body> </html><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-custom-simple/docs/index.html#L8-L30" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-custom-simple/docs/index.html#maps_streetview_custom_simple" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-custom-simple/docs/index.html" data-region-tag="maps_streetview_custom_simple">index.html</a></div></pre></devsite-code> </section> </div> <a class="button button-primary" href="/maps/documentation/javascript/examples/streetview-custom-simple">View example</a> <h3 id="try-sample_5" 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="streetview-custom-simple" data-action="open-sample-in-jsfiddle" href="https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/streetview-custom-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="streetview-custom-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-streetview-custom-simple&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=." class="button button-primary">Google Cloud Shell</a> </div> </div> The custom panorama provider returns the appropriate tile given the passed panorama ID, zoom level, and panorama tile coordinates. Since image selection depends on these passed values, it is useful to name images that can be selected programmatically given those passed values, such as <code translate="no" dir="ltr">pano_zoom_tileX_tileY.png</code>. The following example adds another arrow to the image, in addition to the default Street View navigation arrows, that points into Google Sydney and links to the custom imagery: <div id="maps_streetview_custom_tiles-code-sample"> <div class="ds-selector-tabs"> <section> <h3 id="maps_streetview_custom_tiles-typescript" track-type="sampleTabNav" track-name="typescript" track-metadata-position="maps_streetview_custom_tiles" data-text="TypeScript" tabindex="-1">TypeScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/samples/streetview-custom-tiles/index.ts" data-git-revision="main" data-region-tag="maps_streetview_custom_tiles" data-scope="maps_streetview_custom_tiles" data-copy-event-label="maps_streetview_custom_tiles-typescript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="TypeScript">let panorama: google.maps.StreetViewPanorama; // StreetViewPanoramaData of a panorama just outside the Google Sydney office. let outsideGoogle: google.maps.StreetViewPanoramaData; // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData(): google.maps.StreetViewPanoramaData { return { location: { pano: "reception", // The ID for this custom panorama. description: "Google Sydney - Reception", latLng: new google.maps.LatLng(-33.86684, 151.19583), }, links: [ { heading: 195, description: "Exit", pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano, }, ], copyright: "Imagery (c) 2010 Google", tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), centerHeading: 105, getTileUrl: function ( pano: string, zoom: number, tileX: number, tileY: number ): string { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); }, }, }; } function initPanorama() { panorama = new google.maps.StreetViewPanorama( document.getElementById("street-view") as HTMLElement, { pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano } ); // Register a provider for the custom panorama. panorama.registerPanoProvider( (pano: string): google.maps.StreetViewPanoramaData => { if (pano === "reception") { return getReceptionPanoramaData(); } // @ts-ignore TODO fix typings return null; } ); // Add a link to our custom panorama from outside the Google Sydney office. panorama.addListener("links_changed", () => { if ( panorama.getPano() === (outsideGoogle.location as google.maps.StreetViewLocation).pano ) { panorama.getLinks().push({ description: "Google Sydney", heading: 25, pano: "reception", }); } }); } function initMap(): void { // Use the Street View service to find a pano ID on Pirrama Rd, outside the // Google office. new google.maps.StreetViewService() .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } }) .then(({ data }: google.maps.StreetViewResponse) => { outsideGoogle = data; initPanorama(); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/samples/streetview-custom-tiles/index.ts#L10-L103" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/samples/streetview-custom-tiles/index.ts#maps_streetview_custom_tiles" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/samples/streetview-custom-tiles/index.ts" data-region-tag="maps_streetview_custom_tiles">index.ts</a></div></pre></devsite-code> <aside class="note"> Note: Read the <a href="/maps/documentation/javascript/using-typescript">guide</a> on using TypeScript and Google Maps. </aside> </section> <section> <h3 id="maps_streetview_custom_tiles-javascript" track-type="sampleTabNav" track-name="javascript" track-metadata-position="maps_streetview_custom_tiles" data-text="JavaScript" tabindex="-1">JavaScript</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-custom-tiles/docs/index.js" data-git-revision="main" data-region-tag="maps_streetview_custom_tiles" data-scope="maps_streetview_custom_tiles" data-copy-event-label="maps_streetview_custom_tiles-javascript" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript">let panorama; // StreetViewPanoramaData of a panorama just outside the Google Sydney office. let outsideGoogle; // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData() { return { location: { pano: "reception", // The ID for this custom panorama. description: "Google Sydney - Reception", latLng: new google.maps.LatLng(-33.86684, 151.19583), }, links: [ { heading: 195, description: "Exit", pano: outsideGoogle.location.pano, }, ], copyright: "Imagery (c) 2010 Google", tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), centerHeading: 105, getTileUrl: function (pano, zoom, tileX, tileY) { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); }, }, }; } function initPanorama() { panorama = new google.maps.StreetViewPanorama( document.getElementById("street-view"), { pano: outsideGoogle.location.pano }, ); // Register a provider for the custom panorama. panorama.registerPanoProvider((pano) => { if (pano === "reception") { return getReceptionPanoramaData(); } // @ts-ignore TODO fix typings return null; }); // Add a link to our custom panorama from outside the Google Sydney office. panorama.addListener("links_changed", () => { if (panorama.getPano() === outsideGoogle.location.pano) { panorama.getLinks().push({ description: "Google Sydney", heading: 25, pano: "reception", }); } }); } function initMap() { // Use the Street View service to find a pano ID on Pirrama Rd, outside the // Google office. new google.maps.StreetViewService() .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } }) .then(({ data }) => { outsideGoogle = data; initPanorama(); }); } window.initMap = initMap;<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-custom-tiles/docs/index.js#L8-L84" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-custom-tiles/docs/index.js#maps_streetview_custom_tiles" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-custom-tiles/docs/index.js" data-region-tag="maps_streetview_custom_tiles">index.js</a></div></pre></devsite-code> <aside class="note"> Note: The JavaScript is compiled from the TypeScript snippet. </aside> </section> <section> <h3 id="maps_streetview_custom_tiles-css" track-type="sampleTabNav" track-name="css" track-metadata-position="maps_streetview_custom_tiles" data-text="CSS" tabindex="-1">CSS</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-custom-tiles/docs/style.css" data-git-revision="main" data-region-tag="maps_streetview_custom_tiles" data-scope="maps_streetview_custom_tiles" data-copy-event-label="maps_streetview_custom_tiles-css" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="CSS">html, body { height: 100%; margin: 0; padding: 0; } #street-view { height: 100%; } <div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-custom-tiles/docs/style.css#L7-L17" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-custom-tiles/docs/style.css#maps_streetview_custom_tiles" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-custom-tiles/docs/style.css" data-region-tag="maps_streetview_custom_tiles">style.css</a></div></pre></devsite-code> </section> <section> <h3 id="maps_streetview_custom_tiles-html" track-type="sampleTabNav" track-name="html" track-metadata-position="maps_streetview_custom_tiles" data-text="HTML" tabindex="-1">HTML</h3> <div></div><devsite-code><pre data-code-snippet="true" data-github-path="googlemaps/js-samples/dist/samples/streetview-custom-tiles/docs/index.html" data-git-revision="main" data-region-tag="maps_streetview_custom_tiles" data-scope="maps_streetview_custom_tiles" data-copy-event-label="maps_streetview_custom_tiles-html" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="HTML"><html> <head> <title>Custom Street View Panorama Tiles</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="street-view"></div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/googlemaps/js-samples/blob/0e598941ff2d2212e464f843a39c7550be3347a5/dist/samples/streetview-custom-tiles/docs/index.html#L8-L30" class="gc-analytics-event" data-category="github_link" data-label="googlemaps/js-samples/dist/samples/streetview-custom-tiles/docs/index.html#maps_streetview_custom_tiles" data-code-snippet="true" data-git-revision="main" data-github-path="googlemaps/js-samples/dist/samples/streetview-custom-tiles/docs/index.html" data-region-tag="maps_streetview_custom_tiles">index.html</a></div></pre></devsite-code> </section> </div> <a class="button button-primary" href="/maps/documentation/javascript/examples/streetview-custom-tiles">View example</a> <h3 id="try-sample_6" 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="streetview-custom-tiles" data-action="open-sample-in-jsfiddle" href="https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/streetview-custom-tiles/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="streetview-custom-tiles" 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-streetview-custom-tiles&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=." class="button button-primary">Google Cloud Shell</a> </div> </div> <devsite-hats-survey class="nocontent" hats-id="XkBWMmMFw0ji3Z11gVm0WEFX1sxN" listnr-id="5133444"></devsite-hats-survey> </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-20250211-r00-rc00.466928320959134316" 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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/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"> 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. Last updated 2025-02-07 UTC. </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-20250211-r00-rc00.466928320959134316" 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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/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 2025-02-07 UTC."],[[["Google Street View API provides 360° panoramas and lets you integrate Street View into your applications."],["You can customize Street View by controlling the display, location, point-of-view, and user interactions."],["Overlays, such as markers and info windows, can be added to Street View panoramas to highlight specific points of interest."],["The API enables accessing Street View data programmatically and creating custom panoramas for unique locations."],["Custom panoramas can be seamlessly integrated with existing Google Street View imagery, enhancing the user experience."]]],[]] </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> Stack Overflow </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> GitHub </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> Discord </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> Issue Tracker </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-label="footerMen"data-category="pricingAndPlans"data-action="linkClick"> 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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/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"> Sign up for the Google for Developers newsletter <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": {"dimension11": false, "dimension4": "Maps JavaScript API", "dimension6": "en", "dimension1": "Signed out", "dimension3": false, "dimension5": "en"}, "gaid": "UA-24532603-1", "metrics": {"ratings_value": "metric1", "ratings_count": "metric2"}, "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="UnC81KtoJ6UBSUQqiErgAwN26O8iQm"> (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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers/js/app_loader.js', '[1,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/developers","https://developers-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/developers/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/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,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,["Profiles__enable_dashboard_curated_recommendations","Cloud__enable_cloud_dlp_service","Cloud__enable_llm_concierge_chat","Concierge__enable_key_takeaways","Profiles__enable_profile_collections","Cloud__enable_cloudx_ping","Cloud__enable_free_trial_server_call","MiscFeatureFlags__enable_project_variables","Profiles__enable_completequiz_endpoint","Search__enable_ai_search_summaries","Profiles__enable_page_saving","CloudShell__cloud_shell_button","Profiles__enable_stripe_subscription_management","Search__enable_page_map","Profiles__enable_recognition_badges","Cloud__enable_legacy_calculator_redirect","Cloud__enable_cloud_facet_chat","MiscFeatureFlags__developers_footer_image","Concierge__enable_pushui","Experiments__reqs_query_experiments","Profiles__enable_awarding_url","TpcFeatures__enable_unmirrored_page_left_nav","Profiles__enable_public_developer_profiles","Profiles__enable_developer_profiles_callout","Cloud__enable_cloudx_experiment_ids","Significatio__enable_by_tenant","Analytics__enable_clearcut_logging","Search__enable_ai_eligibility_checks","Search__enable_suggestions_from_borg","Profiles__enable_join_program_group_endpoint","Profiles__enable_completecodelab_endpoint","DevPro__enable_developer_subscriptions","MiscFeatureFlags__enable_view_transitions","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_variable_operator","MiscFeatureFlags__emergency_css","Concierge__enable_concierge","Search__enable_ai_search_summaries_restricted","TpcFeatures__enable_mirror_tenant_redirects","Search__enable_dynamic_content_confidential_banner","CloudShell__cloud_code_overflow_menu","MiscFeatureFlags__enable_explain_this_code","EngEduTelemetry__enable_engedu_telemetry","Profiles__enable_complete_playlist_endpoint","BookNav__enable_tenant_cache_key","Profiles__enable_release_notes_notifications","Concierge__enable_concierge_restricted","Cloud__enable_cloud_shell_fte_user_flow","DevPro__enable_cloud_innovators_plus","Profiles__require_profile_eligibility_for_signin","Cloud__enable_cloud_shell"],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],[5,4],[6,5],[12,9],[1,1],[14,11],[11,8],[16,13],[4,3],[13,10],[3,2]],[[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",1]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Street View Service | Maps JavaScript API | Google for Developers