Stay organized with collectionsSave and categorize content based on your preferences.
This example creates a map that displays the geographic location of a user or
device on a Google map, through use of their browser's HTML5 Geolocation
feature. The user must consent to location sharing or else an error is shown.
Read more about theW3C
Geolocation standard.
// 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.letmap:google.maps.Map,infoWindow:google.maps.InfoWindow;functioninitMap():void{map=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{center:{lat:-34.397,lng:150.644},zoom:6,});infoWindow=newgoogle.maps.InfoWindow();constlocationButton=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)=>{constpos={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 GeolocationhandleLocationError(false,infoWindow,map.getCenter()!);}});}functionhandleLocationError(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);}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
// 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.letmap,infoWindow;functioninitMap(){map=newgoogle.maps.Map(document.getElementById("map"),{center:{lat:-34.397,lng:150.644},zoom:6,});infoWindow=newgoogle.maps.InfoWindow();constlocationButton=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)=>{constpos={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 GeolocationhandleLocationError(false,infoWindow,map.getCenter());}});}functionhandleLocationError(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;
/** 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:01px4px-1pxrgba(0,0,0,0.3);margin:10px;padding:00.5em;font:40018pxRoboto,Arial,sans-serif;overflow:hidden;height:40px;cursor:pointer;}.custom-map-control-button:hover{background:rgb(235,235,235);}
<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>
Git and Node.js are required to run this sample locally. Follow theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\u003cp\u003eThis example demonstrates how to display a user's location on a Google Map using the HTML5 Geolocation feature, requiring user consent for location sharing.\u003c/p\u003e\n"],["\u003cp\u003eUpon clicking a "Pan to Current Location" button, the map centers on the user's location and displays an info window, handling errors gracefully if location services fail or are unavailable.\u003c/p\u003e\n"],["\u003cp\u003eThe provided code snippets include TypeScript, JavaScript, CSS, and HTML to showcase the implementation of this geolocation functionality.\u003c/p\u003e\n"],["\u003cp\u003eTo run this sample locally, you need Git and Node.js installed, along with cloning the repository, installing dependencies, and starting the application using npm commands.\u003c/p\u003e\n"]]],[],null,["This example creates a map that displays the geographic location of a user or\ndevice on a Google map, through use of their browser's HTML5 Geolocation\nfeature. The user must consent to location sharing or else an error is shown.\nRead more about the\n[W3C\nGeolocation standard](https://w3c.github.io/geolocation-api/).\n\nRead the [documentation](/maps/documentation/javascript/geolocation). \n\nTypeScript \n\n```typescript\n// Note: This example requires that you consent to location sharing when\n// prompted by your browser. If you see the error \"The Geolocation service\n// failed.\", it means you probably did not give permission for the browser to\n// locate you.\nlet map: google.maps.Map, infoWindow: google.maps.InfoWindow;\n\nfunction initMap(): void {\n map = new google.maps.Map(document.getElementById(\"map\") as HTMLElement, {\n center: { lat: -34.397, lng: 150.644 },\n zoom: 6,\n });\n infoWindow = new google.maps.InfoWindow();\n\n const locationButton = document.createElement(\"button\");\n\n locationButton.textContent = \"Pan to Current Location\";\n locationButton.classList.add(\"custom-map-control-button\");\n\n map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);\n\n locationButton.addEventListener(\"click\", () =\u003e {\n // Try HTML5 geolocation.\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(\n (position: GeolocationPosition) =\u003e {\n const pos = {\n lat: position.coords.latitude,\n lng: position.coords.longitude,\n };\n\n infoWindow.setPosition(pos);\n infoWindow.setContent(\"Location found.\");\n infoWindow.open(map);\n map.setCenter(pos);\n },\n () =\u003e {\n handleLocationError(true, infoWindow, map.getCenter()!);\n }\n );\n } else {\n // Browser doesn't support Geolocation\n handleLocationError(false, infoWindow, map.getCenter()!);\n }\n });\n}\n\nfunction handleLocationError(\n browserHasGeolocation: boolean,\n infoWindow: google.maps.InfoWindow,\n pos: google.maps.LatLng\n) {\n infoWindow.setPosition(pos);\n infoWindow.setContent(\n browserHasGeolocation\n ? \"Error: The Geolocation service failed.\"\n : \"Error: Your browser doesn't support geolocation.\"\n );\n infoWindow.open(map);\n}\n\ndeclare global {\n interface Window {\n initMap: () =\u003e void;\n }\n}\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/map-geolocation/index.ts#L8-L73\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\n// Note: This example requires that you consent to location sharing when\n// prompted by your browser. If you see the error \"The Geolocation service\n// failed.\", it means you probably did not give permission for the browser to\n// locate you.\nlet map, infoWindow;\n\nfunction initMap() {\n map = new google.maps.Map(document.getElementById(\"map\"), {\n center: { lat: -34.397, lng: 150.644 },\n zoom: 6,\n });\n infoWindow = new google.maps.InfoWindow();\n\n const locationButton = document.createElement(\"button\");\n\n locationButton.textContent = \"Pan to Current Location\";\n locationButton.classList.add(\"custom-map-control-button\");\n map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);\n locationButton.addEventListener(\"click\", () =\u003e {\n // Try HTML5 geolocation.\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(\n (position) =\u003e {\n const pos = {\n lat: position.coords.latitude,\n lng: position.coords.longitude,\n };\n\n infoWindow.setPosition(pos);\n infoWindow.setContent(\"Location found.\");\n infoWindow.open(map);\n map.setCenter(pos);\n },\n () =\u003e {\n handleLocationError(true, infoWindow, map.getCenter());\n },\n );\n } else {\n // Browser doesn't support Geolocation\n handleLocationError(false, infoWindow, map.getCenter());\n }\n });\n}\n\nfunction handleLocationError(browserHasGeolocation, infoWindow, pos) {\n infoWindow.setPosition(pos);\n infoWindow.setContent(\n browserHasGeolocation\n ? \"Error: The Geolocation service failed.\"\n : \"Error: Your browser doesn't support geolocation.\",\n );\n infoWindow.open(map);\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/map-geolocation/docs/index.js#L7-L61\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n\nCSS \n\n```css\n/* \n * Always set the map height explicitly to define the size of the div element\n * that contains the map. \n */\n#map {\n height: 100%;\n}\n\n/* \n * Optional: Makes the sample page fill the window. \n */\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}\n\n.custom-map-control-button {\n background-color: #fff;\n border: 0;\n border-radius: 2px;\n box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);\n margin: 10px;\n padding: 0 0.5em;\n font: 400 18px Roboto, Arial, sans-serif;\n overflow: hidden;\n height: 40px;\n cursor: pointer;\n}\n.custom-map-control-button:hover {\n background: rgb(235, 235, 235);\n}\nhttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/map-geolocation/docs/style.css#L7-L40\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eGeolocation\u003c/title\u003e\n\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.css\" /\u003e\n \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n\n \u003c!-- \n The `defer` attribute causes the script to execute after the full HTML\n document has been parsed. For non-blocking uses, avoiding race conditions,\n and consistent behavior across browsers, consider loading using Promises. See\n https://developers.google.com/maps/documentation/javascript/load-maps-js-api\n for more information.\n --\u003e\n \u003cscript\n src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly\"\n defer\n \u003e\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/map-geolocation/docs/index.html#L8-L30\n```\n[View example](/maps/documentation/javascript/examples/map-geolocation)\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/map-geolocation/jsfiddle) [Google Cloud Shell](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-map-geolocation&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\nClone Sample\n\n\nGit and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. \n\n git clone -b sample-map-geolocation https://github.com/googlemaps/js-samples.git\n cd js-samples\n npm i\n npm start\n\n\nOther samples can be tried by switching to any branch beginning with `sample-`\u003cvar translate=\"no\"\u003eSAMPLE_NAME\u003c/var\u003e. \n\n git checkout sample-\u003cvar translate=\"no\"\u003e\u003cspan class=\"devsite-syntax-nx\"\u003eSAMPLE_NAME\u003c/span\u003e\u003c/var\u003e\n npm i\n npm start"]]
