Back ArrowExplore all kits

How to Create Google Map with Users Location using ReactJS

share link

by vsasikalabe dot icon Updated: Feb 13, 2023

technology logo
technology logo

Solution Kit Solution Kit  

Google Maps is a map service maintained by Google that develops various configuration settings. It also provides detailed information about geographical locations and sites worldwide. In addition to ordinary road maps, Google Maps offers aerial and satellite views of many locations. In some locations, Google Maps gives streets. For API creation, go to the Google Cloud Console, click the Select a project button, select the same project you set up for the Maps JavaScript API, and click Open. At the top of the page, select ENABLE API to display the Library tab. Next, search for Places API, select it from the results list and Select ENABLE. 

 

  • To provide directions to your business address 
  • To show a route to our needs. 
  • To provide live updates on a particular item's location 
  • expose amazing places around the world 

You'll need the following data to create a google map: 

  • Google Map API Key 
  • google-map-react installed 
  • Longitude and latitude values for your mentioned address 

The Map component takes some of the optional props as given below: 

  • style - the CSS style object 
  • zoom - number value representing a tighter focus on the map's center 
  • initial center - an entity containing latitude and longitude values. 

 

Here is an example of how to create a google map with user's locations using React: 

Preview of the output that you will get on running this code from your IDE

Code:

In this solution we use the React library.

create google map with users location with react

JavaScriptdotLines of Code : 35dotLicense : Strong Copyleft (CC BY-SA 4.0)

export class MapContainer extends React.Component {
  state = { userLocation: { lat: 32, lng: 32 }, loading: true };

  componentDidMount(props) {
    navigator.geolocation.getCurrentPosition(
      position => {
        const { latitude, longitude } = position.coords;

        this.setState({
          userLocation: { lat: latitude, lng: longitude },
          loading: false
        });
      },
      () => {
        this.setState({ loading: false });
      }
    );
  }

  render() {
    const { loading, userLocation } = this.state;
    const { google } = this.props;

    if (loading) {
      return null;
    }

    return <Map google={google} initialCenter={userLocation} zoom={10} />;
  }
}

export default GoogleApiWrapper({
  apiKey: "-----------"
})(MapContainer);

Instructions

Follow the steps carefully to get the output easily.

  1. Install the Node.js and React on your IDE(preferable Visual Studio Code).
  2. Create React Application using npx create-react-app foldername.
  3. cd foldername.
  4. npm i google-maps-react
  5. Open the folder in IDE.
  6. Copy the code using "copy" button above and paste it in App.js file(remove the earlier code from App.js).
  7. Import React and googleapiwrapper,map from google-maps-react.
  8. Generate your api key and put it into the line no.33.
  9. Open the terminal from IDE.
  10. npm start to run the file..


I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.


I found this code snippet by searching for 'Create google map with users location using React' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in VS Code 1.73.1 version.
  2. The solution is tested on Nodejs 16.14.2 version.
  3. react 18.2.0 version.
  4. google-maps-react: 2.0.6 version.


Using this solution, we are able to Create google map with users location using React with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to Create google map with users location using React.

Dependent Libraries

create-react-appby facebook

JavaScript doticonstar image 100082 doticonVersion:v5.0.1doticon
License: Permissive (MIT)

Set up a modern web app by running one command.

Support
    Quality
      Security
        License
          Reuse

            create-react-appby facebook

            JavaScript doticon star image 100082 doticonVersion:v5.0.1doticon License: Permissive (MIT)

            Set up a modern web app by running one command.
            Support
              Quality
                Security
                  License
                    Reuse

                      google-maps-reactby fullstackreact

                      JavaScript doticonstar image 1613 doticonVersion:Currentdoticon
                      License: Permissive (MIT)

                      Companion code to the "How to Write a Google Maps React Component" Tutorial

                      Support
                        Quality
                          Security
                            License
                              Reuse

                                google-maps-reactby fullstackreact

                                JavaScript doticon star image 1613 doticonVersion:Currentdoticon License: Permissive (MIT)

                                Companion code to the "How to Write a Google Maps React Component" Tutorial
                                Support
                                  Quality
                                    Security
                                      License
                                        Reuse

                                          You can search for any dependent library on kandi like 'react 'and 'google-maps-react'.

                                          Support

                                          1. For any support on kandi solution kits, please use the chat
                                          2. For further learning resources, visit the Open Weaver Community learning page

                                          See similar Kits and Libraries

                                          Open Weaver – Develop Applications Faster with Open Source

                                          kandi

                                          Community and Support

                                          Company

                                          Follow

                                          • © 2023 Open Weaver Inc.