Distance Matrix 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/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/css/app.css"> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png"><link rel="canonical" href="https://developers.google.com/maps/documentation/javascript/distancematrix"><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/distancematrix" /><link rel="alternate" hreflang="x-default" href="https://developers.google.com/maps/documentation/javascript/distancematrix" /><link rel="alternate" hreflang="ar" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=fr" /><link rel="alternate" hreflang="de" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=de" /><link rel="alternate" hreflang="he" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=he" /><link rel="alternate" hreflang="hi" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=hi" /><link rel="alternate" hreflang="id" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=id" /><link rel="alternate" hreflang="it" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=it" /><link rel="alternate" hreflang="ko" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=th" /><link rel="alternate" hreflang="tr" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developers.google.com/maps/documentation/javascript/distancematrix?hl=vi" /><title>Distance Matrix Service  |  Maps JavaScript API  |  Google for Developers</title> <meta property="og:title" content="Distance Matrix Service  |  Maps JavaScript API  |  Google for Developers"><meta property="og:url" content="https://developers.google.com/maps/documentation/javascript/distancematrix"><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": "Distance Matrix 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": "Distance Matrix Service", "item": "https://developers.google.com/maps/documentation/javascript/distancematrix" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="white" type="article" layout="docs" concierge='closed' display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="https://developers.google.com/maps"> <div class="devsite-product-logo-container" size="medium" > <picture> <img class="devsite-product-logo" alt="Google Maps Platform" src="https://developers.google.com/static/maps/images/maps-icon.svg" srcset=" /static/maps/images/maps-icon.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> <a href="https://developers.google.com/maps" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google Maps Platform" > <svg class="devsite-google-wordmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 48"> <title>Google</title> <path class="devsite-google-wordmark-svg-path" d="M19.58,37.65c-9.87,0-18.17-8.04-18.17-17.91c0-9.87,8.3-17.91,18.17-17.91c5.46,0,9.35,2.14,12.27,4.94l-3.45,3.45c-2.1-1.97-4.93-3.49-8.82-3.49c-7.21,0-12.84,5.81-12.84,13.02c0,7.21,5.64,13.02,12.84,13.02c4.67,0,7.34-1.88,9.04-3.58c1.4-1.4,2.32-3.41,2.66-6.16H19.58v-4.89h16.47c0.18,0.87,0.26,1.92,0.26,3.06c0,3.67-1.01,8.21-4.24,11.44C28.93,35.9,24.91,37.65,19.58,37.65z M61.78,26.12c0,6.64-5.1,11.53-11.36,11.53s-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53S61.78,19.43,61.78,26.12z M56.8,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C53.84,33.11,56.8,30.22,56.8,26.12z M87.25,26.12c0,6.64-5.1,11.53-11.36,11.53c-6.26,0-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53C82.15,14.59,87.25,19.43,87.25,26.12zM82.28,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C79.32,33.11,82.28,30.22,82.28,26.12z M112.09,15.29v20.7c0,8.52-5.02,12.01-10.96,12.01c-5.59,0-8.95-3.76-10.22-6.81l4.41-1.83c0.79,1.88,2.71,4.1,5.81,4.1c3.8,0,6.16-2.36,6.16-6.77v-1.66h-0.18c-1.14,1.4-3.32,2.62-6.07,2.62c-5.76,0-11.05-5.02-11.05-11.49c0-6.51,5.28-11.57,11.05-11.57c2.75,0,4.93,1.22,6.07,2.58h0.18v-1.88H112.09z M107.64,26.16c0-4.06-2.71-7.03-6.16-7.03c-3.49,0-6.42,2.97-6.42,7.03c0,4.02,2.93,6.94,6.42,6.94C104.93,33.11,107.64,30.18,107.64,26.16z M120.97,3.06v33.89h-5.07V3.06H120.97z M140.89,29.92l3.93,2.62c-1.27,1.88-4.32,5.11-9.61,5.11c-6.55,0-11.28-5.07-11.28-11.53c0-6.86,4.77-11.53,10.71-11.53c5.98,0,8.91,4.76,9.87,7.34l0.52,1.31l-15.42,6.38c1.18,2.31,3.01,3.49,5.59,3.49C137.79,33.11,139.58,31.84,140.89,29.92zM128.79,25.77l10.31-4.28c-0.57-1.44-2.27-2.45-4.28-2.45C132.24,19.04,128.66,21.31,128.79,25.77z"/> </svg>Maps Platform </a> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://mapsplatform.google.com/" track-metadata-eventdetail="https://mapsplatform.google.com/" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - overview" track-metadata-module="primary nav" data-category="home" data-label="navTopMenu" track-name="overview" data-action="tabClick" > Overview </a> </tab> <tab > <a href="https://mapsplatform.google.com/maps-products/" track-metadata-eventdetail="https://mapsplatform.google.com/maps-products/" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - products" track-metadata-module="primary nav" data-category="products" data-label="navTopMenu" track-name="products" data-action="tabClick" > Products </a> </tab> <tab > <a href="https://mapsplatform.google.com/pricing/" track-metadata-eventdetail="https://mapsplatform.google.com/pricing/" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - pricing" track-metadata-module="primary nav" data-category="pricing" data-label="navTopMenu" track-name="pricing" data-action="tabClick" > Pricing </a> </tab> <tab class="devsite-dropdown devsite-dropdown-full devsite-active "> <a href="https://developers.google.com/maps/documentation" track-metadata-eventdetail="https://developers.google.com/maps/documentation" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - documentation" track-metadata-module="primary nav" aria-label="Documentation, selected" data-category="documentation" data-label="navTopMenu" track-name="documentation" data-action="tabClick" > Documentation </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Documentation" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation" track-metadata-position="nav - documentation" track-metadata-module="primary nav" data-category="documentation" data-label="navTopMenu" track-name="documentation" data-action="tabClick" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Get Started</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/get-started" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/get-started" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Get Started with Google Maps Platform </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/api-picker" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/api-picker" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> API Picker </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/billing-and-pricing/overview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/billing-and-pricing/overview" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Billing & Pricing </div> </a> </li> <li class="devsite-nav-item"> <a href="https://mapsplatform.google.com/resources/trust-center" track-type="nav" track-metadata-eventdetail="https://mapsplatform.google.com/resources/trust-center" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Security & Compliance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/reporting-and-monitoring/overview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/reporting-and-monitoring/overview" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Reporting & Monitoring </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/faq" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/faq" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> FAQ </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/support" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/support" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Support and Resources </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/support/care" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/support/care" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Customer Care </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/incident-management" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/incident-management" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Incident Management </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Maps</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/javascript" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps JavaScript API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/android-sdk" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/android-sdk" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps SDK for Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/ios-sdk" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/ios-sdk" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps SDK for iOS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/flutter-package/overview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/flutter-package/overview" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Google Maps for Flutter </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/embed" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/embed" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps Embed API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/maps-static" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/maps-static" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps Static API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/streetview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/streetview" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Street View Static API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/urls" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/urls" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps URLs </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/aerial-view" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/aerial-view" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Aerial View API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/elevation" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/elevation" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Elevation API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/tile" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/tile" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Map Tiles API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/datasets" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/datasets" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Maps Datasets API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/web-components" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/web-components" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="maps" tooltip > <div class="devsite-nav-item-title"> Web Components (Preview) </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Routes</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/routes" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/routes" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Routes API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/navigation/android-sdk" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/navigation/android-sdk" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Navigation SDK for Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/navigation/ios-sdk" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/navigation/ios-sdk" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Navigation SDK for iOS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/cross-platform/navigation" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/cross-platform/navigation" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Navigation for Flutter </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/cross-platform/navigation" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/cross-platform/navigation" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Navigation for React Native </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/roads" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/roads" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Roads API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/directions" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/directions" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Directions API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/distance-matrix" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/distance-matrix" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Distance Matrix API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/route-optimization" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/route-optimization" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Route Optimization API </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Solutions</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/solutions" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/solutions" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Industry solutions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/mobility" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/mobility" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="routes" tooltip > <div class="devsite-nav-item-title"> Mobility services </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Places</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/places/web-service" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/places/web-service" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Places API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/places/android-sdk" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/places/android-sdk" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Places SDK for Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/places/ios-sdk" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/places/ios-sdk" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Places SDK for iOS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/javascript/places" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript/places" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Places Library, Maps JavaScript API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/geocoding" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/geocoding" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Geocoding API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/geolocation" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/geolocation" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Geolocation API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/address-validation" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/address-validation" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Address Validation API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/timezone" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/timezone" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Time Zone API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/places-insights" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/places-insights" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Places Insights API (Preview) </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Environment</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/air-quality" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/air-quality" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Air Quality API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/pollen" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/pollen" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Pollen API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/documentation/solar" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/documentation/solar" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="places" tooltip > <div class="devsite-nav-item-title"> Solar API </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Additional Resources</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/api-security-best-practices" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/api-security-best-practices" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> API Security Best Practices </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/digital-signature" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/digital-signature" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Digital Signature Guide </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/coverage" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/coverage" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Map Coverage Details </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/optimization-guide" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/optimization-guide" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Optimization Guide </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/software-support" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/software-support" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Mobile OS and software support </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/launch-stages" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/launch-stages" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Launch stages </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/deprecations" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/deprecations" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Deprecations </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/asset-tracking-plan" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/asset-tracking-plan" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Asset Tracking Plan </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/url-encoding" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/url-encoding" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> URL Encoding </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/maps/third-party-platforms/wordpress" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/third-party-platforms/wordpress" track-metadata-position="nav - documentation" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> WordPress Users </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://mapsplatform.google.com/resources/blog" track-metadata-eventdetail="https://mapsplatform.google.com/resources/blog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="blog" data-label="navTopMenu" track-name="blog" data-action="tabClick" > Blog </a> </tab> <tab class="devsite-dropdown "> <a href="https://developers.google.com/maps/developer-community" track-metadata-eventdetail="https://developers.google.com/maps/developer-community" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - community" track-metadata-module="primary nav" data-category="community" data-label="navTopMenu" track-name="community" data-action="tabClick" > Community </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Community" track-type="nav" track-metadata-eventdetail="https://developers.google.com/maps/developer-community" track-metadata-position="nav - community" track-metadata-module="primary nav" data-category="community" data-label="navTopMenu" track-name="community" data-action="tabClick" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://stackoverflow.com/questions/tagged/google-maps" track-type="nav" track-metadata-eventdetail="https://stackoverflow.com/questions/tagged/google-maps" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> StackOverflow </div> </a> </li> <li class="devsite-nav-item"> <a href="https://github.com/googlemaps/" track-type="nav" track-metadata-eventdetail="https://github.com/googlemaps/" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> GitHub </div> </a> </li> <li class="devsite-nav-item"> <a href="https://www.youtube.com/c/GoogleMapsPlatform" track-type="nav" track-metadata-eventdetail="https://www.youtube.com/c/GoogleMapsPlatform" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> YouTube </div> </a> </li> <li class="devsite-nav-item"> <a href="https://discord.gg/f4hvx8Rp2q" track-type="nav" track-metadata-eventdetail="https://discord.gg/f4hvx8Rp2q" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Discord </div> </a> </li> <li class="devsite-nav-item"> <a href="https://twitter.com/GMapsPlatform" track-type="nav" track-metadata-eventdetail="https://twitter.com/GMapsPlatform" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> X (Twitter) </div> </a> </li> <li class="devsite-nav-item"> <a href="https://issuetracker.google.com/bookmark-groups/76561" track-type="nav" track-metadata-eventdetail="https://issuetracker.google.com/bookmark-groups/76561" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Issue Tracker </div> </a> </li> <li class="devsite-nav-item"> <a href="https://devlibrary.withgoogle.com/products/maps" track-type="nav" track-metadata-eventdetail="https://devlibrary.withgoogle.com/products/maps" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Google Dev Library </div> </a> </li> </ul> </div> </div> </div> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Maps JavaScript API" tenant-name="Google for Developers" project-scope="/maps/documentation/javascript" url-scoped="https://developers.google.com/s/results/maps/documentation/javascript" > <form class="devsite-search-form" action="https://developers.google.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles fp-auth id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" aria-label="Lower header breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/maps/web" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google Maps APIs for Web" > Web </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/maps/documentation/javascript" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Maps JavaScript API" > Maps JavaScript API </a> </li> </ul> </div> <div class="devsite-product-button-row"> <a href="https://console.cloud.google.com/google/maps-apis/start?utm_source=Docs_GS_Button&ref=https://developers.google.com/maps/&utm_content=Docs_maps-backend" class="button button-primary gc-analytics-event " data-modal-dialog-id="enable-billing-modal-dialog" data-category="GMPgetStarted" data-label="nav" data-action="buttonClick" >Get Started</a> <a href="https://cloud.google.com/contact-maps/" class="button gc-analytics-event " data-label="nav" data-category="GMPcontactSales" 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" track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - guides" track-metadata-module="primary nav" aria-label="Guides, selected" data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides" > Guides </a> </tab> <tab > <a href="https://developers.google.com/maps/documentation/javascript/reference" track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript/reference" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - reference" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" > Reference </a> </tab> <tab > <a href="https://developers.google.com/maps/documentation/javascript/examples" track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript/examples" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - samples" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" > Samples </a> </tab> <tab > <a href="https://developers.google.com/maps/documentation/javascript/support" track-metadata-eventdetail="https://developers.google.com/maps/documentation/javascript/support" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - support" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Support" track-name="support" > Support </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="https://developers.google.com/maps"> <div class="devsite-product-logo-container" size="medium" > <picture> <img class="devsite-product-logo" alt="Google Maps Platform" src="https://developers.google.com/static/maps/images/maps-icon.svg" srcset=" /static/maps/images/maps-icon.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> <a href="https://developers.google.com/maps" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google Maps Platform" > <svg class="devsite-google-wordmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 48"> <title>Google</title> <path class="devsite-google-wordmark-svg-path" d="M19.58,37.65c-9.87,0-18.17-8.04-18.17-17.91c0-9.87,8.3-17.91,18.17-17.91c5.46,0,9.35,2.14,12.27,4.94l-3.45,3.45c-2.1-1.97-4.93-3.49-8.82-3.49c-7.21,0-12.84,5.81-12.84,13.02c0,7.21,5.64,13.02,12.84,13.02c4.67,0,7.34-1.88,9.04-3.58c1.4-1.4,2.32-3.41,2.66-6.16H19.58v-4.89h16.47c0.18,0.87,0.26,1.92,0.26,3.06c0,3.67-1.01,8.21-4.24,11.44C28.93,35.9,24.91,37.65,19.58,37.65z M61.78,26.12c0,6.64-5.1,11.53-11.36,11.53s-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53S61.78,19.43,61.78,26.12z M56.8,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C53.84,33.11,56.8,30.22,56.8,26.12z M87.25,26.12c0,6.64-5.1,11.53-11.36,11.53c-6.26,0-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53C82.15,14.59,87.25,19.43,87.25,26.12zM82.28,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C79.32,33.11,82.28,30.22,82.28,26.12z M112.09,15.29v20.7c0,8.52-5.02,12.01-10.96,12.01c-5.59,0-8.95-3.76-10.22-6.81l4.41-1.83c0.79,1.88,2.71,4.1,5.81,4.1c3.8,0,6.16-2.36,6.16-6.77v-1.66h-0.18c-1.14,1.4-3.32,2.62-6.07,2.62c-5.76,0-11.05-5.02-11.05-11.49c0-6.51,5.28-11.57,11.05-11.57c2.75,0,4.93,1.22,6.07,2.58h0.18v-1.88H112.09z M107.64,26.16c0-4.06-2.71-7.03-6.16-7.03c-3.49,0-6.42,2.97-6.42,7.03c0,4.02,2.93,6.94,6.42,6.94C104.93,33.11,107.64,30.18,107.64,26.16z M120.97,3.06v33.89h-5.07V3.06H120.97z M140.89,29.92l3.93,2.62c-1.27,1.88-4.32,5.11-9.61,5.11c-6.55,0-11.28-5.07-11.28-11.53c0-6.86,4.77-11.53,10.71-11.53c5.98,0,8.91,4.76,9.87,7.34l0.52,1.31l-15.42,6.38c1.18,2.31,3.01,3.49,5.59,3.49C137.79,33.11,139.58,31.84,140.89,29.92zM128.79,25.77l10.31-4.28c-0.57-1.44-2.27-2.45-4.28-2.45C132.24,19.04,128.66,21.31,128.79,25.77z"/> </svg>Maps Platform </a> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="https://mapsplatform.google.com/" class="devsite-nav-title gc-analytics-event " data-category="home" data-label="navTopMenu" track-name="overview" data-action="tabClick" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="https://mapsplatform.google.com/maps-products/" class="devsite-nav-title gc-analytics-event " data-category="products" data-label="navTopMenu" track-name="products" data-action="tabClick" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Products" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Products </span> </a> </li> <li class="devsite-nav-item"> <a href="https://mapsplatform.google.com/pricing/" class="devsite-nav-title gc-analytics-event " data-category="pricing" data-label="navTopMenu" track-name="pricing" data-action="tabClick" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Pricing" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Pricing </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="documentation" data-label="navTopMenu" track-name="documentation" data-action="tabClick" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Documentation" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Documentation </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="documentation" data-label="navTopMenu" track-name="documentation" data-action="tabClick" > <span class="devsite-nav-text" tooltip menu="Documentation"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Documentation"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/maps/documentation/javascript" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Guides" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Guides </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/javascript/reference" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reference" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Reference </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/javascript/examples" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Samples </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/javascript/support" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Support" track-name="support" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Support" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Support </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="https://mapsplatform.google.com/resources/blog" class="devsite-nav-title gc-analytics-event " data-category="blog" data-label="navTopMenu" track-name="blog" data-action="tabClick" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/developer-community" class="devsite-nav-title gc-analytics-event " data-category="community" data-label="navTopMenu" track-name="community" data-action="tabClick" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Community" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Community </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="community" data-label="navTopMenu" track-name="community" data-action="tabClick" > <span class="devsite-nav-text" tooltip menu="Community"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Community"> </span> </span> </li> </ul> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item"><a href="/maps/documentation/javascript" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript" ><span class="devsite-nav-text" tooltip>Maps JavaScript API</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-setup" ><span class="devsite-nav-text" tooltip>Set up your Google Cloud project</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/get-api-key" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/get-api-key" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/get-api-key" ><span class="devsite-nav-text" tooltip>Use API Keys</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/load-maps-js-api" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/load-maps-js-api" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/load-maps-js-api" ><span class="devsite-nav-text" tooltip>Load the Maps JavaScript API</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/troubleshooting" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/troubleshooting" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/troubleshooting" ><span class="devsite-nav-text" tooltip>Troubleshooting</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Tutorials</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/add-google-map-wc-tut" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/add-google-map-wc-tut" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/add-google-map-wc-tut" ><span class="devsite-nav-text" tooltip>Add a Google Map with a marker using HTML</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/adding-a-google-map" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/adding-a-google-map" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/adding-a-google-map" ><span class="devsite-nav-text" tooltip>Add a Google Map with a marker using JavaScript</span></a></li> <li class="devsite-nav-item"><a href="/codelabs/maps-platform/maps-platform-101-react-js" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /codelabs/maps-platform/maps-platform-101-react-js" track-type="bookNav" track-name="click" track-metadata-eventdetail="/codelabs/maps-platform/maps-platform-101-react-js" ><span class="devsite-nav-text" tooltip>Add a Google Map to a React app</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/tutorials" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/tutorials" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/tutorials" ><span class="devsite-nav-text" tooltip>More tutorials</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Concepts</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/versions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/versions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/versions" ><span class="devsite-nav-text" tooltip>Versioning</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/localization" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/localization" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/localization" ><span class="devsite-nav-text" tooltip>Localization</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/best-practices" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/best-practices" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/best-practices" ><span class="devsite-nav-text" tooltip>Best practices</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/using-typescript" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/using-typescript" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/using-typescript" ><span class="devsite-nav-text" tooltip>TypeScript</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/promises" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/promises" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/promises" ><span class="devsite-nav-text" tooltip>Promises</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Base map</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/add-google-map" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/add-google-map" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/add-google-map" ><span class="devsite-nav-text" tooltip>Add a Google Map to a web page</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/events" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/events" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/events" ><span class="devsite-nav-text" tooltip>Map events</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/controls" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/controls" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/controls" ><span class="devsite-nav-text" tooltip>Map controls</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/interaction" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/interaction" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/interaction" ><span class="devsite-nav-text" tooltip>Control zoom and pan</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/map-rendering-type" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/map-rendering-type" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/map-rendering-type" ><span class="devsite-nav-text" tooltip>Rendering type (raster and vector)</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/maptypes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/maptypes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/maptypes" ><span class="devsite-nav-text" tooltip>Map types</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/mapcolorscheme" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/mapcolorscheme" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/mapcolorscheme" ><span class="devsite-nav-text" tooltip>Map color scheme</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/coordinates" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/coordinates" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/coordinates" ><span class="devsite-nav-text" tooltip>Map and tile coordinates</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Customize with cloud-based maps styling</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Get Started</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/setup-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/setup-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/setup-leg" ><span class="devsite-nav-text" tooltip>Get started and set up</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/tut-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/tut-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/tut-leg" ><span class="devsite-nav-text" tooltip>Tutorial - Highlight a road network</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/update-legacy" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/update-legacy" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/update-legacy" ><span class="devsite-nav-text" tooltip>Update a map style to the latest version</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/update-old2-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/update-old2-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/update-old2-leg" ><span class="devsite-nav-text" tooltip>Map feature changes</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Create and use map styles</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/map-styles-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/map-styles-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/map-styles-leg" ><span class="devsite-nav-text" tooltip>Create and use map styles</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/test-style-updates" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/test-style-updates" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/test-style-updates" ><span class="devsite-nav-text" tooltip>Test map style updates</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/zoom-levels-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/zoom-levels-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/zoom-levels-leg" ><span class="devsite-nav-text" tooltip>Style zoom levels</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/versions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/versions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/versions" ><span class="devsite-nav-text" tooltip>Work with map style versions</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/taxonomy" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/taxonomy" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/taxonomy" ><span class="devsite-nav-text" tooltip>What you can style on a map</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/map-hier-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/map-hier-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/map-hier-leg" ><span class="devsite-nav-text" tooltip>Understand map style inheritance and hierarchy</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/overlap-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/overlap-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/overlap-leg" ><span class="devsite-nav-text" tooltip>Manage styles that overlap</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Modify map settings</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/poi-behavior-customization-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/poi-behavior-customization-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/poi-behavior-customization-leg" ><span class="devsite-nav-text" tooltip>Control the density of Points of interest</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/viz-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/viz-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/viz-leg" ><span class="devsite-nav-text" tooltip>Filter which map features to display</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/building-style-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/building-style-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/building-style-leg" ><span class="devsite-nav-text" tooltip>Change the style of buildings</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/landmarks-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/landmarks-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/landmarks-leg" ><span class="devsite-nav-text" tooltip>Change the style of landmarks</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/app-background-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/app-background-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/app-background-leg" ><span class="devsite-nav-text" tooltip>Change the app background color</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Style examples and guidelines</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/style-examples-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/style-examples-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/style-examples-leg" ><span class="devsite-nav-text" tooltip>Styling examples</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/design-resources-leg" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/design-resources-leg" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/design-resources-leg" ><span class="devsite-nav-text" tooltip>Design checklist</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/troubleshoot" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/troubleshoot" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/troubleshoot" ><span class="devsite-nav-text" tooltip>Troubleshoot</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Legacy cloud-based maps styling</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/legacy-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/legacy-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/legacy-overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Get Started</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/legacy-setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/legacy-setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/legacy-setup" ><span class="devsite-nav-text" tooltip>Set up and billing</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/use-style-editor" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/use-style-editor" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/use-style-editor" ><span class="devsite-nav-text" tooltip>Legacy Map Style Editor walkthrough</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Use legacy cloud styling</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/map-styles" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/map-styles" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/map-styles" ><span class="devsite-nav-text" tooltip>Manage legacy map styles</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/zoom-levels" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/zoom-levels" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/zoom-levels" ><span class="devsite-nav-text" tooltip>Work with legacy zoom levels</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/poi-behavior-customization" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/poi-behavior-customization" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/poi-behavior-customization" ><span class="devsite-nav-text" tooltip>Customize legacy POI behavior</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/building-style" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/building-style" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/building-style" ><span class="devsite-nav-text" tooltip>Customize legacy building style</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/cloud-customization/legacy-examples" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/cloud-customization/legacy-examples" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/cloud-customization/legacy-examples" ><span class="devsite-nav-text" tooltip>Legacy examples</span></a></li></ul></div></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Customize with JSON styling</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/json-styling-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/json-styling-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/json-styling-overview" ><span class="devsite-nav-text" tooltip>JSON styling overview</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/style-reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/style-reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/style-reference" ><span class="devsite-nav-text" tooltip>JSON style reference</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Markers</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/start" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/start" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/start" ><span class="devsite-nav-text" tooltip>Get started</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/add-marker" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/add-marker" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/add-marker" ><span class="devsite-nav-text" tooltip>Add a marker to a map</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/basic-customization" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/basic-customization" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/basic-customization" ><span class="devsite-nav-text" tooltip>Basic marker customization</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/graphic-markers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/graphic-markers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/graphic-markers" ><span class="devsite-nav-text" tooltip>Create markers with graphics</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/html-markers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/html-markers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/html-markers" ><span class="devsite-nav-text" tooltip>Create markers with HTML and CSS</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/collision-behavior" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/collision-behavior" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/collision-behavior" ><span class="devsite-nav-text" tooltip>Control collision behavior, altitude, and visibility</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/accessible-markers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/accessible-markers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/accessible-markers" ><span class="devsite-nav-text" tooltip>Make markers clickable and accessible</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/draggable-markers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/draggable-markers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/draggable-markers" ><span class="devsite-nav-text" tooltip>Make markers draggable</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/advanced-markers/migration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/advanced-markers/migration" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/advanced-markers/migration" ><span class="devsite-nav-text" tooltip>Migrate to advanced markers</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/markers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/markers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/markers" ><span class="devsite-nav-text" tooltip>Markers (Legacy)</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Work with Places</span> </div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Places (New)</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-get-started" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-get-started" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-get-started" ><span class="devsite-nav-text" tooltip>Get Started</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-search" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-search" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-search" ><span class="devsite-nav-text" tooltip>Text Search (New)</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/nearby-search" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/nearby-search" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/nearby-search" ><span class="devsite-nav-text" tooltip>Nearby Search (New)</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-details" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-details" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-details" ><span class="devsite-nav-text" tooltip>Place Details</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-photos" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-photos" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-photos" ><span class="devsite-nav-text" tooltip>Place Photos</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-reviews" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-reviews" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-reviews" ><span class="devsite-nav-text" tooltip>Place Reviews</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Place Autocomplete</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-autocomplete-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-autocomplete-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-autocomplete-overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item devsite-nav-preview"><a href="/maps/documentation/javascript/place-autocomplete-new" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-autocomplete-new" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-autocomplete-new" ><span class="devsite-nav-text" tooltip>Place Autocomplete Widget (Preview)</span><span class="devsite-nav-icon material-icons" data-icon="preview" data-title="Preview" aria-hidden="true"></span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-autocomplete-data" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-autocomplete-data" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-autocomplete-data" ><span class="devsite-nav-text" tooltip>Place Autocomplete Data API</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/session-pricing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/session-pricing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/session-pricing" ><span class="devsite-nav-text" tooltip>Autocomplete and session pricing</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-class-data-fields" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-class-data-fields" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-class-data-fields" ><span class="devsite-nav-text" tooltip>Place Data Fields</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-types" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-types" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-types" ><span class="devsite-nav-text" tooltip>Place Types</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Migrate to Places (New)</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-overview" ><span class="devsite-nav-text" tooltip>Migration Overview</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-details" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-details" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-details" ><span class="devsite-nav-text" tooltip>Migrate to the new Place Details</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-search" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-search" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-search" ><span class="devsite-nav-text" tooltip>Migrate to the new Place Search</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-nearby" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-nearby" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-nearby" ><span class="devsite-nav-text" tooltip>Migrate to the new Nearby Search</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-photos" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-photos" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-photos" ><span class="devsite-nav-text" tooltip>Migrate to the new Place Photos</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-reviews" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-reviews" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-reviews" ><span class="devsite-nav-text" tooltip>Migrate to the new Place Reviews</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places-migration-autocomplete" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places-migration-autocomplete" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places-migration-autocomplete" ><span class="devsite-nav-text" tooltip>Migrate to the new Place Autocomplete</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Places Service (Legacy)</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/places" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/places" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/places" ><span class="devsite-nav-text" tooltip>Place Search and Details</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-autocomplete" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-autocomplete" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-autocomplete" ><span class="devsite-nav-text" tooltip>Place Autocomplete</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-data-fields" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-data-fields" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-data-fields" ><span class="devsite-nav-text" tooltip>Place Data Fields</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/supported_types" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/supported_types" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/supported_types" ><span class="devsite-nav-text" tooltip>Place Types</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Places Guides</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-icons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-icons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-icons" ><span class="devsite-nav-text" tooltip>Place Icons</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/place-id" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place-id" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place-id" ><span class="devsite-nav-text" tooltip>Place IDs</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Draw on the map</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/overlays" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/overlays" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/overlays" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/infowindows" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/infowindows" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/infowindows" ><span class="devsite-nav-text" tooltip>Info windows</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/shapes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/shapes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/shapes" ><span class="devsite-nav-text" tooltip>Shapes and lines</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/symbols" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/symbols" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/symbols" ><span class="devsite-nav-text" tooltip>Symbols</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>WebGL Features</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/webgl" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/webgl" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/webgl" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/vector-map" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/vector-map" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/vector-map" ><span class="devsite-nav-text" tooltip>Vector Map Features</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/webgl/webgl-overlay-view" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/webgl/webgl-overlay-view" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/webgl/webgl-overlay-view" ><span class="devsite-nav-text" tooltip>WebGL Overlay View</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/webgl/support" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/webgl/support" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/webgl/support" ><span class="devsite-nav-text" tooltip>Support</span></a></li></ul></div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/deckgl-overlay-view" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/deckgl-overlay-view" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/deckgl-overlay-view" ><span class="devsite-nav-text" tooltip>Deck.gl data visualizations</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/groundoverlays" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/groundoverlays" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/groundoverlays" ><span class="devsite-nav-text" tooltip>Ground overlays</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/customoverlays" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/customoverlays" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/customoverlays" ><span class="devsite-nav-text" tooltip>Custom overlays</span></a></li> <li class="devsite-nav-item devsite-nav-heading devsite-nav-experimental"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Work with 3D maps (Experimental)</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span> </div></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-overview" ><span class="devsite-nav-text" tooltip>Overview</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-getting-started" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-getting-started" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-getting-started" ><span class="devsite-nav-text" tooltip>Get started</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-markers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-markers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-markers" ><span class="devsite-nav-text" tooltip>Markers</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-models" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-models" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-models" ><span class="devsite-nav-text" tooltip>3D models</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-draw" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-draw" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-draw" ><span class="devsite-nav-text" tooltip>Draw on the map</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-interact" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-interact" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-interact" ><span class="devsite-nav-text" tooltip>Interact with the map</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-experimental"><a href="/maps/documentation/javascript/3d-maps-support" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/3d-maps-support" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/3d-maps-support" ><span class="devsite-nav-text" tooltip>Support</span><span class="devsite-nav-icon material-icons" data-icon="experimental" data-title="Experimental!" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Display data</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/layers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/layers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/layers" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Data-driven styling for datasets</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/start" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/start" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/start" ><span class="devsite-nav-text" tooltip>Get started</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/create-dataset" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/create-dataset" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/create-dataset" ><span class="devsite-nav-text" tooltip>Create and manage a dataset</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/add-dataset-to-map" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/add-dataset-to-map" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/add-dataset-to-map" ><span class="devsite-nav-text" tooltip>Add a dataset to a map</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/style-data-features" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/style-data-features" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/style-data-features" ><span class="devsite-nav-text" tooltip>Style data features</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/make-data-features-clickable" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/make-data-features-clickable" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/make-data-features-clickable" ><span class="devsite-nav-text" tooltip>Handle mouse events</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-datasets/dataset-policies" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-datasets/dataset-policies" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-datasets/dataset-policies" ><span class="devsite-nav-text" tooltip>Policies for data-driven stylng for datasets</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Data-driven styling for boundaries</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/start" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/start" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/start" ><span class="devsite-nav-text" tooltip>Get started</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/style-polygon" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/style-polygon" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/style-polygon" ><span class="devsite-nav-text" tooltip>Style a boundary polygon</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/choropleth-map" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/choropleth-map" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/choropleth-map" ><span class="devsite-nav-text" tooltip>Make a choropleth map</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/handle-events" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/handle-events" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/handle-events" ><span class="devsite-nav-text" tooltip>Handle mouse events</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/dds-use-maps-places-apis" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/dds-use-maps-places-apis" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/dds-use-maps-places-apis" ><span class="devsite-nav-text" tooltip>Use Places APIs and Geocoding with data-driven styling</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/dds-boundaries/coverage" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/dds-boundaries/coverage" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/dds-boundaries/coverage" ><span class="devsite-nav-text" tooltip>Google boundaries coverage</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>KML</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/kmllayer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/kmllayer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/kmllayer" ><span class="devsite-nav-text" tooltip>KML and GeoRSS</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/kml" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/kml" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/kml" ><span class="devsite-nav-text" tooltip>Display KML data</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>JSON</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/maps/documentation/javascript/importing_data" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/importing_data" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/importing_data" ><span class="devsite-nav-text" tooltip>Import GeoJSON data into maps</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/earthquakes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/earthquakes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/earthquakes" ><span class="devsite-nav-text" tooltip>Data Visualization</span></a></li><li class="devsite-nav-item"><a href="/maps/documentation/javascript/combining-data" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/combining-data" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/combining-data" ><span class="devsite-nav-text" tooltip>Combine and Visualize Multiple Data Sources</span></a></li></ul></div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/datalayer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/datalayer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/datalayer" ><span class="devsite-nav-text" tooltip>Data layer</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/heatmaplayer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/heatmaplayer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/heatmaplayer" ><span class="devsite-nav-text" tooltip>Heatmap</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/trafficlayer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/trafficlayer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/trafficlayer" ><span class="devsite-nav-text" tooltip>Traffic, Transit, and Bicycling Layers</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Services</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/directions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/directions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/directions" ><span class="devsite-nav-text" tooltip>Directions</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/distancematrix" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/distancematrix" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/distancematrix" ><span class="devsite-nav-text" tooltip>Distance Matrix</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/elevation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/elevation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/elevation" ><span class="devsite-nav-text" tooltip>Elevation</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/geocoding" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/geocoding" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/geocoding" ><span class="devsite-nav-text" tooltip>Geocoding</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/maxzoom" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/maxzoom" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/maxzoom" ><span class="devsite-nav-text" tooltip>Maximum Zoom Imagery</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/streetview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/streetview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/streetview" ><span class="devsite-nav-text" tooltip>Street View</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Additional Libraries</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/libraries" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/libraries" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/libraries" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/drawinglayer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/drawinglayer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/drawinglayer" ><span class="devsite-nav-text" tooltip>Drawing Library</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/geometry" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/geometry" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/geometry" ><span class="devsite-nav-text" tooltip>Geometry Library</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/visualization" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/visualization" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/visualization" ><span class="devsite-nav-text" tooltip>Visualization Library</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/libraries-open-source" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/libraries-open-source" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/libraries-open-source" ><span class="devsite-nav-text" tooltip>Open Source Libraries</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Policies and Terms</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/policies" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/policies" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/policies" ><span class="devsite-nav-text" tooltip>Policies and attributions</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/usage-and-billing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/usage-and-billing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/usage-and-billing" ><span class="devsite-nav-text" tooltip>Usage and billing</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/report-monitor" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/report-monitor" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/report-monitor" ><span class="devsite-nav-text" tooltip>Reporting and monitoring</span></a></li> <li class="devsite-nav-item"><a href="https://cloud.google.com/maps-platform/terms/" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: https://cloud.google.com/maps-platform/terms/" track-type="bookNav" track-name="click" track-metadata-eventdetail="https://cloud.google.com/maps-platform/terms/" ><span class="devsite-nav-text" tooltip>Terms of service</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/content-security-policy" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/content-security-policy" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/content-security-policy" ><span class="devsite-nav-text" tooltip>Content Security Policy Guide</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>More Guides</span> </div></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/google-loader-migration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/google-loader-migration" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/google-loader-migration" ><span class="devsite-nav-text" tooltip>Google Loader Migration Guide</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/place_field_js_migration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/place_field_js_migration" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/place_field_js_migration" ><span class="devsite-nav-text" tooltip>Place Field Migration (open_now, utc_offset)</span></a></li> <li class="devsite-nav-item"><a href="/maps/documentation/javascript/v2tov3" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /maps/documentation/javascript/v2tov3" track-type="bookNav" track-name="click" track-metadata-eventdetail="/maps/documentation/javascript/v2tov3" ><span class="devsite-nav-text" tooltip>Upgrading from v2 to v3</span></a></li> </ul> <ul class="devsite-nav-list" menu="Documentation" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Get Started </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/get-started" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get Started with Google Maps Platform" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get Started with Google Maps Platform </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/api-picker" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: API Picker" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > API Picker </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/billing-and-pricing/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Billing & Pricing" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Billing & Pricing </span> </a> </li> <li class="devsite-nav-item"> <a href="https://mapsplatform.google.com/resources/trust-center" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Security & Compliance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Security & Compliance </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/reporting-and-monitoring/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reporting & Monitoring" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Reporting & Monitoring </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/faq" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: FAQ" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > FAQ </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/support" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Support and Resources" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Support and Resources </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/support/care" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Customer Care" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Customer Care </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/incident-management" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Incident Management" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Incident Management </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Maps </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps JavaScript API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps JavaScript API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/android-sdk" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps SDK for Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps SDK for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/ios-sdk" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps SDK for iOS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps SDK for iOS </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/flutter-package/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Maps for Flutter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Maps for Flutter </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/embed" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps Embed API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps Embed API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/maps-static" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps Static API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps Static API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/streetview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Street View Static API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Street View Static API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/urls" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps URLs" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps URLs </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/aerial-view" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Aerial View API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Aerial View API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/elevation" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Elevation API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Elevation API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/tile" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Map Tiles API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Map Tiles API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/datasets" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Maps Datasets API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Maps Datasets API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/web-components" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Components (Preview)" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Components (Preview) </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Routes </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/routes" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Routes API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Routes API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/navigation/android-sdk" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Navigation SDK for Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Navigation SDK for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/navigation/ios-sdk" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Navigation SDK for iOS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Navigation SDK for iOS </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/cross-platform/navigation" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Navigation for Flutter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Navigation for Flutter </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/cross-platform/navigation" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Navigation for React Native" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Navigation for React Native </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/roads" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Roads API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Roads API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/directions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Directions API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Directions API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/distance-matrix" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Distance Matrix API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Distance Matrix API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/route-optimization" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Route Optimization API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Route Optimization API </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Solutions </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/solutions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Industry solutions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Industry solutions </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/mobility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Mobility services" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Mobility services </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Places </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/places/web-service" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Places API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Places API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/places/android-sdk" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Places SDK for Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Places SDK for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/places/ios-sdk" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Places SDK for iOS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Places SDK for iOS </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/javascript/places" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Places Library, Maps JavaScript API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Places Library, Maps JavaScript API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/geocoding" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Geocoding API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Geocoding API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/geolocation" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Geolocation API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Geolocation API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/address-validation" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Address Validation API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Address Validation API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/timezone" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Time Zone API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Time Zone API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/places-insights" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Places Insights API (Preview)" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Places Insights API (Preview) </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Environment </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/air-quality" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Air Quality API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Air Quality API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/pollen" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Pollen API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Pollen API </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/documentation/solar" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Solar API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Solar API </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Additional Resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/maps/api-security-best-practices" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: API Security Best Practices" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > API Security Best Practices </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/digital-signature" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Digital Signature Guide" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Digital Signature Guide </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/coverage" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Map Coverage Details" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Map Coverage Details </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/optimization-guide" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Optimization Guide" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Optimization Guide </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/software-support" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Mobile OS and software support" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Mobile OS and software support </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/launch-stages" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Launch stages" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Launch stages </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/deprecations" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Deprecations" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Deprecations </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/asset-tracking-plan" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Asset Tracking Plan" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Asset Tracking Plan </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/url-encoding" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: URL Encoding" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > URL Encoding </span> </a> </li> <li class="devsite-nav-item"> <a href="/maps/third-party-platforms/wordpress" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: WordPress Users" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > WordPress Users </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Community" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="https://stackoverflow.com/questions/tagged/google-maps" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: StackOverflow" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > StackOverflow </span> </a> </li> <li class="devsite-nav-item"> <a href="https://github.com/googlemaps/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: GitHub" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > GitHub </span> </a> </li> <li class="devsite-nav-item"> <a href="https://www.youtube.com/c/GoogleMapsPlatform" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: YouTube" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > YouTube </span> </a> </li> <li class="devsite-nav-item"> <a href="https://discord.gg/f4hvx8Rp2q" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Discord" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Discord </span> </a> </li> <li class="devsite-nav-item"> <a href="https://twitter.com/GMapsPlatform" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: X (Twitter)" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > X (Twitter) </span> </a> </li> <li class="devsite-nav-item"> <a href="https://issuetracker.google.com/bookmark-groups/76561" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Issue Tracker" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Issue Tracker </span> </a> </li> <li class="devsite-nav-item"> <a href="https://devlibrary.withgoogle.com/products/maps" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Dev Library" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Dev Library </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav > <devsite-content> <article class="devsite-article"><style> /* Styles inlined from /maps/documentation/local_extensions.css */ .version { text-align: right; } .code { color: #006000; font-family: "Courier", monospace; font-size: 100%; } .grid td { padding: 4px; border-collapse: collapse; border: 1px solid gray; } .header td { font-weight: bold; background: #EEEEEE; } .encodeBox { width: 550px; height: 40px; font-size: 14px; font-family: Courier; } .inputField { width: 160px; } #pointList { width: 300px; font-size: 12px; } #txtAddress { width: 14em; } .welcome { border: none; } .welcome td{ border: none; padding:0 10px 0 10px; } .number { background-color: #E5ECF9; text-align:center; vertical-align:middle; padding: 0 5px; } .leftpadding { padding: 0 0 0 10px; } .identifier { color: black; } /* List the contents inline to save vertical space */ .summarylist { margin-right: 4em; } .summarylist li { display: inline; margin: 0em; margin-right: 0.2em; line-height: 1.5em; } /* Self-links for Maps API for Flash */ a.self-link:link { color: #0000cc; text-decoration: none; } a.self-link:active { color: #0000cc; text-decoration: none; } a.self-link:visited { color: #0000cc; text-decoration: none; } /* Self-links for Maps API */ .self-link { cursor: pointer; } .blackbg { background: #333; } </style><style> /* Styles inlined from /maps/styles/common.css */ /* Enable Billing Modal Dialog Styles */ .devsite-enable-billing-dialog { left: 50%; margin-left: -274px; top: 25%; width: 548px; } .devsite-dialog-close { color: #747474; } #devsite-dialog-onload-billing-enabled { padding: 0; } #devsite-dialog-onload-billing-enabled .get-key-check { background: no-repeat #8cc152 center/72px url(/maps/images/lhimages/v2/check@2x.png); height: 150px; width: 100%; } #devsite-dialog-onload-billing-enabled .devsite-dialog-contents, #devsite-dialog-onload-billing-enabled .devsite-dialog-buttons { margin: 8px; } .devsite-enable-billing-dialog ol { list-style: none; margin: 40px 0; padding: 0; } .devsite-enable-billing-dialog li { counter-increment: step-counter; font-size: 14px; line-height: 16px; margin-bottom: 28px; } .devsite-enable-billing-dialog li::before { border-radius: 50%; border: 2px solid #ececec; color: #00bcd4; content: counter(step-counter); font-size: 14px; font-weight: 500; margin-right: 22px; padding: 6px 10px; } /* Style Wizard introduction */ .styleWizardIntroMain { border-radius: 3px; height: 500; width: 640; } .styleWizardIntroSixMapSamples { left: calc(50% - (500px / 2)); line-height: 1; position: relative; text-align: center; width: 500px; } .styleWizardIntroSample { border: 1px solid rgba(0,0,0,0.07); border-radius: 3px; box-shadow: 0 1px 12px 0 rgba(0,0,0,0.10); display: inline-block; height: 140px; margin: 10px; overflow: hidden; width: 140px; } .styleWizardIntroCaption { text-align: center; } /* TODO(cl/330601385) waiting on fix to be deployed */ .devsite-jsfiddle-hide { position:absolute; top: -99999px; left: -99999px; display:block; } /* Styles for /maps/solutions best practices content */ #bp-background { border-radius: 25px; background: #e8eaed; } #bp-heading span { float:left; margin-right:10px; position:relative; padding: 10px; } /* Use as <ul id="bp-bullet><li>{{ [bp|add]_bullet }}Text here... to have icons serve as the bullet symbol. */ #bp-bullet { list-style-type: none; text-indent: -20px; margin-left: 50px; } #platform-box { float: right; position: relative; width: 35%; padding: 20px 20px 0 20px; margin-left: 30px; margin-bottom: 30px; background-color: #ceead6; border-color: #e8eaed; border-style: solid; } #sb-box { float: right; position: relative; width: 25%; padding: 20px 20px 0 20px; margin-left: 30px; margin-bottom: 30px; background-color: #d2e3fc; border-color: #e8eaed; border-style: solid; } /** Table formatting used in the How to use, How to access, and Inputs and * outputs sections of the API overviews. You can leave the first column blank, * as shown in the How to access sections. For questions, contact @wildwood **/ .implementation-path tr td:first-of-type { background: var(--tenant-background-1) !important; max-width: 48px; vertical-align: top; } .implementation-path tr td:nth-of-type(2) { background: var(--tenant-background-1) !important; color: var(--tenant-primary-text-color); min-width: 200px; text-align: left; vertical-align: top; } .implementation-path tr td { color: var(--tenant-secondary-text-color); padding: 24px; } .implementation-path tr { border-top: var(--tenant-primary-border); vertical-align: top; } /** From docs-intro.css - This forms the bubbles with numbers in the above table. **/ .implementation-path .numbered { background: var(--tenant-numbered-row-background-color, #BDBDBD); border-radius: 50%; color: var(--tenant-inverted-text-color); display: inline-block; font-size: 20px; height: 36px; line-height: 36px; margin-right: 20px; text-align: center; vertical-align: top; width: 36px; position: relative; top:-8px; } </style><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"> <b>Announcement:</b> New basemap styling is coming soon to Google Maps Platform. This update to map styling includes a new default color palette, modernized pins, and improvements to map experiences and usability. All map styles will be automatically updated in March 2025. For more information on availability and how to opt in earlier, see <a href="/maps/new-map-style-opt-in">New map style for Google Maps Platform</a>. </div> </div> </div> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/products" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="" > Products </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/maps" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Google Maps Platform" > Google Maps Platform </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/maps/documentation" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="" > Documentation </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/maps/web" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="5" track-type="globalNav" track-name="breadcrumb" track-metadata-position="5" track-metadata-eventdetail="Google Maps APIs for Web" > Web </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/maps/documentation/javascript" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="6" track-type="globalNav" track-name="breadcrumb" track-metadata-position="6" track-metadata-eventdetail="Maps JavaScript API" > Maps JavaScript API </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <devsite-feedback position="header" project-name="Maps JavaScript API" product-id="81777" bucket="" context="Maps JS API v3" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="header" class="nocontent" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png" project-support-url="https://developers.google.com/maps/documentation/javascript/support" > <button> Send feedback </button> </devsite-feedback> <h1 class="devsite-page-title" tabindex="-1"> Distance Matrix 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> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <section class="expandable"> <span class="showalways" style="color:#039be5"><b>Note: Server-side libraries</b></span> <aside class="note"> <p>This page describes the client-side service available with the Maps JavaScript API. If you want to work with Google Maps web services on your server, take a look at the <a href="/maps/web-services/client-library">Node.js Client for Google Maps Services</a>. The page at that link also introduces the Java Client, Python Client and Go Client for Google Maps Services.</p> </aside> </section> <h2 id="distance_matrix" data-text="Overview" tabindex="-1">Overview</h2> <aside class="note"> Also see the Maps JavaScript API Reference: <a href="/maps/documentation/javascript/reference/distance-matrix">Distance Matrix</a> </aside> <p>Google's Distance Matrix service computes travel distance and journey duration between multiple origins and destinations using a given mode of travel.</p> <p>This service does not return detailed route information. Route information, including polylines and textual directions, can be obtained by passing the desired single origin and destination to the <a href="/maps/documentation/javascript/directions">Directions Service</a>. </p> <h2 id="GetStarted" data-text="Getting started" tabindex="-1">Getting started</h2> <p>Before using the Distance Matrix service in the Maps JavaScript API, first ensure that the Distance Matrix API is enabled in the Google Cloud Console, in the same project you set up for the Maps JavaScript API.</p> <p>To view your list of enabled APIs:</p> <ol> <li>Go to the <a href="https://console.cloud.google.com/project/_/apiui/apis/enabled?utm_source=Docs_EnabledAPIsView" target="_blank"> Google Cloud Console</a>. </li> <li>Click the <strong>Select a project</strong> button, then select the same project you set up for the Maps JavaScript API and click <strong>Open</strong>.</li> <li>From the list of APIs on the <strong>Dashboard</strong>, look for <strong>Distance Matrix API</strong>.</li> <li>If you see the API in the list, you’re all set. If the API is <em>not</em> listed, enable it: <ol> <li>At the top of the page, select <strong>ENABLE API</strong> to display the <strong>Library</strong> tab. Alternatively, from the left side menu, select <strong>Library</strong>.</li> <li>Search for <strong>Distance Matrix API</strong>, then select it from the results list. </li> <li>Select <strong>ENABLE</strong>. When the process finishes, <strong>Distance Matrix API</strong> appears in the list of APIs on the <strong>Dashboard</strong>.</li> </ol> </li> </ol> <h2 id="pricing" data-text="Pricing and policies" tabindex="-1">Pricing and policies</h2> <h3 id="pricing_1" data-text="Pricing" tabindex="-1">Pricing</h3> <p>Effective July 16, 2018, a new pay-as-you-go pricing plan went into effect for Maps, Routes, and Places. To learn more about the new pricing and usage limits for your use of the JavaScript Distance Matrix service, see <a href="/maps/documentation/distance-matrix/usage-and-billing">Usage and Billing</a> for the Distance Matrix API.</p> <p><strong>Note</strong>: Each query sent to the Distance Matrix service is limited by the number of allowed elements, where the number of <em>origins</em> times the number of <em>destinations</em> defines the number of elements.</p> <h3 id="policies" data-text="Policies" tabindex="-1">Policies</h3> <p>Use of the Distance Matrix service must be in accordance with the <a href="/maps/documentation/distance-matrix/policies">policies described for the Distance Matrix API</a>.</p> <h2 id="distance_matrix_requests" data-text="Distance Matrix Requests" tabindex="-1">Distance Matrix Requests</h2> <p>Accessing the Distance Matrix 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 <em>callback</em> method to execute upon completion of the request, to process the results.</p> <p>You access the Distance Matrix service within your code via the <code translate="no" dir="ltr">google.maps.DistanceMatrixService</code> constructor object. The <code translate="no" dir="ltr">DistanceMatrixService.getDistanceMatrix()</code> method initiates a request to the Distance Matrix service, passing it a <code translate="no" dir="ltr">DistanceMatrixRequest</code> object literal containing the origins, destinations, and travel mode, as well as a callback method to execute upon receipt of the response.</p> <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript"><span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">origin1</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">maps</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">LatLng</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-mf">55.930385</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">-</span><span class="devsite-syntax-mf">3.118425</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">origin2</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'Greenwich, England'</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">destinationA</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'Stockholm, Sweden'</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">destinationB</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">maps</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">LatLng</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-mf">50.087692</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">14.421150</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">service</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">maps</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">DistanceMatrixService</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-nx">service</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">getDistanceMatrix</span><span class="devsite-syntax-p">(</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">origins</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">origin1</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">origin2</span><span class="devsite-syntax-p">],</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">destinations</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">destinationA</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">destinationB</span><span class="devsite-syntax-p">],</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">travelMode</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'DRIVING'</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">transitOptions</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">TransitOptions</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">drivingOptions</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">DrivingOptions</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">unitSystem</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">UnitSystem</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">avoidHighways</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Boolean</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">avoidTolls</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Boolean</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">callback</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-kd">function</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">callback</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">response</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">status</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// See <a href="#distance_matrix_parsing_the_results">Parsing the Results</a> for</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// the basics of a callback function.</span> <span class="devsite-syntax-p">}</span></pre></devsite-code> <p><a class="button button-primary" href="/maps/documentation/javascript/examples/distance-matrix">View example</a></p> <p>The <code translate="no" dir="ltr">DistanceMatrixRequest</code> contains the following fields:</p> <ul> <li><code translate="no" dir="ltr">origins</code> (required) — An array containing one or more address strings, <code translate="no" dir="ltr">google.maps.LatLng</code> objects, or <a href="/maps/documentation/javascript/reference/directions#Place">Place</a> objects from which to calculate distance and time.</li> <li><code translate="no" dir="ltr">destinations</code> (required) — An array containing one or more address strings, <code translate="no" dir="ltr">google.maps.LatLng</code> objects, or <a href="/maps/documentation/javascript/reference/directions#Place">Place</a> objects to which to calculate distance and time.</li> <li><code translate="no" dir="ltr">travelMode</code> (<em>optional</em>) — The mode of transport to use when calculating directions. See the section on <a href="#travel_modes">travel modes</a>.</li> <li><code translate="no" dir="ltr">transitOptions</code> (<em>optional</em>) — Options that apply only to requests where <code translate="no" dir="ltr">travelMode</code> is <code translate="no" dir="ltr">TRANSIT</code>. Valid values are described in the section on <a href="#transit_options">transit options</a>.</li> <li><code translate="no" dir="ltr">drivingOptions</code> (<em>optional</em>) specifies values that apply only to requests where <code translate="no" dir="ltr">travelMode</code> is <code translate="no" dir="ltr">DRIVING</code>. Valid values are described in the section on <a href="#DrivingOptions">Driving Options</a>.</li> <li><code translate="no" dir="ltr">unitSystem</code> (<em>optional</em>) — The unit system to use when displaying distance. Accepted values are: <ul> <li><code translate="no" dir="ltr">google.maps.UnitSystem.METRIC</code> (default)</li> <li><code translate="no" dir="ltr">google.maps.UnitSystem.IMPERIAL</code></li> </ul> </li> <li><code translate="no" dir="ltr">avoidHighways</code> (<em>optional</em>) — If <code translate="no" dir="ltr">true</code>, the routes between origins and destinations will be calculated to avoid highways where possible.</li> <li><code translate="no" dir="ltr">avoidTolls</code> (<em>optional</em>) — If <code translate="no" dir="ltr">true</code>, the directions between points will be calculated using non-toll routes, wherever possible.</li> </ul> <aside class="note"><strong>Note:</strong> The <code translate="no" dir="ltr">durationInTraffic</code> field is now <strong>deprecated</strong>. It was previously the recommended way for Google Maps Platform Premium Plan customers to specify whether the result should include a duration that takes into account current traffic conditions. You should now use the <code translate="no" dir="ltr">drivingOptions</code> field instead. </aside> <h3 id="travel_modes" data-text="Travel Modes" tabindex="-1">Travel Modes</h3> <p>When calculating times and distances, you can specify which transportation mode to use. The following travel modes are currently supported:</p> <ul> <li><code translate="no" dir="ltr">BICYCLING</code> requests bicycling directions via bicycle paths & preferred streets (currently only available in the US and some Canadian cities).</li> <li><code translate="no" dir="ltr">DRIVING</code> (default) indicates standard driving directions using the road network.</li> <li><code translate="no" dir="ltr">TRANSIT</code> requests directions via public transit routes. This option may only be specified if the request includes an API key. See the section on <a href="#transit_options">transit options</a> for the available options in this type of request.</li> <li><code translate="no" dir="ltr">WALKING</code> requests walking directions via pedestrian paths & sidewalks (where available).</li> </ul> <h3 id="transit_options" data-text="Transit Options" tabindex="-1">Transit Options</h3> <p class="note">The Transit Service is currently 'experimental'. During this phase, we will be implementing rate limits to prevent API abuse. We will eventually enforce a cap on total queries per map load based on fair usage of the API.</p> <p>The available options for a distance matrix request vary across travel modes. In transit requests, the <code translate="no" dir="ltr">avoidHighways</code> and <code translate="no" dir="ltr">avoidTolls</code> options are ignored. You can specify transit-specific routing options through the <a href="/maps/documentation/javascript/3.exp/reference#TransitOptions"><code translate="no" dir="ltr">TransitOptions</code></a> object literal.</p> <p>Transit requests are time sensitive. Calculations will only be returned for times in the future.</p> <p>The <code translate="no" dir="ltr">TransitOptions</code> object literal contains the following fields:</p> <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript"><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">arrivalTime</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Date</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">departureTime</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Date</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">modes</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">transitMode1</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">transitMode2</span><span class="devsite-syntax-p">]</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">routingPreference</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">TransitRoutePreference</span> <span class="devsite-syntax-p">}</span></pre></devsite-code> <p>These fields are explained below:</p> <ul> <li><code translate="no" dir="ltr">arrivalTime</code> (<em>optional</em>) specifies the desired time of arrival as a <code translate="no" dir="ltr">Date</code> object. If arrival time is specified, departure time is ignored.</li> <li><code translate="no" dir="ltr">departureTime</code> (<em>optional</em>) specifies the desired time of departure as a <code translate="no" dir="ltr">Date</code> object. The <code translate="no" dir="ltr">departureTime</code> will be ignored if <code translate="no" dir="ltr">arrivalTime</code> is specified. Defaults to now (that is, the current time) if no value is specified for either <code translate="no" dir="ltr">departureTime</code> or <code translate="no" dir="ltr">arrivalTime</code>.</li> <li><code translate="no" dir="ltr">modes</code> (<em>optional</em>) is an array containing one or more <code translate="no" dir="ltr">TransitMode</code> object literals. This field may only be included if the request includes an API key. Each <code translate="no" dir="ltr">TransitMode</code> specifies a preferred mode of transit. The following values are permitted: <ul> <li><code translate="no" dir="ltr">BUS</code> indicates that the calculated route should prefer travel by bus.</li> <li><code translate="no" dir="ltr">RAIL</code> indicates that the calculated route should prefer travel by train, tram, light rail, and subway.</li> <li><code translate="no" dir="ltr">SUBWAY</code> indicates that the calculated route should prefer travel by subway.</li> <li><code translate="no" dir="ltr">TRAIN</code> indicates that the calculated route should prefer travel by train.</li> <li><code translate="no" dir="ltr">TRAM</code> indicates that the calculated route should prefer travel by tram and light rail.</li> </ul> </li> <li><code translate="no" dir="ltr">routingPreference</code> (<em>optional</em>) specifies preferences for transit routes. Using this option, you can bias the options returned, rather than accepting the default best route chosen by the API. This field may only be specified if the request includes an API key. The following values are permitted: <ul> <li><code translate="no" dir="ltr">FEWER_TRANSFERS</code> indicates that the calculated route should prefer a limited number of transfers.</li> <li><code translate="no" dir="ltr">LESS_WALKING</code> indicates that the calculated route should prefer limited amounts of walking.</li> </ul> </li> </ul> <h3 id="DrivingOptions" data-text="Driving Options" tabindex="-1">Driving Options</h3> <p>Use the <code translate="no" dir="ltr">drivingOptions</code> object to specify a departure time for calculating the best route to your destination given the expected traffic conditions. You can also specify whether you want the estimated time in traffic to be pessimistic, optimistic, or the best estimate based on historical traffic conditions and live traffic.</p> <p>The <code translate="no" dir="ltr">drivingOptions</code> object contains the following fields:</p> <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript"><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">departureTime</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Date</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">trafficModel</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">TrafficModel</span> <span class="devsite-syntax-p">}</span></pre></devsite-code> <p>These fields are explained below:</p> <ul> <li><code translate="no" dir="ltr">departureTime</code> (<em>required for the <code translate="no" dir="ltr">drivingOptions</code> object literal to be valid</em>) specifies the desired time of departure as a <code translate="no" dir="ltr">Date</code> object. The value must be set to the current time or some time in the future. It cannot be in the past. (The API converts all dates to UTC to ensure consistent handling across time zones.) If you include the <code translate="no" dir="ltr">departureTime</code> in the request, the API returns the best route given the expected traffic conditions at the time, and includes the predicted time in traffic (<code translate="no" dir="ltr">duration_in_traffic</code>) in the response. If you don't specify a departure time (that is, if the request does not include <code translate="no" dir="ltr">drivingOptions</code>), the returned route is a generally good route without taking traffic conditions into account. <aside class="caution"><strong>Caution: </strong>If you do not specify a departure time, the route and duration chosen are based on road network and average time-independent traffic conditions, not current road conditions. Consequently, routes may include roads that are temporarily closed. Results for a given request may vary over time due to changes in the road network, updated average traffic conditions, and the distributed nature of the service. Results may also vary between nearly-equivalent routes at any time or frequency.</aside> </li> <li><code translate="no" dir="ltr">trafficModel</code> (<em>optional</em>) specifies the assumptions to use when calculating time in traffic. This setting affects the value returned in the <code translate="no" dir="ltr">duration_in_traffic</code> field in the response, which contains the predicted time in traffic based on historical averages. Defaults to <code translate="no" dir="ltr">best_guess</code>. The following values are permitted: <ul> <li><code translate="no" dir="ltr">bestguess</code> (default) indicates that the returned <code translate="no" dir="ltr">duration_in_traffic</code> should be the best estimate of travel time given what is known about both historical traffic conditions and live traffic. Live traffic becomes more important the closer the <code translate="no" dir="ltr">departureTime</code> is to now..</li> <li><code translate="no" dir="ltr">pessimistic</code> indicates that the returned <code translate="no" dir="ltr">duration_in_traffic</code> should be longer than the actual travel time on most days, though occasional days with particularly bad traffic conditions may exceed this value.</li> <li><code translate="no" dir="ltr">optimistic</code> indicates that the returned <code translate="no" dir="ltr">duration_in_traffic</code> should be shorter than the actual travel time on most days, though occasional days with particularly good traffic conditions may be faster than this value.</li> </ul> </li> </ul> <p>Below is a sample <code translate="no" dir="ltr">DistanceMatrixRequest</code> for driving routes, including a departure time and traffic model:</p> <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript"><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">origins</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[{</span><span class="devsite-syntax-nx">lat</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">55.93</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">lng</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">-</span><span class="devsite-syntax-mf">3.118</span><span class="devsite-syntax-p">},</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'Greenwich, England'</span><span class="devsite-syntax-p">],</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">destinations</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-s1">'Stockholm, Sweden'</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span><span class="devsite-syntax-nx">lat</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">50.087</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">lng</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">14.421</span><span class="devsite-syntax-p">}],</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">travelMode</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'DRIVING'</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">drivingOptions</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">departureTime</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Date</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nb">Date</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">now</span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">+</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">N</span><span class="devsite-syntax-p">),</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// for the time N milliseconds from now.</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">trafficModel</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'optimistic'</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-p">}</span></pre></devsite-code> <h2 id="distance_matrix_responses" data-text="Distance Matrix Responses" tabindex="-1">Distance Matrix Responses</h2> <p>A successful call to the Distance Matrix service returns a <code translate="no" dir="ltr">DistanceMatrixResponse</code> object and a <code translate="no" dir="ltr">DistanceMatrixStatus</code> object. These are passed to the callback function you specified in the request.</p> <p>The <code translate="no" dir="ltr">DistanceMatrixResponse</code> object contains distance and duration information for each origin/destination pair for which a route could be calculated.</p> <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript"><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"originAddresses"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"Greenwich, Greater London, UK"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"13 Great Carleton Square, Edinburgh, City of Edinburgh EH16 4, UK"</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">],</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"destinationAddresses"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"Stockholm County, Sweden"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"Dlouhá 609/2, 110 00 Praha-Staré Město, Česká republika"</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">],</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"rows"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"elements"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"status"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"OK"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"duration"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"value"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">70778</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"text"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"19 hours 40 mins"</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"distance"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"value"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">1887508</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"text"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"1173 mi"</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"status"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"OK"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"duration"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"value"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">44476</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"text"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"12 hours 21 mins"</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"distance"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"value"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">1262780</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"text"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"785 mi"</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">]</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"elements"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"status"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"OK"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"duration"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"value"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">96000</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"text"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"1 day 3 hours"</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"distance"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"value"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">2566737</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"text"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"1595 mi"</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"status"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"OK"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"duration"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"value"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">69698</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"text"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"19 hours 22 mins"</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"distance"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"value"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">1942009</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"text"</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"1207 mi"</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">]</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">]</span> <span class="devsite-syntax-p">}</span></pre></devsite-code> <h3 id="distance_matrix_results" data-text="Distance Matrix Results" tabindex="-1">Distance Matrix Results</h3> <p>The supported fields in a response are explained below.</p> <ul> <li><code translate="no" dir="ltr">originAddresses</code> is an array containing the locations passed in the <code translate="no" dir="ltr">origins</code> field of the Distance Matrix request. The addresses are returned as they are formatted by the geocoder.</li> <li><code translate="no" dir="ltr">destinationAddresses</code> is an array containing the locations passed in the <code translate="no" dir="ltr">destinations</code> field, in the format returned by the geocoder.</li> <li><code translate="no" dir="ltr">rows</code> is an array of <code translate="no" dir="ltr">DistanceMatrixResponseRow</code> objects, with each row corresponding to an origin.</li> <li><code translate="no" dir="ltr">elements</code> are children of <code translate="no" dir="ltr">rows</code>, and correspond to a pairing of the row's origin with each destination. They contain status, duration, distance, and fare information (if available) for each origin/destination pair.</li> <li>Each <code translate="no" dir="ltr">element</code> contains the following fields: <ul> <li><code translate="no" dir="ltr">status</code>: See <a href="#distance_matrix_status_codes">Status Codes</a> for a list of possible status codes.</li> <li><code translate="no" dir="ltr">duration</code>: The length of time it takes to travel this route, expressed in seconds (the <code translate="no" dir="ltr">value</code> field) and as <code translate="no" dir="ltr">text</code>. The textual value is formatted according to the <code translate="no" dir="ltr">unitSystem</code> specified in the request (or in metric, if no preference was supplied).</li> <li><code translate="no" dir="ltr">duration_in_traffic</code>: The length of time it takes to travel this route taking into account current traffic conditions, expressed in seconds (the <code translate="no" dir="ltr">value</code> field) and as <code translate="no" dir="ltr">text</code>. The textual value is formatted according to the <code translate="no" dir="ltr">unitSystem</code> specified in the request (or in metric, if no preference was supplied). The <code translate="no" dir="ltr">duration_in_traffic</code> is only returned where traffic data is available, the <code translate="no" dir="ltr">mode</code> is set to <code translate="no" dir="ltr">driving</code>, and <code translate="no" dir="ltr">departureTime</code> is included as part of the <code translate="no" dir="ltr">distanceMatrixOptions</code> field in the request.</li> <li><code translate="no" dir="ltr">distance</code>: The total distance of this route, expressed in meters (<code translate="no" dir="ltr">value</code>) and as <code translate="no" dir="ltr">text</code>. The textual value is formatted according to the <code translate="no" dir="ltr">unitSystem</code> specified in the request (or in metric, if no preference was supplied).</li> <li><code translate="no" dir="ltr">fare</code>: Contains the total fare (that is, the total ticket costs) on this route. This property is only returned for transit requests and only for transit providers where fare information is available. The information includes: <ul> <li><code translate="no" dir="ltr">currency</code>: An <a href="https://en.wikipedia.org/wiki/ISO_4217">ISO 4217 currency code</a> indicating the currency that the amount is expressed in. </li> <li><code translate="no" dir="ltr">value</code>: The total fare amount, in the currency specified above.</li> </ul> </li> </ul> </li> </ul> <h3 id="distance_matrix_status_codes" data-text="Status Codes" tabindex="-1">Status Codes</h3> <p>The Distance Matrix response includes a status code for the response as a whole, as well as a status for each element.</p> <h4 id="response-status-codes" data-text="Response Status Codes" tabindex="-1">Response Status Codes</h4> <p>Status codes that apply to the <code translate="no" dir="ltr">DistanceMatrixResponse</code> are passed in the <code translate="no" dir="ltr">DistanceMatrixStatus</code> object and include:</p> <ul> <li><code translate="no" dir="ltr">OK</code> — The request is valid. This status can be returned even if no routes were found between any of the origins and destinations. See <a href="#distance_matrix_element_status_codes">Element Status Codes</a> for the element-level status information.</li> <li><code translate="no" dir="ltr">INVALID_REQUEST</code> — The provided request was invalid. This is often due to missing required fields. See the <a href="#distance_matrix_results">list of supported fields</a> above.</li> <li><code translate="no" dir="ltr">MAX_ELEMENTS_EXCEEDED</code> — The product of origins and destinations exceeds the <a href="/maps/documentation/distance-matrix/usage-and-billing#other-usage-limits">per-query limit</a>.</li> <li><code translate="no" dir="ltr">MAX_DIMENSIONS_EXCEEDED</code> — Your request contained more than 25 origins, or more than 25 destinations.</li> <li><code translate="no" dir="ltr">OVER_QUERY_LIMIT</code> — Your application has requested too many elements within the allowed time period. The request should succeed if you try again after a reasonable amount of time.</li> <li><code translate="no" dir="ltr">REQUEST_DENIED</code> — The service denied use of the Distance Matrix service by your web page.</li> <li><code translate="no" dir="ltr">UNKNOWN_ERROR</code> — A Distance Matrix request could not be processed due to a server error. The request may succeed if you try again.</li> </ul> <h4 id="distance_matrix_element_status_codes" data-text="Element Status Codes" tabindex="-1">Element Status Codes</h4> <p>The following status codes apply to specific <code translate="no" dir="ltr">DistanceMatrixElement</code> objects:</p> <ul> <li><code translate="no" dir="ltr">NOT_FOUND</code> — The origin and/or destination of this pairing could not be geocoded.</li> <li><code translate="no" dir="ltr">OK</code> — The response contains a valid result.</li> <li><code translate="no" dir="ltr">ZERO_RESULTS</code> — No route could be found between the origin and destination.</li> </ul> <h3 id="distance_matrix_parsing_the_results" data-text="Parsing the Results" tabindex="-1">Parsing the Results</h3> <p>The <code translate="no" dir="ltr">DistanceMatrixResponse</code> object contains one <code translate="no" dir="ltr">row</code> for each origin that was passed in the request. Each row contains an <code translate="no" dir="ltr">element</code> field for each pairing of that origin with the provided destination(s).</p> <div></div><devsite-code><pre class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="JavaScript"><span class="devsite-syntax-kd">function</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">callback</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">response</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">status</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">if</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">status</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">==</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'OK'</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">origins</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">response</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">originAddresses</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">destinations</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">response</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">destinationAddresses</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">for</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">i</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">0</span><span class="devsite-syntax-p">;</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">i</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o"><</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">origins</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">length</span><span class="devsite-syntax-p">;</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">i</span><span class="devsite-syntax-o">++</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">results</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">response</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">rows</span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">i</span><span class="devsite-syntax-p">].</span><span class="devsite-syntax-nx">elements</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">for</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">j</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">0</span><span class="devsite-syntax-p">;</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">j</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o"><</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">results</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">length</span><span class="devsite-syntax-p">;</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">j</span><span class="devsite-syntax-o">++</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">element</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">results</span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">j</span><span class="devsite-syntax-p">];</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">distance</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">element</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">distance</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">text</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">duration</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">element</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">duration</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">text</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kr">from</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">origins</span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">i</span><span class="devsite-syntax-p">];</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">var</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">to</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">destinations</span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-nx">j</span><span class="devsite-syntax-p">];</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-p">}</span></pre></devsite-code> </div> <devsite-recommendations display="in-page" hidden yield> </devsite-recommendations> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <devsite-feedback position="footer" project-name="Maps JavaScript API" product-id="81777" bucket="" context="Maps JS API v3" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="footer" class="nocontent" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png" project-support-url="https://developers.google.com/maps/documentation/javascript/support" > <button> Send feedback </button> </devsite-feedback> <devsite-recommendations id="recommendations-link" yield></devsite-recommendations> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2024-11-26 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-thumb-rating-feedback"> <devsite-feedback position="thumb-rating" project-name="Maps JavaScript API" product-id="81777" bucket="" context="Maps JS API v3" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="thumb-rating" class="nocontent" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png" project-support-url="https://developers.google.com/maps/documentation/javascript/support" > <button> Need to tell us more? </button> </devsite-feedback> </template> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-11-26 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> <nav class="devsite-footer-promos nocontent" aria-label="Promotions"> <ul class="devsite-footer-promos-list"> <li class="devsite-footer-promo"> <a href="http://stackoverflow.com/questions/tagged/google-maps" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 1)" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/logo-stack-overflow.svg" loading="lazy" alt="Stack Overflow"> </picture> <span class="devsite-footer-promo-label"> Stack Overflow </span> </a> <div class="devsite-footer-promo-description">Ask a question under the google-maps tag.</div> </li> <li class="devsite-footer-promo"> <a href="https://github.com/googlemaps/" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 2)" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/logo-github.svg" loading="lazy" alt="GitHub"> </picture> <span class="devsite-footer-promo-label"> GitHub </span> </a> <div class="devsite-footer-promo-description">Fork our samples and try them yourself.</div> </li> <li class="devsite-footer-promo"> <a href="https://discord.gg/f4hvx8Rp2q" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 3)" > <picture> <img class="devsite-footer-promo-icon" src="/static/maps/images/discord-color.png" loading="lazy" alt="Discord"> </picture> <span class="devsite-footer-promo-label"> Discord </span> </a> <div class="devsite-footer-promo-description">Chat with fellow developers about Google Maps Platform.</div> </li> <li class="devsite-footer-promo"> <a href="https://issuetracker.google.com/issues/new?component=188853&template=788207" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 4)" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/developers_64dp.png" loading="lazy" alt="Issue Tracker"> </picture> <span class="devsite-footer-promo-label"> Issue Tracker </span> </a> <div class="devsite-footer-promo-description">Something wrong? Send us a bug report!</div> </li> </ul> </nav> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Learn More</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/maps/faq" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > FAQ </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/maps/documentation/api-picker" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > API Picker </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/maps/documentation/javascript/tutorials" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Tutorials </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Platforms</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/maps/apis-by-platform#android" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Android </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/maps/apis-by-platform#ios" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > iOS </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/maps/apis-by-platform#web_apis" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Web </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/maps/apis-by-platform#web_service_apis" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Web Services </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Product Info</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/maps/pricing-and-plans" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-category="pricingAndPlans"data-label="footerMen"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-action="linkClick"data-label="footerMenu"> Contact Sales </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://developers.google.com/maps/support/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Support </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://cloud.google.com/maps-platform/terms" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Terms of Service </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <picture> <img class="devsite-footer-sites-logo" src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/lockup-google-for-developers.svg" loading="lazy" alt="Google Developers"> </picture> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//developer.android.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link" > Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link" > Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//firebase.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link" > Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//cloud.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link" > Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//ai.google.dev/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google AI Link" > Google AI </a> </li> <li class="devsite-footer-sites-item"> <a href="/products" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link" > All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/terms/site-terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> <li class="devsite-footer-utility-item devsite-footer-utility-button"> <span class="devsite-footer-utility-description">Sign up for the Google for Developers newsletter</span> <a class="devsite-footer-utility-link gc-analytics-event" href="/newsletter/subscribe" data-category="Site-Wide Custom Events" data-label="Footer Subscribe link" > Subscribe </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> <devsite-concierge data-info-panel data-ai-panel data-api-explorer-panel > </devsite-concierge> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[{"dimensions": {"dimension3": false, "dimension11": false, "dimension6": "en", "dimension1": "Signed out", "dimension4": "Maps JavaScript API", "dimension5": "en"}, "gaid": "UA-24532603-1", "metrics": {"ratings_count": "metric2", "ratings_value": "metric1"}, "purpose": 1}]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [{"id": "G-272J68FCRF", "purpose": 1}], "ga4p": [{"id": "G-272J68FCRF", "purpose": 1}], "gtm": [{"id": "GTM-W2H69MN", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Maps JavaScript API", "signedIn": "False", "tenant": "developers", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="GPV1YjiGxnFdzEZYOUkPhTgPwLOYRg"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/js/app_loader.js', '[1,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers","https://developers-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/developers/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,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_page_saving","Concierge__enable_pushui","Profiles__enable_dashboard_curated_recommendations","Search__enable_ai_eligibility_checks","EngEduTelemetry__enable_engedu_telemetry","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_release_notes_notifications","TpcFeatures__enable_mirror_tenant_redirects","Cloud__enable_legacy_calculator_redirect","Analytics__enable_clearcut_logging","Concierge__enable_concierge","DevPro__enable_cloud_innovators_plus","Cloud__enable_cloud_dlp_service","Cloud__enable_cloudx_ping","Profiles__enable_awarding_url","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_variable_operator","Profiles__enable_profile_collections","Profiles__enable_recognition_badges","Cloud__enable_cloud_facet_chat","Search__enable_ai_search_summaries","Search__enable_page_map","Cloud__enable_cloud_shell","MiscFeatureFlags__enable_explain_this_code","Significatio__enable_by_tenant","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__enable_firebase_utm","DevPro__enable_developer_subscriptions","Profiles__enable_public_developer_profiles","Cloud__enable_cloudx_experiment_ids","Experiments__reqs_query_experiments","Cloud__enable_free_trial_server_call","Profiles__enable_completecodelab_endpoint","CloudShell__cloud_code_overflow_menu","Concierge__enable_concierge_restricted","Search__enable_ai_search_summaries_restricted","CloudShell__cloud_shell_button","MiscFeatureFlags__emergency_css","Cloud__enable_llm_concierge_chat","Search__enable_suggestions_from_borg","Profiles__require_profile_eligibility_for_signin","TpcFeatures__enable_required_headers","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__enable_view_transitions","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__enable_project_variables","BookNav__enable_tenant_cache_key","Search__enable_dynamic_content_confidential_banner"],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],[[1,1],[15,12],[6,5],[12,9],[13,10],[4,3],[16,13],[11,8],[5,4],[14,11],[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"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Distance Matrix Service | Maps JavaScript API | Google for Developers