// This example defines an image map type using the Gall-Peters// projection.// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projectionconstmapElement=document.querySelector('gmp-map')asgoogle.maps.MapElement;letinnerMap;asyncfunctioninitMap(){// Request the needed libraries.awaitgoogle.maps.importLibrary('maps');// Create a map.innerMap=mapElement.innerMap;innerMap.setOptions({mapTypeControl:false,});// Set the Gall-Peters map type.initGallPeters();innerMap.mapTypes.set('gallPeters',gallPetersMapType);innerMap.setMapTypeId('gallPeters');// Show the lat and lng under the mouse cursor.constcoordsDiv=document.getElementById('coords')asHTMLElement;innerMap.addListener('mousemove',(event:google.maps.MapMouseEvent)=>{coordsDiv.textContent='lat: '+Math.round(event.latLng!.lat())+', '+'lng: '+Math.round(event.latLng!.lng());});// Add some markers to the map.innerMap.data.setStyle((feature)=>{return{title:feature.getProperty('name')asstring,optimized:false,};});innerMap.data.addGeoJson(cities);}letgallPetersMapType;functioninitGallPeters(){constGALL_PETERS_RANGE_X=800;constGALL_PETERS_RANGE_Y=512;// Fetch Gall-Peters tiles stored locally on our server.gallPetersMapType=newgoogle.maps.ImageMapType({getTileUrl:function(coord,zoom){constscale=1 <<zoom;// Wrap tiles horizontally.constx=((coord.x%scale)+scale)%scale;// Don't wrap tiles vertically.consty=coord.y;if(y <0||y>=scale)return'';return'gall-peters_'+zoom+'_'+x+'_'+y+'.png';},tileSize:newgoogle.maps.Size(GALL_PETERS_RANGE_X,GALL_PETERS_RANGE_Y),minZoom:0,maxZoom:1,name:'Gall-Peters',});// Describe the Gall-Peters projection used by these tiles.gallPetersMapType.projection={fromLatLngToPoint:function(latLng){constlatRadians=(latLng.lat()*Math.PI)/180;returnnewgoogle.maps.Point(GALL_PETERS_RANGE_X*(0.5+latLng.lng()/360),GALL_PETERS_RANGE_Y*(0.5-0.5*Math.sin(latRadians)));},fromPointToLatLng:function(point,noWrap){constx=point.x/GALL_PETERS_RANGE_X;consty=Math.max(0,Math.min(1,point.y/GALL_PETERS_RANGE_Y));returnnewgoogle.maps.LatLng((Math.asin(1-2*y)*180)/Math.PI,-180+360*x,noWrap);},};}// GeoJSON, describing the locations and names of some cities.constcities={type:'FeatureCollection',features:[{type:'Feature',geometry:{type:'Point',coordinates:[-87.65,41.85]},properties:{name:'Chicago'},},{type:'Feature',geometry:{type:'Point',coordinates:[-149.9,61.218]},properties:{name:'Anchorage'},},{type:'Feature',geometry:{type:'Point',coordinates:[-99.127,19.427]},properties:{name:'Mexico City'},},{type:'Feature',geometry:{type:'Point',coordinates:[-0.126,51.5]},properties:{name:'London'},},{type:'Feature',geometry:{type:'Point',coordinates:[28.045,-26.201]},properties:{name:'Johannesburg'},},{type:'Feature',geometry:{type:'Point',coordinates:[15.322,-4.325]},properties:{name:'Kinshasa'},},{type:'Feature',geometry:{type:'Point',coordinates:[151.207,-33.867]},properties:{name:'Sydney'},},{type:'Feature',geometry:{type:'Point',coordinates:[0,0]},properties:{name:'0°N 0°E'},},],};initMap();
index.ts

