Custom Overlays | Maps JavaScript API - Google Developers

Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map. For information on predefined ... Google MapsPlatform Overview Products Pricing Documentation GetStarted GetStartedwithGoogleMapsPlatform APIPicker Billing&Pricing Reporting&Monitoring MapIDs FAQ SupportandResources IncidentManagement Maps MapsJavaScriptAPI MapsSDKforAndroid MapsSDKforiOS MapsStaticAPI StreetViewStaticAPI MapsEmbedAPI MapsURLs MapsElevationAPI Routes DirectionsAPI DistanceMatrixAPI RoadsAPI Solutions IndustrySolutions GamingServices TransportationandLogistics Places PlacesAPI PlacesSDKforAndroid PlacesSDKforiOS PlacesLibrary,MapsJavaScriptAPI GeocodingAPI GeolocationAPI TimeZoneAPI AdditionalResources APISecurityBestPractices MapCoverageDetails OptimizationGuide MobileOSandsoftwaresupport Deprecations AssetTrackingPlan RootCAMigrationFAQ URLEncoding WordPressUsers Blog Community StackOverflow GitHub YouTube Discord Twitter IssueTracker Language English BahasaIndonesia Deutsch Español Français Português–Brasil Русский 中文–简体 日本語 한국어 Signin Web MapsJavaScriptAPI GetStarted Contactsales Guides Reference Samples Support Google MapsPlatform Overview Products Pricing Documentation More Guides Reference Samples Support Blog Community More MapsJavaScriptAPI Overview SetupinCloudConsole UsingAPIKeys Tutorials Alltutorials Addamarkertoyourmap Clustermarkers Real-timecollaborativemapping Showcurrentlocation Usedatawithyourmap DisplayingKMLImportingJSONdataVisualizingJSONdataCombiningJSONdata AddingaMapandMarkerstoaReactApplication Concepts Allconcepts Maptypes Mapandtilecoordinates Localizingthemap Versioning URLparameters Bestpractices UsingTypeScript Promises Managemarkerlabelcollisions Customizeamap CustomizewithCloudbasedmapsstyling CustomizewithJSONstyling JSONstylingoverviewJSONstylereference CustomLegends Interactwiththemap Controls Events Controlzoomandpan Drawonthemap Overview Markers Custommarkers Infowindows Shapes Symbols WebGLFeatures OverviewVectorMapsTiltandRotationWebGLOverlayView Deck.gldatavisualizations Groundoverlays Customoverlays Displaydata Overview Data-drivenstyling(Preview) OverviewGetstartedStyleaboundarypolygonMakeachoroplethmapHandleclickeventsUsetheRegionLookupAPIUsetheRegionLookupAPIwithGoogleSheetsUseGeocodingandPlacesAPIswithData-drivenstylingGoogleboundariescoverage Datalayer Heatmap KMLandGeoRSS Traffic,Transit,andBicyclingLayers Services Directions DistanceMatrix Elevation Geocoding MaximumZoomImagery StreetView Libraries Overview DrawingLibrary GeometryLibrary LocalContextLibrary(Beta) OverviewGetStartedSettingLocalContextandMapOptionsHandlingEventsandUserInteractionRefreshingSearchPropertiesStylingtheLocalContextMapViewSupportedPlaceTypesMigratingaMaptoLocalContextMapView PlacesLibrary PlaceAutocomplete VisualizationLibrary OpenSourceLibraries MoreGuides ContentSecurityPolicyGuide GoogleLoaderMigrationGuide PlaceFieldMigration(open_now,utc_offset) PlaceDataFields PlaceIcons PlaceIDs PlaceTypes Upgradingfromv2tov3 PoliciesandTerms Usageandbilling Reportingandmonitoring Termsofservice OtherAPIs MapsStaticAPI StreetViewStaticAPI MapsEmbedAPI MapsURLs GetStarted GetStartedwithGoogleMapsPlatform APIPicker Billing&Pricing Reporting&Monitoring MapIDs FAQ SupportandResources IncidentManagement Maps MapsJavaScriptAPI MapsSDKforAndroid MapsSDKforiOS MapsStaticAPI StreetViewStaticAPI MapsEmbedAPI MapsURLs MapsElevationAPI Routes DirectionsAPI DistanceMatrixAPI RoadsAPI Solutions IndustrySolutions GamingServices TransportationandLogistics Places PlacesAPI PlacesSDKforAndroid PlacesSDKforiOS PlacesLibrary,MapsJavaScriptAPI GeocodingAPI GeolocationAPI TimeZoneAPI AdditionalResources APISecurityBestPractices MapCoverageDetails OptimizationGuide MobileOSandsoftwaresupport Deprecations AssetTrackingPlan RootCAMigrationFAQ URLEncoding WordPressUsers StackOverflow GitHub YouTube Discord Twitter IssueTracker Home Products GoogleMapsPlatform Documentation Web MapsJavaScriptAPI Sendfeedback CustomOverlays Selectplatform: Android iOS JavaScript Introduction Overlaysareobjectsonthemapthataretiedtolatitude/longitudecoordinates, sotheymovewhenyoudragorzoomthemap.Forinformationonpredefined overlaytypes,see Drawingonthemap. TheMapsJavaScriptAPIprovidesan OverlayViewclassfor creatingyourowncustomoverlays.TheOverlayViewisabaseclassthat providesseveralmethodsyoumustimplementwhencreatingyouroverlays.The classalsoprovidesafewmethodsthatmakeitpossibletotranslatebetween screencoordinatesandlocationsonthemap. Addacustomoverlay Hereisasummaryofthestepsrequiredtocreateacustomoverlay: Setyourcustomoverlayobject'sprototypetoanewinstanceof google.maps.OverlayView().Ineffect,thiswillsubclasstheoverlay class. Createaconstructorforyourcustomoverlay,andsetanyinitialization parameters. ImplementanonAdd()methodwithinyourprototype,andattachtheoverlay tothemap.OverlayView.onAdd()willbecalledwhenthemapisreadyfor theoverlaytobeattached. Implementadraw()methodwithinyourprototype,andhandlethevisual displayofyourobject.OverlayView.draw()willbecalledwhentheobject isfirstdisplayed. YoushouldalsoimplementanonRemove()methodtocleanupanyelements youaddedwithintheoverlay. Belowaremoredetailsoneachstep.Youcanseethefull,workingexample code:viewexamplecode. Subclasstheoverlay TheexamplebelowusesOverlayViewtocreateasimpleimageoverlay. NowwecreateaconstructorfortheUSGSOverlayclass,andinitializethe passedparametersaspropertiesofthenewobject. TypeScript /** *ThecustomUSGSOverlayobjectcontainstheUSGSimage, *theboundsoftheimage,andareferencetothemap. */ classUSGSOverlayextendsgoogle.maps.OverlayView{ privatebounds:google.maps.LatLngBounds; privateimage:string; privatediv?:HTMLElement; constructor(bounds:google.maps.LatLngBounds,image:string){ super(); this.bounds=bounds; this.image=image; }index.ts Note:ReadtheguideonusingTypeScriptandGoogleMaps. JavaScript /** *ThecustomUSGSOverlayobjectcontainstheUSGSimage, *theboundsoftheimage,andareferencetothemap. */ classUSGSOverlayextendsgoogle.maps.OverlayView{ bounds; image; div; constructor(bounds,image){ super(); this.bounds=bounds; this.image=image; }index.js Wecan'tyetattachthisoverlaytothemapintheoverlay'sconstructor.First, weneedtoensurethatallofthemap'spanesareavailable,becausethey specifytheorderinwhichobjectsaredisplayedonamap.TheAPIprovidesa helpermethodindicatingthishasoccurred.We'llhandlethatmethodinthenext section. Initializetheoverlay Whentheoverlayisfirstinstantiatedandreadytodisplay,weneedtoattach ittothemapviathebrowser'sDOM.TheAPIindicatesthattheoverlayhasbeen addedtothemapbyinvokingtheoverlay'sonAdd()method.Tohandlethis methodwecreatea

