Geolocation | Maps JavaScript API - Google Developers

This example creates a map that displays the geographic location of a user or device on a Google map, through use of their browser's HTML5 Geolocation ... 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 RoutesAPI(Preview) Solutions IndustrySolutions GamingServices TransportationandLogistics Places PlacesAPI PlacesSDKforAndroid PlacesSDKforiOS PlacesLibrary,MapsJavaScriptAPI GeocodingAPI GeolocationAPI TimeZoneAPI AdditionalResources APISecurityBestPractices MapCoverageDetails OptimizationGuide MobileOSandsoftwaresupport Launchstages Deprecations AssetTrackingPlan URLEncoding WordPressUsers Blog Community StackOverflow GitHub YouTube Discord Twitter IssueTracker 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 RoutesAPI(Preview) Solutions IndustrySolutions GamingServices TransportationandLogistics Places PlacesAPI PlacesSDKforAndroid PlacesSDKforiOS PlacesLibrary,MapsJavaScriptAPI GeocodingAPI GeolocationAPI TimeZoneAPI AdditionalResources APISecurityBestPractices MapCoverageDetails OptimizationGuide MobileOSandsoftwaresupport Launchstages Deprecations AssetTrackingPlan URLEncoding WordPressUsers StackOverflow GitHub YouTube Discord Twitter IssueTracker Home Products GoogleMapsPlatform Documentation Web MapsJavaScriptAPI Samples Sendfeedback Geolocation Stayorganizedwithcollections Saveandcategorizecontentbasedonyourpreferences. Thisexamplecreatesamapthatdisplaysthegeographiclocationofauseror deviceonaGooglemap,throughuseoftheirbrowser'sHTML5Geolocation feature.Theusermustconsenttolocationsharingorelseanerrorisshown. Readmoreaboutthe W3C Geolocationstandard. Readthedocumentation. TrySample Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io GoogleCloudShell CloneSample GitandNode.jsarerequiredtorunthissamplelocally.FollowtheseinstructionstoinstallNode.jsandNPM.Thefollowingcommandsclone,installdependenciesandstartthesampleapplication. gitclone-bsample-map-geolocationhttps://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-10-10UTC. [{ "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 English BahasaIndonesia Deutsch Español Français Português–Brasil Русский 中文–简体 日本語 한국어