Geolocation

// Note: This example requires that you consent to location sharing when // prompted by your browser. If you see the error "The Geolocation service // failed.", it means you probably did not give permission for the browser to // locate you. let map: google.maps.Map, infoWindow: google.maps.InfoWindow;  function initMap(): void {   map = new google.maps.Map(document.getElementById("map") as HTMLElement, {     center: { lat: -34.397, lng: 150.644 },     zoom: 6,   });   infoWindow = new google.maps.InfoWindow();    const locationButton = document.createElement("button");    locationButton.textContent = "Pan to Current Location";   locationButton.classList.add("custom-map-control-button");    map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);    locationButton.addEventListener("click", () => {     // Try HTML5 geolocation.     if (navigator.geolocation) {       navigator.geolocation.getCurrentPosition(         (position: GeolocationPosition) => {           const pos = {             lat: position.coords.latitude,             lng: position.coords.longitude,           };            infoWindow.setPosition(pos);           infoWindow.setContent("Location found.");           infoWindow.open(map);           map.setCenter(pos);         },         () => {           handleLocationError(true, infoWindow, map.getCenter()!);         }       );     } else {       // Browser doesn't support Geolocation       handleLocationError(false, infoWindow, map.getCenter()!);     }   }); }  function handleLocationError(   browserHasGeolocation: boolean,   infoWindow: google.maps.InfoWindow,   pos: google.maps.LatLng ) {   infoWindow.setPosition(pos);   infoWindow.setContent(     browserHasGeolocation       ? "Error: The Geolocation service failed."       : "Error: Your browser doesn't support geolocation."   );   infoWindow.open(map); }  declare global {   interface Window {     initMap: () => void;   } } window.initMap = initMap;
index.ts

// Note: This example requires that you consent to location sharing when // prompted by your browser. If you see the error "The Geolocation service // failed.", it means you probably did not give permission for the browser to // locate you. let map, infoWindow;  function initMap() {   map = new google.maps.Map(document.getElementById("map"), {     center: { lat: -34.397, lng: 150.644 },     zoom: 6,   });   infoWindow = new google.maps.InfoWindow();    const locationButton = document.createElement("button");    locationButton.textContent = "Pan to Current Location";   locationButton.classList.add("custom-map-control-button");   map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);   locationButton.addEventListener("click", () => {     // Try HTML5 geolocation.     if (navigator.geolocation) {       navigator.geolocation.getCurrentPosition(         (position) => {           const pos = {             lat: position.coords.latitude,             lng: position.coords.longitude,           };            infoWindow.setPosition(pos);           infoWindow.setContent("Location found.");           infoWindow.open(map);           map.setCenter(pos);         },         () => {           handleLocationError(true, infoWindow, map.getCenter());         },       );     } else {       // Browser doesn't support Geolocation       handleLocationError(false, infoWindow, map.getCenter());     }   }); }  function handleLocationError(browserHasGeolocation, infoWindow, pos) {   infoWindow.setPosition(pos);   infoWindow.setContent(     browserHasGeolocation       ? "Error: The Geolocation service failed."       : "Error: Your browser doesn't support geolocation.",   );   infoWindow.open(map); }  window.initMap = initMap;
index.js

/*   * Always set the map height explicitly to define the size of the div element  * that contains the map.   */ #map {   height: 100%; }  /*   * Optional: Makes the sample page fill the window.   */ html, body {   height: 100%;   margin: 0;   padding: 0; }  .custom-map-control-button {   background-color: #fff;   border: 0;   border-radius: 2px;   box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);   margin: 10px;   padding: 0 0.5em;   font: 400 18px Roboto, Arial, sans-serif;   overflow: hidden;   height: 40px;   cursor: pointer; } .custom-map-control-button:hover {   background: rgb(235, 235, 235); } 
style.css

<html>   <head>     <title>Geolocation</title>      <link rel="stylesheet" type="text/css" href="./style.css" />     <script type="module" src="./index.js"></script>   </head>   <body>     <div id="map"></div>      <!--        The `defer` attribute causes the script to execute after the full HTML       document has been parsed. For non-blocking uses, avoiding race conditions,       and consistent behavior across browsers, consider loading using Promises. See       https://developers.google.com/maps/documentation/javascript/load-maps-js-api       for more information.       -->     <script       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"       defer     ></script>   </body> </html>
index.html