toholdourimage,addanelement,attachit tothe

,andthenattachtheoverlaytooneofthemap'spanes.Apane isanodewithintheDOMtree. Thepanes,oftype MapPanes,specifythe stackingorderfordifferentlayersonthemap.Thefollowingpanesare available,andareenumeratedintheorderinwhichtheyarestackedfrombottom totop: mapPaneisthelowestpaneandisabovethetiles.ItmaynotreceiveDOM events.(Pane0). overlayLayercontainspolylines,polygons,groundoverlaysandtilelayer overlays.ItmaynotreceiveDOMevents.(Pane1). markerLayercontainsmarkers.ItmaynotreceiveDOMevents.(Pane2). overlayMouseTargetcontainselementsthatreceiveDOMevents.(Pane3). floatPanecontainstheinfowindow.Itisaboveallmapoverlays.(Pane 4). Becauseourimageisa"groundoverlay,"we'llusetheoverlayLayerpane.When wehavethatpane,we'llattachourobjecttoitasachild. TypeScript /** *onAddiscalledwhenthemap'spanesarereadyandtheoverlayhasbeen *addedtothemap. */ onAdd(){ this.div=document.createElement("div"); this.div.style.borderStyle="none"; this.div.style.borderWidth="0px"; this.div.style.position="absolute"; //Createtheimgelementandattachittothediv. constimg=document.createElement("img"); img.src=this.image; img.style.width="100%"; img.style.height="100%"; img.style.position="absolute"; this.div.appendChild(img); //Addtheelementtothe"overlayLayer"pane. constpanes=this.getPanes()!; panes.overlayLayer.appendChild(this.div); }index.ts Note:ReadtheguideonusingTypeScriptandGoogleMaps. JavaScript /** *onAddiscalledwhenthemap'spanesarereadyandtheoverlayhasbeen *addedtothemap. */ onAdd(){ this.div=document.createElement("div"); this.div.style.borderStyle="none"; this.div.style.borderWidth="0px"; this.div.style.position="absolute"; //Createtheimgelementandattachittothediv. constimg=document.createElement("img"); img.src=this.image; img.style.width="100%"; img.style.height="100%"; img.style.position="absolute"; this.div.appendChild(img); //Addtheelementtothe"overlayLayer"pane. constpanes=this.getPanes(); panes.overlayLayer.appendChild(this.div); }index.js Drawtheoverlay Notethatwehaven'tinvokedanyspecialvisualdisplayinthecodeabove.The APIinvokesaseparatedraw()methodontheoverlaywheneveritneedstodraw theoverlayonthemap,includingwhenfirstadded. We'llthereforeimplementthisdraw()method,retrievetheoverlay's MapCanvasProjectionusinggetProjection()andcalculatetheexact coordinatesatwhichtoanchortheobject'stoprightandbottomleftpoints. Thenwecanresizethe

.Inturnthiswillresizetheimagetomatchthe boundswespecifiedintheoverlay'sconstructor. TypeScript draw(){ //Weusethesouth-westandnorth-east //coordinatesoftheoverlaytopegittothecorrectpositionandsize. //Todothis,weneedtoretrievetheprojectionfromtheoverlay. constoverlayProjection=this.getProjection(); //Retrievethesouth-westandnorth-eastcoordinatesofthisoverlay //inLatLngsandconvertthemtopixelcoordinates. //We'llusethesecoordinatestoresizethediv. constsw=overlayProjection.fromLatLngToDivPixel( this.bounds.getSouthWest() )!; constne=overlayProjection.fromLatLngToDivPixel( this.bounds.getNorthEast() )!; //Resizetheimage'sdivtofittheindicateddimensions. if(this.div){ this.div.style.left=sw.x+"px"; this.div.style.top=ne.y+"px"; this.div.style.width=ne.x-sw.x+"px"; this.div.style.height=sw.y-ne.y+"px"; } }index.ts Note:ReadtheguideonusingTypeScriptandGoogleMaps. JavaScript draw(){ //Weusethesouth-westandnorth-east //coordinatesoftheoverlaytopegittothecorrectpositionandsize. //Todothis,weneedtoretrievetheprojectionfromtheoverlay. constoverlayProjection=this.getProjection(); //Retrievethesouth-westandnorth-eastcoordinatesofthisoverlay //inLatLngsandconvertthemtopixelcoordinates. //We'llusethesecoordinatestoresizethediv. constsw=overlayProjection.fromLatLngToDivPixel( this.bounds.getSouthWest() ); constne=overlayProjection.fromLatLngToDivPixel( this.bounds.getNorthEast() ); //Resizetheimage'sdivtofittheindicateddimensions. if(this.div){ this.div.style.left=sw.x+"px"; this.div.style.top=ne.y+"px"; this.div.style.width=ne.x-sw.x+"px"; this.div.style.height=sw.y-ne.y+"px"; } }index.js Removeacustomoverlay WealsoaddanonRemove()methodtocleanlyremovetheoverlayfromthemap. TypeScript /** *TheonRemove()methodwillbecalledautomaticallyfromtheAPIif *weeversettheoverlay'smappropertyto'null'. */ onRemove(){ if(this.div){ (this.div.parentNodeasHTMLElement).removeChild(this.div); deletethis.div; } }index.ts Note:ReadtheguideonusingTypeScriptandGoogleMaps. JavaScript /** *TheonRemove()methodwillbecalledautomaticallyfromtheAPIif *weeversettheoverlay'smappropertyto'null'. */ onRemove(){ if(this.div){ this.div.parentNode.removeChild(this.div); deletethis.div; } }index.js Hideandshowacustomoverlay Ifyouwishtohideorshowanoverlayratherthansimplycreateorremoveit, youcanimplementyourownhide()andshow()methodstoadjusttheoverlay's visibility.Alternatively,youcandetachtheoverlayfromthemap'sDOM,though thisoperationisslightlymoreexpensive.Notethatifyouthenreattachthe overlaytothemap'sDOM,itwillre-invoketheoverlay'sonAdd()method. Thefollowingexampleaddshide()andshow()methodstotheoverlay's prototypewhichtogglethevisibilityofthecontainer

.Additionally,we addatoggleDOM()method,whichattachesordetachestheoverlayto/fromthe map. TypeScript /** *Setthevisibilityto'hidden'or'visible'. */ hide(){ if(this.div){ this.div.style.visibility="hidden"; } } show(){ if(this.div){ this.div.style.visibility="visible"; } } toggle(){ if(this.div){ if(this.div.style.visibility==="hidden"){ this.show(); }else{ this.hide(); } } } toggleDOM(map:google.maps.Map){ if(this.getMap()){ this.setMap(null); }else{ this.setMap(map); } }index.ts Note:ReadtheguideonusingTypeScriptandGoogleMaps. JavaScript /** *Setthevisibilityto'hidden'or'visible'. */ hide(){ if(this.div){ this.div.style.visibility="hidden"; } } show(){ if(this.div){ this.div.style.visibility="visible"; } } toggle(){ if(this.div){ if(this.div.style.visibility==="hidden"){ this.show(); }else{ this.hide(); } } } toggleDOM(map){ if(this.getMap()){ this.setMap(null); }else{ this.setMap(map); } }index.js Addbuttoncontrols TotriggerthetoggleandtoggleDommethods,buttoncontrolsareaddedto themap. TypeScript consttoggleButton=document.createElement("button"); toggleButton.textContent="Toggle"; toggleButton.classList.add("custom-map-control-button"); consttoggleDOMButton=document.createElement("button"); toggleDOMButton.textContent="ToggleDOMAttachment"; toggleDOMButton.classList.add("custom-map-control-button"); toggleButton.addEventListener("click",()=>{ overlay.toggle(); }); toggleDOMButton.addEventListener("click",()=>{ overlay.toggleDOM(map); }); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleDOMButton); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton);index.ts Note:ReadtheguideonusingTypeScriptandGoogleMaps. JavaScript consttoggleButton=document.createElement("button"); toggleButton.textContent="Toggle"; toggleButton.classList.add("custom-map-control-button"); consttoggleDOMButton=document.createElement("button"); toggleDOMButton.textContent="ToggleDOMAttachment"; toggleDOMButton.classList.add("custom-map-control-button"); toggleButton.addEventListener("click",()=>{ overlay.toggle(); }); toggleDOMButton.addEventListener("click",()=>{ overlay.toggleDOM(map); }); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleDOMButton); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton);index.js Completesamplecode Thecompletesamplecodeisbelow: TypeScript //Thisexampleaddshide()andshow()methodstoacustomoverlay'sprototype. //Thesemethodstogglethevisibilityofthecontainer

