Custom Overlays | Maps JavaScript API - Google Developers

This example creates a custom overlay, containing a U.S. Geological Survey (USGS) image of the relevant area on the map. Read the documentation. 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 Overview Basics SimpleMapShowingPixelandTileCoordinatesGeolocationLocalizingtheMapRight-to-LeftLanguagesSynchronousLoadingCustomMapProjectionsLat/LngObjectLiteral Events SimpleClickEventsUsingClosuresinEventListenersAccessingArgumentsinUIEventsGettingPropertiesWithEventHandlersGettingLat/LngfromaClickEventListeningtoDOMEventsPOIClickEvents ControlsandInteraction DefaultControlsDisablingtheDefaultUIReplacingDefaultControlsAddingControlstotheMapControlOptionsControlPositioningCustomControlsAddingStatetoControlsCooperativeGestureHandlingRestrictingMapBoundsResizableSplitMapPanesInsetOverviewMapDelayLoadingDynamicMap DrawingontheMap SimpleMarkersMarkerLabelsRemovingMarkersMarkerswithImageIconsMarkerswithSVGandFontMarkerswithPredefinedSymbolIconsMarkerswithVector-basedIconsComplexMarkerIconsMarkerAccessibilityMarkerAnimationsMarkerAnimationsWithsetTimeout()InfoWindowsInfoWindowsWithmaxWidthCustomPopupsSimplePolylinesRemovingPolylinesDeletingaVertexComplexPolylinesSimplePolygonsPolygonArraysPolygonAuto-CompletionPolygonwithHoleCirclesRectanglesRectangleZoomUser-EditableShapesDraggablePolygonsListeningtoEventsGroundOverlaysRemovingOverlaysCustomOverlaysAnimatingSymbolsArrowSymbols(Polyline)CustomSymbols(Polyline)DashedLineSymbols(Polyline) CustomizingtheMap MarkerCollisionManagement(Beta)StyledMaps-MapIDStyledMaps-NightModeStyledMapTypesHidingMapFeaturesWithStylingStyledMapSelection Layers KMLLayersKMLFeatureDetailsDataLayer:PolygonDataLayer:SimpleDataLayer:StylingDataLayer:EventHandlingDataLayer:DynamicStylingDataLayer:DragandDropGeoJSONDataLayer:EarthquakesHeatmapsGeoRSSLayersTrafficLayerTransitLayerBicycleLayerdeck.glArcLayerdeck.glTripsLayerdeck.glScatterPlotGeoJsonLayer VectorMapFeatures WebGLOverlays(NativeAPI)WebGLOverlays(ThreeJSwrapper)TiltandRotationMoveCameraEasing MapTypes BasicMapTypesOverlayMapTypesImageMapTypesOverlayinganImageMapType45°ImageryRotating45°Imagery Services GeocodingServiceReverseGeocodingGettheAddressforaPlaceIDGeocodingComponentRestrictionRegionCodeBiasing(ES)RegionCodeBiasing(US)DirectionsServiceDisplayingTextDirectionsWithsetPanel()DirectionsService(Complex)TravelModesinDirectionsWaypointsinDirectionsDraggableDirectionsDistanceMatrixServiceElevationServiceShowingElevationAlongaPathStreetViewContainersStreetViewSide-By-SideOverlaysWithinStreetViewStreetViewEventsStreetViewControlsDirectlyAccessingStreetViewDataCustomStreetViewPanoramasCustomStreetViewPanoramaTilesMaximumZoomImageryService Libraries:Drawing DrawingTools Libraries:Geometry NavigationFunctions(Heading)EncodingMethodscontainsLocation() Libraries:LocalContext BasicLocalContextMapViewAdjustingLocalContextSearchBoundsResidentialNeighborhoodViewerCustomizingtheLocalContextMapRespondingtoLocalContextEvents Places PlaceSearchesPlaceDetailsPlaceSearchPaginationPlaceAutocompletePlaceAutocompleteAddressFormPlaceAutocompleteHotelSearchPlaceAutocompleteRestrictedtoMultipleCountriesPlacesSearchBoxRetrievingAutocompletePredictionsPlaceIDFinderPlaceIDGeocoderPlaceAutocompleteandDirections Fun MapPuzzle 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 Samples Sendfeedback CustomOverlays Thisexamplecreatesacustomoverlay,containingaU.S.GeologicalSurvey (USGS)imageoftherelevantareaonthemap. Readthedocumentation. TrySample Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io GoogleCloudShell CloneSample GitandNode.jsarerequiredtorunthissamplelocally.FollowtheseinstructionstoinstallNode.jsandNPM.Thefollowingcommandsclone,installdependenciesandstartthesampleapplication. gitclone-bsample-overlay-simplehttps://github.com/googlemaps/js-samples.git cdjs-samples npmi npmstart Othersamplescanbetriedbyswitchingtoanybranchbeginningwithsample-SAMPLE_NAME. gitcheckoutsample-SAMPLE_NAME npmi npmstart 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 Русский 中文–简体 日本語 한국어