How to find user location on google map and focusing on where they're located using google-map-react library

Question

I am trying to use google-map-react library to locate the user's current location on Google Maps. I managed to use react-geolocated to get coordinates and fed them into the Latitude and Longitude props in the GoogleMapReact component but it was very far from accurate. I am now seeking an alternative on how to use Google Maps API to get more accurate coordinates and focus on the area on a map where the user is located. Using handleApiLoaded method which I failed to understand how to use to achieve this.

Below is some of the code that I wrote to try and solve this

    import React from "react";
    import GoogleMapReact from "google-map-react";
    import { geolocated } from "react-geolocated";
    import LocateMeButton from "./Button";
    import "./App.css";

    const Marker = () => (
      <img
        src={
          "http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/map-marker-icon.png"
        }
        alt="MyPin"
      />
    );

    const Map = props => {
      const [state, stateUpdater] = React.useState({
        lat: "",
        lng: "",
        text: ""
      });

      const getGeolocationCordinates = () => {
        return !props.isGeolocationAvailable
          ? stateUpdater({ text: "unsupported browser" })
          : !props.isGeolocationEnabled
          ? stateUpdater({ text: "Geolocation not enabled" })
          : props.coords
          ? stateUpdater({
              lng: props.coords.longitude,
              lat: props.coords.latitude
            })
          : "Getting the location";
      };

      return (
        <div className=" map-container">
          <LocateMeButton Click={() => getGeolocationCordinates()} />
          <GoogleMapReact
            bootstrapURLKeys={{
              key: "API_KEY",
              language: "en"
            }}
            yesIWantToUseGoogleMapApiInternals
            defaultCenter={{ lat: 0.3211264, lng: 32.5910528 }}
            defaultZoom={11}
          >
            <Marker lat={state.lat} lng={state.lng} />
          </GoogleMapReact>
        </div>
      );
    };

    export default geolocated({
      positionOptions: {
        enableHighAccuracy: true
      },
      userDecisionTimeout: 5000
    })(Map);


<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<!-- end snippet -->

    import React from "react";
import GoogleMapReact from "google-map-react";
import { geolocated } from "react-geolocated";
import LocateMeButton from "./Button";
import "./App.css";

const Marker = () => (
  <img
    src={
      "http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/map-marker-icon.png"
    }
    alt="MyPin"
  />
);

const Map = props => {
  const [state, stateUpdater] = React.useState({
    lat: "",
    lng: "",
    text: ""
  });

  const getGeolocationCordinates = () => {
    return !props.isGeolocationAvailable
      ? stateUpdater({ text: "unsupported browser" })
      : !props.isGeolocationEnabled
      ? stateUpdater({ text: "Geolocation not enabled" })
      : props.coords
      ? stateUpdater({
          lng: props.coords.longitude,
          lat: props.coords.latitude
        })
      : "Getting the location";
  };

  return (
    <div className=" map-container">
      <LocateMeButton Click={() => getGeolocationCordinates()} />
      <GoogleMapReact
        bootstrapURLKeys={{
          key: "AIzaSyBtgM1mf0N-Pcsko7Dc5Q2La-K460a9IsA",
          language: "en"
        }}
        yesIWantToUseGoogleMapApiInternals
        defaultCenter={{ lat: 0.3211264, lng: 32.5910528 }}
        defaultZoom={11}
      >
        <Marker lat={state.lat} lng={state.lng} />
      </GoogleMapReact>
    </div>
  );
};

export default geolocated({
  positionOptions: {
    enableHighAccuracy: true
  },
  userDecisionTimeout: 5000
})(Map);

score 0 · Answer 1 · answered Dec 29 '20 at 02:45

I removed the API key that you included in your question. In the future, make sure that you won't post your API key in a public site to protect it.

You can implement this use case using your browser's HTML5 Geolocation feature along with the Maps JavaScript API.

Here is a sample code and code snippet below that implements this in google-map-react library.

import React, { Component } from "react";
import GoogleMapReact from "google-map-react";
import "./style.css";

class GoogleMaps extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentLocation: { lat: 40.756795, lng: -73.954298 }
    };
  }

  render() {
    console.log(this.state.inputRad);
    const apiIsLoaded = (map, maps) => {
      navigator?.geolocation.getCurrentPosition(
        ({ coords: { latitude: lat, longitude: lng } }) => {
          const pos = { lat, lng };
          this.setState({ currentLocation: pos });
        }
      );
    };
    return (
      <div>
        <div style={{ height: "400px", width: "100%" }}>
          <GoogleMapReact
            bootstrapURLKeys={{
              key: "YOUR_API_KEY",
              libraries: ["places"]
            }}
            defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
            defaultZoom={10}
            center={this.state.currentLocation}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps)}
          />
        </div>
      </div>
    );
  }
}
export default GoogleMaps;

How to find user location on google map and focusing on where they're located using google-map-react library

1 Answers1