. //overlaytoorfromthemap. functioninitMap():void{ constmap=newgoogle.maps.Map( document.getElementById("map")asHTMLElement, { zoom:11, center:{lat:62.323907,lng:-150.109291}, mapTypeId:"satellite", } ); constbounds=newgoogle.maps.LatLngBounds( newgoogle.maps.LatLng(62.281819,-150.287132), newgoogle.maps.LatLng(62.400471,-150.005608) ); //ThephotographiscourtesyoftheU.S.GeologicalSurvey. letimage="https://developers.google.com/maps/documentation/javascript/"; image+="examples/full/images/talkeetna.png"; /** *ThecustomUSGSOverlayobjectcontainstheUSGSimage, *theboundsoftheimage,andareferencetothemap. */ classUSGSOverlayextendsgoogle.maps.OverlayView{ privatebounds:google.maps.LatLngBounds; privateimage:string; privatediv?:HTMLElement; constructor(bounds:google.maps.LatLngBounds,image:string){ super(); this.bounds=bounds; this.image=image; } /** *onAddiscalledwhenthemap'spanesarereadyandtheoverlayhasbeen *addedtothemap. */ onAdd(){ this.div=document.createElement("div"); this.div.style.borderStyle="none"; this.div.style.borderWidth="0px"; this.div.style.position="absolute"; //Createtheimgelementandattachittothediv. constimg=document.createElement("img"); img.src=this.image; img.style.width="100%"; img.style.height="100%"; img.style.position="absolute"; this.div.appendChild(img); //Addtheelementtothe"overlayLayer"pane. constpanes=this.getPanes()!; panes.overlayLayer.appendChild(this.div); } draw(){ //Weusethesouth-westandnorth-east //coordinatesoftheoverlaytopegittothecorrectpositionandsize. //Todothis,weneedtoretrievetheprojectionfromtheoverlay. constoverlayProjection=this.getProjection(); //Retrievethesouth-westandnorth-eastcoordinatesofthisoverlay //inLatLngsandconvertthemtopixelcoordinates. //We'llusethesecoordinatestoresizethediv. constsw=overlayProjection.fromLatLngToDivPixel( this.bounds.getSouthWest() )!; constne=overlayProjection.fromLatLngToDivPixel( this.bounds.getNorthEast() )!; //Resizetheimage'sdivtofittheindicateddimensions. if(this.div){ this.div.style.left=sw.x+"px"; this.div.style.top=ne.y+"px"; this.div.style.width=ne.x-sw.x+"px"; this.div.style.height=sw.y-ne.y+"px"; } } /** *TheonRemove()methodwillbecalledautomaticallyfromtheAPIif *weeversettheoverlay'smappropertyto'null'. */ onRemove(){ if(this.div){ (this.div.parentNodeasHTMLElement).removeChild(this.div); deletethis.div; } } /** *Setthevisibilityto'hidden'or'visible'. */ hide(){ if(this.div){ this.div.style.visibility="hidden"; } } show(){ if(this.div){ this.div.style.visibility="visible"; } } toggle(){ if(this.div){ if(this.div.style.visibility==="hidden"){ this.show(); }else{ this.hide(); } } } toggleDOM(map:google.maps.Map){ if(this.getMap()){ this.setMap(null); }else{ this.setMap(map); } } } constoverlay:USGSOverlay=newUSGSOverlay(bounds,image); overlay.setMap(map); consttoggleButton=document.createElement("button"); toggleButton.textContent="Toggle"; toggleButton.classList.add("custom-map-control-button"); consttoggleDOMButton=document.createElement("button"); toggleDOMButton.textContent="ToggleDOMAttachment"; toggleDOMButton.classList.add("custom-map-control-button"); toggleButton.addEventListener("click",()=>{ overlay.toggle(); }); toggleDOMButton.addEventListener("click",()=>{ overlay.toggleDOM(map); }); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleDOMButton); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton); } declareglobal{ interfaceWindow{ initMap:()=>void; } } window.initMap=initMap;index.ts Note:ReadtheguideonusingTypeScriptandGoogleMaps. JavaScript //Thisexampleaddshide()andshow()methodstoacustomoverlay'sprototype. //Thesemethodstogglethevisibilityofthecontainer