// This example defines an image map type using the Gall-Peters// projection.// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projectionconstmapElement=document.querySelector('gmp-map');letinnerMap;asyncfunctioninitMap(){// Request the needed libraries.awaitgoogle.maps.importLibrary('maps');// Create a map.innerMap=mapElement.innerMap;innerMap.setOptions({mapTypeControl:false,});// Set the Gall-Peters map type.initGallPeters();innerMap.mapTypes.set('gallPeters',gallPetersMapType);innerMap.setMapTypeId('gallPeters');// Show the lat and lng under the mouse cursor.constcoordsDiv=document.getElementById('coords');innerMap.addListener('mousemove',(event)=>{coordsDiv.textContent='lat: '+Math.round(event.latLng.lat())+', '+'lng: '+Math.round(event.latLng.lng());});// Add some markers to the map.innerMap.data.setStyle((feature)=>{return{title:feature.getProperty('name'),optimized:false,};});innerMap.data.addGeoJson(cities);}letgallPetersMapType;functioninitGallPeters(){constGALL_PETERS_RANGE_X=800;constGALL_PETERS_RANGE_Y=512;// Fetch Gall-Peters tiles stored locally on our server.gallPetersMapType=newgoogle.maps.ImageMapType({getTileUrl:function(coord,zoom){constscale=1 <<zoom;// Wrap tiles horizontally.constx=((coord.x%scale)+scale)%scale;// Don't wrap tiles vertically.consty=coord.y;if(y <0||y>=scale)return'';return'gall-peters_'+zoom+'_'+x+'_'+y+'.png';},tileSize:newgoogle.maps.Size(GALL_PETERS_RANGE_X,GALL_PETERS_RANGE_Y),minZoom:0,maxZoom:1,name:'Gall-Peters',});// Describe the Gall-Peters projection used by these tiles.gallPetersMapType.projection={fromLatLngToPoint:function(latLng){constlatRadians=(latLng.lat()*Math.PI)/180;returnnewgoogle.maps.Point(GALL_PETERS_RANGE_X*(0.5+latLng.lng()/360),GALL_PETERS_RANGE_Y*(0.5-0.5*Math.sin(latRadians)));},fromPointToLatLng:function(point,noWrap){constx=point.x/GALL_PETERS_RANGE_X;consty=Math.max(0,Math.min(1,point.y/GALL_PETERS_RANGE_Y));returnnewgoogle.maps.LatLng((Math.asin(1-2*y)*180)/Math.PI,-180+360*x,noWrap);},};}// GeoJSON, describing the locations and names of some cities.constcities={type:'FeatureCollection',features:[{type:'Feature',geometry:{type:'Point',coordinates:[-87.65,41.85]},properties:{name:'Chicago'},},{type:'Feature',geometry:{type:'Point',coordinates:[-149.9,61.218]},properties:{name:'Anchorage'},},{type:'Feature',geometry:{type:'Point',coordinates:[-99.127,19.427]},properties:{name:'Mexico City'},},{type:'Feature',geometry:{type:'Point',coordinates:[-0.126,51.5]},properties:{name:'London'},},{type:'Feature',geometry:{type:'Point',coordinates:[28.045,-26.201]},properties:{name:'Johannesburg'},},{type:'Feature',geometry:{type:'Point',coordinates:[15.322,-4.325]},properties:{name:'Kinshasa'},},{type:'Feature',geometry:{type:'Point',coordinates:[151.207,-33.867]},properties:{name:'Sydney'},},{type:'Feature',geometry:{type:'Point',coordinates:[0,0]},properties:{name:'0°N 0°E'},},],};initMap();
index.js

<html>    <head>        <title>Custom Map Projections</title>        <link rel="stylesheet" type="text/css" href="./style.css" />        <script type="module" src="./index.js"></script>        <!-- prettier-ignore -->        <script>(g => { 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 = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + 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 = () => h = 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) => r.add(f) && u().then(() => d[l](f, ...n)) })      ({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta" });</script>    </head>    <body>        <gmp-map center="0,0" zoom="0">            <div slot="control-block-start-inline-center"></div>        </gmp-map>    </body></html>
index.html