letmap:google.maps.Map;letmaxZoomService:google.maps.MaxZoomService;letinfoWindow:google.maps.InfoWindow;functioninitMap():void{map=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{zoom:11,center:{lat:35.6894,lng:139.692},mapTypeId:"hybrid",});infoWindow=newgoogle.maps.InfoWindow();maxZoomService=newgoogle.maps.MaxZoomService();map.addListener("click",showMaxZoom);}functionshowMaxZoom(e:google.maps.MapMouseEvent){maxZoomService.getMaxZoomAtLatLng(e.latLngasgoogle.maps.LatLng,(result:google.maps.MaxZoomResult)=>{if(result.status!=="OK"){infoWindow.setContent("Error in MaxZoomService");}else{infoWindow.setContent("The maximum zoom at this location is: "+result.zoom);}infoWindow.setPosition(e.latLng);infoWindow.open(map);});}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
letmap;letmaxZoomService;letinfoWindow;functioninitMap(){map=newgoogle.maps.Map(document.getElementById("map"),{zoom:11,center:{lat:35.6894,lng:139.692},mapTypeId:"hybrid",});infoWindow=newgoogle.maps.InfoWindow();maxZoomService=newgoogle.maps.MaxZoomService();map.addListener("click",showMaxZoom);}functionshowMaxZoom(e){maxZoomService.getMaxZoomAtLatLng(e.latLng,(result)=>{if(result.status!=="OK"){infoWindow.setContent("Error in MaxZoomService");}else{infoWindow.setContent("The maximum zoom at this location is: "+result.zoom,);}infoWindow.setPosition(e.latLng);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;}
<html>
<head>
<title>Maximum Zoom Imagery Service</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 webpage demonstrates a Google Maps application showcasing the Maximum Zoom Imagery Service.\u003c/p\u003e\n"],["\u003cp\u003eUsers can click on the map of metropolitan Tokyo to view the maximum zoom level available at that specific location.\u003c/p\u003e\n"],["\u003cp\u003eThe application utilizes the \u003ccode\u003egoogle.maps.MaxZoomService\u003c/code\u003e to retrieve and display the maximum zoom level data.\u003c/p\u003e\n"],["\u003cp\u003eThe provided code snippets include implementations in both TypeScript and JavaScript, along with HTML and CSS for styling and structure.\u003c/p\u003e\n"]]],["This code creates an interactive map of Tokyo using the Google Maps API. Upon initialization, the map is centered on Tokyo with a zoom level of 11. When a user clicks on the map, the `MaxZoomService` determines the maximum zoom level at that specific location. An info window then displays this maximum zoom level or an error message if there's an issue with the service. The HTML, CSS, and JavaScript/TypeScript are provided to build the complete map.\n"],null,["This example creates a map of metropolitan Tokyo. If the user clicks on the map,\na popup window indicates the maximum zoom level at that location.\n\nRead the [documentation](/maps/documentation/javascript/maxzoom). \n\nTypeScript \n\n```typescript\nlet map: google.maps.Map;\nlet maxZoomService: google.maps.MaxZoomService;\nlet infoWindow: google.maps.InfoWindow;\n\nfunction initMap(): void {\n map = new google.maps.Map(document.getElementById(\"map\") as HTMLElement, {\n zoom: 11,\n center: { lat: 35.6894, lng: 139.692 },\n mapTypeId: \"hybrid\",\n });\n\n infoWindow = new google.maps.InfoWindow();\n\n maxZoomService = new google.maps.MaxZoomService();\n\n map.addListener(\"click\", showMaxZoom);\n}\n\nfunction showMaxZoom(e: google.maps.MapMouseEvent) {\n maxZoomService.getMaxZoomAtLatLng(\n e.latLng as google.maps.LatLng,\n (result: google.maps.MaxZoomResult) =\u003e {\n if (result.status !== \"OK\") {\n infoWindow.setContent(\"Error in MaxZoomService\");\n } else {\n infoWindow.setContent(\n \"The maximum zoom at this location is: \" + result.zoom\n );\n }\n\n infoWindow.setPosition(e.latLng);\n infoWindow.open(map);\n }\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/maxzoom-simple/index.ts#L8-L49\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nlet map;\nlet maxZoomService;\nlet infoWindow;\n\nfunction initMap() {\n map = new google.maps.Map(document.getElementById(\"map\"), {\n zoom: 11,\n center: { lat: 35.6894, lng: 139.692 },\n mapTypeId: \"hybrid\",\n });\n infoWindow = new google.maps.InfoWindow();\n maxZoomService = new google.maps.MaxZoomService();\n map.addListener(\"click\", showMaxZoom);\n}\n\nfunction showMaxZoom(e) {\n maxZoomService.getMaxZoomAtLatLng(e.latLng, (result) =\u003e {\n if (result.status !== \"OK\") {\n infoWindow.setContent(\"Error in MaxZoomService\");\n } else {\n infoWindow.setContent(\n \"The maximum zoom at this location is: \" + result.zoom,\n );\n }\n\n infoWindow.setPosition(e.latLng);\n infoWindow.open(map);\n });\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/maxzoom-simple/docs/index.js#L7-L37\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/maxzoom-simple/docs/style.css#L7-L24\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eMaximum Zoom Imagery Service\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/maxzoom-simple/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/maxzoom-simple/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-maxzoom-simple&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-maxzoom-simple 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"]]