. //overlaytoorfromthemap. functioninitMap(){ constmap=newgoogle.maps.Map(document.getElementById("map"),{ zoom:11, center:{lat:62.323907,lng:-150.109291}, mapTypeId:"satellite", }); constbounds=newgoogle.maps.LatLngBounds( newgoogle.maps.LatLng(62.281819,-150.287132), newgoogle.maps.LatLng(62.400471,-150.005608) ); //ThephotographiscourtesyoftheU.S.GeologicalSurvey. letimage="https://developers.google.com/maps/documentation/javascript/"; image+="examples/full/images/talkeetna.png"; /** *ThecustomUSGSOverlayobjectcontainstheUSGSimage, *theboundsoftheimage,andareferencetothemap. */ classUSGSOverlayextendsgoogle.maps.OverlayView{ bounds; image; div; constructor(bounds,image){ super(); this.bounds=bounds; this.image=image; } /** *onAddiscalledwhenthemap'spanesarereadyandtheoverlayhasbeen *addedtothemap. */ onAdd(){ this.div=document.createElement("div"); this.div.style.borderStyle="none"; this.div.style.borderWidth="0px"; this.div.style.position="absolute"; //Createtheimgelementandattachittothediv. constimg=document.createElement("img"); img.src=this.image; img.style.width="100%"; img.style.height="100%"; img.style.position="absolute"; this.div.appendChild(img); //Addtheelementtothe"overlayLayer"pane. constpanes=this.getPanes(); panes.overlayLayer.appendChild(this.div); } draw(){ //Weusethesouth-westandnorth-east //coordinatesoftheoverlaytopegittothecorrectpositionandsize. //Todothis,weneedtoretrievetheprojectionfromtheoverlay. constoverlayProjection=this.getProjection(); //Retrievethesouth-westandnorth-eastcoordinatesofthisoverlay //inLatLngsandconvertthemtopixelcoordinates. //We'llusethesecoordinatestoresizethediv. constsw=overlayProjection.fromLatLngToDivPixel( this.bounds.getSouthWest() ); constne=overlayProjection.fromLatLngToDivPixel( this.bounds.getNorthEast() ); //Resizetheimage'sdivtofittheindicateddimensions. if(this.div){ this.div.style.left=sw.x+"px"; this.div.style.top=ne.y+"px"; this.div.style.width=ne.x-sw.x+"px"; this.div.style.height=sw.y-ne.y+"px"; } } /** *TheonRemove()methodwillbecalledautomaticallyfromtheAPIif *weeversettheoverlay'smappropertyto'null'. */ onRemove(){ if(this.div){ this.div.parentNode.removeChild(this.div); deletethis.div; } } /** *Setthevisibilityto'hidden'or'visible'. */ hide(){ if(this.div){ this.div.style.visibility="hidden"; } } show(){ if(this.div){ this.div.style.visibility="visible"; } } toggle(){ if(this.div){ if(this.div.style.visibility==="hidden"){ this.show(); }else{ this.hide(); } } } toggleDOM(map){ if(this.getMap()){ this.setMap(null); }else{ this.setMap(map); } } } constoverlay=newUSGSOverlay(bounds,image); overlay.setMap(map); consttoggleButton=document.createElement("button"); toggleButton.textContent="Toggle"; toggleButton.classList.add("custom-map-control-button"); consttoggleDOMButton=document.createElement("button"); toggleDOMButton.textContent="ToggleDOMAttachment"; toggleDOMButton.classList.add("custom-map-control-button"); toggleButton.addEventListener("click",()=>{ overlay.toggle(); }); toggleDOMButton.addEventListener("click",()=>{ overlay.toggleDOM(map); }); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleDOMButton); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton); } window.initMap=initMap;index.js Note:TheJavaScriptiscompiledfromtheTypeScriptsnippet. CSS /* *Alwayssetthemapheightexplicitlytodefinethesizeofthedivelement *thatcontainsthemap. */ #map{ height:100%; } /* *Optional:Makesthesamplepagefillthewindow. */ 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); } style.css HTML

