Stay organized with collectionsSave and categorize content based on your preferences.
This example listens for theclickevent, gets the latitude and longitude coordinates
of the click fromgoogle.maps.MapMouseEvent.latLng, and displays those coordinates in
an info window.
asyncfunctioninitMap(){// Request needed libraries.const{Map}=awaitgoogle.maps.importLibrary("maps")asgoogle.maps.MapsLibrary;constmyLatlng={lat:-25.363,lng:131.044};constmap=newgoogle.maps.Map(document.getElementById("map")!,{zoom:4,center:myLatlng,});// Create the initial InfoWindow.letinfoWindow=newgoogle.maps.InfoWindow({content:"Click the map to get Lat/Lng!",position:myLatlng,});infoWindow.open(map);// Configure the click listener.map.addListener("click",(mapsMouseEvent)=>{// Close the current InfoWindow.infoWindow.close();// Create a new InfoWindow.infoWindow=newgoogle.maps.InfoWindow({position:mapsMouseEvent.latLng,});infoWindow.setContent(JSON.stringify(mapsMouseEvent.latLng.toJSON(),null,2));infoWindow.open(map);});}initMap();
asyncfunctioninitMap(){// Request needed libraries.const{Map}=awaitgoogle.maps.importLibrary("maps");constmyLatlng={lat:-25.363,lng:131.044};constmap=newgoogle.maps.Map(document.getElementById("map"),{zoom:4,center:myLatlng,});// Create the initial InfoWindow.letinfoWindow=newgoogle.maps.InfoWindow({content:"Click the map to get Lat/Lng!",position:myLatlng,});infoWindow.open(map);// Configure the click listener.map.addListener("click",(mapsMouseEvent)=>{// Close the current InfoWindow.infoWindow.close();// Create a new InfoWindow.infoWindow=newgoogle.maps.InfoWindow({position:mapsMouseEvent.latLng,});infoWindow.setContent(JSON.stringify(mapsMouseEvent.latLng.toJSON(),null,2),);infoWindow.open(map);});}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;}
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 capturing the latitude and longitude coordinates of a user's click on a Google Map.\u003c/p\u003e\n"],["\u003cp\u003eIt uses an \u003ccode\u003eInfoWindow\u003c/code\u003e to display the coordinates on the map at the clicked location.\u003c/p\u003e\n"],["\u003cp\u003eThe example code is provided in both TypeScript and JavaScript, along with HTML and CSS for creating the map display.\u003c/p\u003e\n"],["\u003cp\u003eUsers can try the sample directly in JSFiddle or Google Cloud Shell, and can also clone the sample code to run it locally.\u003c/p\u003e\n"]]],[],null,["This example listens for the `click` event, gets the latitude and longitude coordinates\nof the click from `google.maps.MapMouseEvent.latLng`, and displays those coordinates in\nan info window.\n\nRead the [documentation](/maps/documentation/javascript/events#EventProperties). \n\nTypeScript \n\n```typescript\nasync function initMap() {\n // Request needed libraries.\n const { Map } = await google.maps.importLibrary(\"maps\") as google.maps.MapsLibrary;\n\n const myLatlng = { lat: -25.363, lng: 131.044 };\n\n const map = new google.maps.Map(document.getElementById(\"map\")!, {\n zoom: 4,\n center: myLatlng,\n });\n\n // Create the initial InfoWindow.\n let infoWindow = new google.maps.InfoWindow({\n content: \"Click the map to get Lat/Lng!\",\n position: myLatlng,\n });\n\n infoWindow.open(map);\n\n // Configure the click listener.\n map.addListener(\"click\", (mapsMouseEvent) =\u003e {\n // Close the current InfoWindow.\n infoWindow.close();\n\n // Create a new InfoWindow.\n infoWindow = new google.maps.InfoWindow({\n position: mapsMouseEvent.latLng,\n });\n infoWindow.setContent(\n JSON.stringify(mapsMouseEvent.latLng.toJSON(), null, 2)\n );\n infoWindow.open(map);\n });\n}\n\ninitMap();https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/event-click-latlng/index.ts#L8-L45\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nasync function initMap() {\n // Request needed libraries.\n const { Map } = await google.maps.importLibrary(\"maps\");\n const myLatlng = { lat: -25.363, lng: 131.044 };\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n zoom: 4,\n center: myLatlng,\n });\n // Create the initial InfoWindow.\n let infoWindow = new google.maps.InfoWindow({\n content: \"Click the map to get Lat/Lng!\",\n position: myLatlng,\n });\n\n infoWindow.open(map);\n // Configure the click listener.\n map.addListener(\"click\", (mapsMouseEvent) =\u003e {\n // Close the current InfoWindow.\n infoWindow.close();\n // Create a new InfoWindow.\n infoWindow = new google.maps.InfoWindow({\n position: mapsMouseEvent.latLng,\n });\n infoWindow.setContent(\n JSON.stringify(mapsMouseEvent.latLng.toJSON(), null, 2),\n );\n infoWindow.open(map);\n });\n}\n\ninitMap();https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/event-click-latlng/docs/index.js#L7-L39\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}\nhttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/event-click-latlng/docs/style.css#L7-L24\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eEvent Click LatLng\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!-- prettier-ignore --\u003e\n \u003cscript\u003e(g=\u003e{var h,a,k,p=\"The Google Maps JavaScript API\",c=\"google\",l=\"importLibrary\",q=\"__ib__\",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=\u003eh||(h=new Promise(async(f,n)=\u003e{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(/[A-Z]/g,t=\u003e\"_\"+t[0].toLowerCase()),g[k]);e.set(\"callback\",c+\".maps.\"+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=\u003eh=n(Error(p+\" could not load.\"));a.nonce=m.querySelector(\"script[nonce]\")?.nonce||\"\";m.head.append(a)}));d[l]?console.warn(p+\" only loads once. Ignoring:\",g):d[l]=(f,...n)=\u003er.add(f)&&u().then(()=\u003ed[l](f,...n))})\n ({key: \"AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg\", v: \"weekly\"});\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/event-click-latlng/docs/index.html#L8-L22\n```\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/event-click-latlng/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-event-click-latlng&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-event-click-latlng 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"]]
