Stay organized with collectionsSave and categorize content based on your preferences.
This example creates a map that displays a window with the latitude, longitude,
and world, pixel, and tile coordinates for Chicago, IL. It also shows how these
values change as the zoom level is adjusted.
functioninitMap():void{constchicago=newgoogle.maps.LatLng(41.85,-87.65);constmap=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{center:chicago,zoom:3,});constcoordInfoWindow=newgoogle.maps.InfoWindow();coordInfoWindow.setContent(createInfoWindowContent(chicago,map.getZoom()!));coordInfoWindow.setPosition(chicago);coordInfoWindow.open(map);map.addListener("zoom_changed",()=>{coordInfoWindow.setContent(createInfoWindowContent(chicago,map.getZoom()!));coordInfoWindow.open(map);});}constTILE_SIZE=256;functioncreateInfoWindowContent(latLng:google.maps.LatLng,zoom:number){constscale=1<<zoom;constworldCoordinate=project(latLng);constpixelCoordinate=newgoogle.maps.Point(Math.floor(worldCoordinate.x*scale),Math.floor(worldCoordinate.y*scale));consttileCoordinate=newgoogle.maps.Point(Math.floor((worldCoordinate.x*scale)/TILE_SIZE),Math.floor((worldCoordinate.y*scale)/TILE_SIZE));return["Chicago, IL","LatLng: "+latLng,"Zoom level: "+zoom,"World Coordinate: "+worldCoordinate,"Pixel Coordinate: "+pixelCoordinate,"Tile Coordinate: "+tileCoordinate,].join("<br>");}// The mapping between latitude, longitude and pixels is defined by the web// mercator projection.functionproject(latLng:google.maps.LatLng){letsiny=Math.sin((latLng.lat()*Math.PI)/180);// Truncating to 0.9999 effectively limits latitude to 89.189. This is// about a third of a tile past the edge of the world tile.siny=Math.min(Math.max(siny,-0.9999),0.9999);returnnewgoogle.maps.Point(TILE_SIZE*(0.5+latLng.lng()/360),TILE_SIZE*(0.5-Math.log((1+siny)/(1-siny))/(4*Math.PI)));}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
functioninitMap(){constchicago=newgoogle.maps.LatLng(41.85,-87.65);constmap=newgoogle.maps.Map(document.getElementById("map"),{center:chicago,zoom:3,});constcoordInfoWindow=newgoogle.maps.InfoWindow();coordInfoWindow.setContent(createInfoWindowContent(chicago,map.getZoom()));coordInfoWindow.setPosition(chicago);coordInfoWindow.open(map);map.addListener("zoom_changed",()=>{coordInfoWindow.setContent(createInfoWindowContent(chicago,map.getZoom()));coordInfoWindow.open(map);});}constTILE_SIZE=256;functioncreateInfoWindowContent(latLng,zoom){constscale=1<<zoom;constworldCoordinate=project(latLng);constpixelCoordinate=newgoogle.maps.Point(Math.floor(worldCoordinate.x*scale),Math.floor(worldCoordinate.y*scale),);consttileCoordinate=newgoogle.maps.Point(Math.floor((worldCoordinate.x*scale)/TILE_SIZE),Math.floor((worldCoordinate.y*scale)/TILE_SIZE),);return["Chicago, IL","LatLng: "+latLng,"Zoom level: "+zoom,"World Coordinate: "+worldCoordinate,"Pixel Coordinate: "+pixelCoordinate,"Tile Coordinate: "+tileCoordinate,].join("<br>");}// The mapping between latitude, longitude and pixels is defined by the web// mercator projection.functionproject(latLng){letsiny=Math.sin((latLng.lat()*Math.PI)/180);// Truncating to 0.9999 effectively limits latitude to 89.189. This is// about a third of a tile past the edge of the world tile.siny=Math.min(Math.max(siny,-0.9999),0.9999);returnnewgoogle.maps.Point(TILE_SIZE*(0.5+latLng.lng()/360),TILE_SIZE*(0.5-Math.log((1+siny)/(1-siny))/(4*Math.PI)),);}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;}
<html>
<head>
<title>Showing Pixel and Tile Coordinates</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 map centered on Chicago, IL.\u003c/p\u003e\n"],["\u003cp\u003eAn info window shows the latitude, longitude, zoom level, world, pixel, and tile coordinates for the specified location.\u003c/p\u003e\n"],["\u003cp\u003eThe info window content dynamically updates as the user changes the map's zoom level.\u003c/p\u003e\n"],["\u003cp\u003eThe sample code utilizes the Web Mercator projection to calculate pixel and tile coordinates from latitude and longitude.\u003c/p\u003e\n"]]],["The code creates a map centered on Chicago, IL, and displays an info window with its latitude, longitude, zoom level, world, pixel, and tile coordinates. It calculates pixel and tile coordinates based on the world coordinate using a defined projection. As the zoom level changes, the info window dynamically updates to reflect the new coordinates. The CSS styles the map to occupy the full window. HTML file sets up a basic layout to run the sample.\n"],null,["This example creates a map that displays a window with the latitude, longitude,\nand world, pixel, and tile coordinates for Chicago, IL. It also shows how these\nvalues change as the zoom level is adjusted.\n\nRead the\n[documentation](/maps/documentation/javascript/trafficlayer#transit_layer). \n\nTypeScript \n\n```typescript\nfunction initMap(): void {\n const chicago = new google.maps.LatLng(41.85, -87.65);\n\n const map = new google.maps.Map(\n document.getElementById(\"map\") as HTMLElement,\n {\n center: chicago,\n zoom: 3,\n }\n );\n\n const coordInfoWindow = new google.maps.InfoWindow();\n\n coordInfoWindow.setContent(createInfoWindowContent(chicago, map.getZoom()!));\n coordInfoWindow.setPosition(chicago);\n coordInfoWindow.open(map);\n\n map.addListener(\"zoom_changed\", () =\u003e {\n coordInfoWindow.setContent(\n createInfoWindowContent(chicago, map.getZoom()!)\n );\n coordInfoWindow.open(map);\n });\n}\n\nconst TILE_SIZE = 256;\n\nfunction createInfoWindowContent(latLng: google.maps.LatLng, zoom: number) {\n const scale = 1 \u003c\u003c zoom;\n\n const worldCoordinate = project(latLng);\n\n const pixelCoordinate = new google.maps.Point(\n Math.floor(worldCoordinate.x * scale),\n Math.floor(worldCoordinate.y * scale)\n );\n\n const tileCoordinate = new google.maps.Point(\n Math.floor((worldCoordinate.x * scale) / TILE_SIZE),\n Math.floor((worldCoordinate.y * scale) / TILE_SIZE)\n );\n\n return [\n \"Chicago, IL\",\n \"LatLng: \" + latLng,\n \"Zoom level: \" + zoom,\n \"World Coordinate: \" + worldCoordinate,\n \"Pixel Coordinate: \" + pixelCoordinate,\n \"Tile Coordinate: \" + tileCoordinate,\n ].join(\"\u003cbr\u003e\");\n}\n\n// The mapping between latitude, longitude and pixels is defined by the web\n// mercator projection.\nfunction project(latLng: google.maps.LatLng) {\n let siny = Math.sin((latLng.lat() * Math.PI) / 180);\n\n // Truncating to 0.9999 effectively limits latitude to 89.189. This is\n // about a third of a tile past the edge of the world tile.\n siny = Math.min(Math.max(siny, -0.9999), 0.9999);\n\n return new google.maps.Point(\n TILE_SIZE * (0.5 + latLng.lng() / 360),\n TILE_SIZE * (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI))\n );\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-coordinates/index.ts#L8-L80\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nfunction initMap() {\n const chicago = new google.maps.LatLng(41.85, -87.65);\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n center: chicago,\n zoom: 3,\n });\n const coordInfoWindow = new google.maps.InfoWindow();\n\n coordInfoWindow.setContent(createInfoWindowContent(chicago, map.getZoom()));\n coordInfoWindow.setPosition(chicago);\n coordInfoWindow.open(map);\n map.addListener(\"zoom_changed\", () =\u003e {\n coordInfoWindow.setContent(createInfoWindowContent(chicago, map.getZoom()));\n coordInfoWindow.open(map);\n });\n}\n\nconst TILE_SIZE = 256;\n\nfunction createInfoWindowContent(latLng, zoom) {\n const scale = 1 \u003c\u003c zoom;\n const worldCoordinate = project(latLng);\n const pixelCoordinate = new google.maps.Point(\n Math.floor(worldCoordinate.x * scale),\n Math.floor(worldCoordinate.y * scale),\n );\n const tileCoordinate = new google.maps.Point(\n Math.floor((worldCoordinate.x * scale) / TILE_SIZE),\n Math.floor((worldCoordinate.y * scale) / TILE_SIZE),\n );\n return [\n \"Chicago, IL\",\n \"LatLng: \" + latLng,\n \"Zoom level: \" + zoom,\n \"World Coordinate: \" + worldCoordinate,\n \"Pixel Coordinate: \" + pixelCoordinate,\n \"Tile Coordinate: \" + tileCoordinate,\n ].join(\"\u003cbr\u003e\");\n}\n\n// The mapping between latitude, longitude and pixels is defined by the web\n// mercator projection.\nfunction project(latLng) {\n let siny = Math.sin((latLng.lat() * Math.PI) / 180);\n\n // Truncating to 0.9999 effectively limits latitude to 89.189. This is\n // about a third of a tile past the edge of the world tile.\n siny = Math.min(Math.max(siny, -0.9999), 0.9999);\n return new google.maps.Point(\n TILE_SIZE * (0.5 + latLng.lng() / 360),\n TILE_SIZE * (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI)),\n );\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/map-coordinates/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}\nhttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/map-coordinates/docs/style.css#L7-L24\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eShowing Pixel and Tile Coordinates\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-coordinates/docs/index.html#L8-L30\n```\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/map-coordinates/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-coordinates&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-coordinates 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"]]