index.html TrySample Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io GoogleCloudShell Sendfeedback Exceptasotherwisenoted,thecontentofthispageislicensedundertheCreativeCommonsAttribution4.0License,andcodesamplesarelicensedundertheApache2.0License.Fordetails,seetheGoogleDevelopersSitePolicies.JavaisaregisteredtrademarkofOracleand/oritsaffiliates. Lastupdated2022-06-22UTC. [{ "type":"thumb-down", "id":"missingTheInformationINeed", "label":"MissingtheinformationIneed" },{ "type":"thumb-down", "id":"tooComplicatedTooManySteps", "label":"Toocomplicated/toomanysteps" },{ "type":"thumb-down", "id":"outOfDate", "label":"Outofdate" },{ "type":"thumb-down", "id":"samplesCodeIssue", "label":"Samples/codeissue" },{ "type":"thumb-down", "id":"otherDown", "label":"Other" }] [{ "type":"thumb-up", "id":"easyToUnderstand", "label":"Easytounderstand" },{ "type":"thumb-up", "id":"solvedMyProblem", "label":"Solvedmyproblem" },{ "type":"thumb-up", "id":"otherUp", "label":"Other" }] Needtotellusmore? StackOverflow Askaquestionunderthegoogle-mapstag. GitHub Forkoursamplesandtrythemyourself. Discord ChatwithfellowdevelopersaboutGoogleMapsPlatform. IssueTracker Somethingwrong?Sendusabugreport! LearnMore FAQ APIPicker Tutorials Platforms Android iOS Web WebServices ProductInfo PricingandPlans ContactSales Support TermsofService Android Chrome Firebase GoogleCloudPlatform Allproducts Terms Privacy SignupfortheGoogleDevelopersnewsletter Subscribe Language English BahasaIndonesia Deutsch Español Français Português–Brasil Русский 中文–简体 日本語 한국어