How to Integrate the Google Maps API with React.js
Tags: react, javascript, googlecloud, tutorial
Published: 2020-08-29 19:48:02

In my journey to find how to integrate Google Maps with ReactJS, I stumble a lot of articles recommended to use the npm google-maps-react.
{% github fullstackreact/google-maps-react %} 
I love to research how to implement what I need without using third-party libraries and after long research, I found a way to integrate it.
## first thing how to get access key to use google maps
firstly, we need to get access key from google cloud [google cloud](https://cloud.google.com/) and after login go to the console in the top right corner
![console button](https://dev-to-uploads.s3.amazonaws.com/i/rgg8pev3xqkkq06vpw5t.png)
**If you are new to google cloud service you get a free 300$** 

then we open a new Project and in the dashboard go to the enable APIs and services button and search for those 3 API:
1.Geocoding API.

2.Maps JavaScript API.

3.Places API.

after adding those 3 APIs we press the hamburger button in the top left corner and go to APIs & Services -> Credentials
then we press the create credentials button and in the select list pick API key and the popup press restrict key
in the Application, restrictions pick HTTP referrers (websites)
then we add our website URL so only from this URL you can call with this key after it we go to API restrictions and pick Restrict key and pick the three APIs we enable earlier and saves it.
the process can take up to 5 min to the key to be activated or take effect after a change of the setting.
you can also see Google video about this if you want another explanation.
{% youtube 2_HZObVbe-g %}

## The integration
**now we start with the fun part and build our react app**
The code here is written with a functional component and not a class component but it similar to each other.
### create your react app
```
npm init react-app my-app
```
### Create 2 env files
.env.development and .env.production and put in the project folder(**not in the src folder**).
there you gonna save your access key to add env var that react will recognize we need to use REACT_APP at the start of every variable like REACT_APP_API_KEY and set it equal to you to access key 
```env
REACT_APP_API_KEY = access_key
```
**Remember if you upload your code with git add in the .gitignore those file
### 1. Add useRef to your component
we need to useRef because we need to get the element reference in the future code
```jsx
const googleMapRef = useRef();
<div
     id="google-map"
     ref={googleMapRef}
    style={{ width: '400px', height: '300px' }}/>
```
### 2. Write useEffect to implement the script load
we here use useEffect because we want to load the google maps script after the component render 
```javascript
useEffect(() => {
    const googleMapScript = document.createElement('script');
    googleMapScript.src=`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_API_KEY}&libraries=places`;
    googleMapScript.async = true;
    window.document.body.appendChild(googleMapScript);
    googleMapScript.addEventListener('load', () => {
                        getLatLng();
                    });
                })
},[])
you can add at the end of the src &language=en to be only English without this it will be localized.
```
### 3. Create google map function
here we see how see the code that will print the map to the element from the ref.
```javascript
    const createGoogleMap = (coordinates) => {
        googleMap = new window.google.maps.Map(googleMapRef.current, {
            zoom: 16,
            center: {
                lat: coordinates.lat(),
                lng: coordinates.lng(),
            },
            disableDefaultUI: true,
        })
    };
```
I added isableDefaultUI: true because I wanted to remove the default button that comes with it like in the image below.
![Defualt Google Map](https://dev-to-uploads.s3.amazonaws.com/i/f022hb7qx6nuh6itp8y6.png)

### 4. Get LAT & LNG for the map
in this method, we insert the location place and we get the LAT & LNG of the location and add send the result to the previous function we see, Also as you can see there is Marker so when I print the location it will print it with the red marker
(if you don't use the marker you will see the location without the red marker).
```javascript
    const getLatLng = () => {
        let lat, lng, placeId;
        new window.google.maps.Geocoder().geocode({ 'address': `${placeName}` }, function (results, status) {
            if (status === window.google.maps.GeocoderStatus.OK) {
                placeId = results[0].place_id;
                createGoogleMap(results[0].geometry.location);
                lat = results[0].geometry.location.lat();
                lng = results[0].geometry.location.lng();
                new window.google.maps.Marker({
                    position: { lat, lng },
                    map: googleMap,
                    animation: window.google.maps.Animation.DROP,
                    title: `${placeName}`
                });
                setGoogleMapInfo({ ...GoogleMapInfo, lat, lng, placeId, isLoading: false, googleMap });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
```
without marker:
![Google Map Without Marker](https://dev-to-uploads.s3.amazonaws.com/i/dztqswb6tkpv28q0s59c.png)
with Marker:
![Google Map with Marker](https://dev-to-uploads.s3.amazonaws.com/i/45mj9187bb5ktfqf798q.png)

### 5. add everything to one component
```jsx
const GoogleMap = ({ placeName }) => {
  const googleMapRef = useRef();
  let googleMap;
  useEffect(() => {
    const googleMapScript = document.createElement("script");
    googleMapScript.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_API_KEY}&libraries=places`;
    googleMapScript.async = true;
    window.document.body.appendChild(googleMapScript);
    googleMapScript.addEventListener("load", () => {
      getLatLng();
    });
  }, []);

  const createGoogleMap = (coordinates) => {
    googleMap = new window.google.maps.Map(googleMapRef.current, {
      zoom: 16,
      center: {
        lat: coordinates.lat(),
        lng: coordinates.lng(),
      },
      disableDefaultUI: true,
    });
  };
  const getLatLng = () => {
    let lat, lng, placeId;
    new window.google.maps.Geocoder().geocode(
      { address: `${placeName}` },
      function (results, status) {
        if (status === window.google.maps.GeocoderStatus.OK) {
          placeId = results[0].place_id;
          createGoogleMap(results[0].geometry.location);
          lat = results[0].geometry.location.lat();
          lng = results[0].geometry.location.lng();
          new window.google.maps.Marker({
            position: { lat, lng },
            map: googleMap,
            animation: window.google.maps.Animation.DROP,
            title: `${placeName}`,
          });
        } else {
          alert(
            "Geocode was not successful for the following reason: " + status
          );
        }
      }
    );
  };
  return (
    <div
      id="google-map"
      ref={googleMapRef}
      style={{ width: "400px", height: "300px" }}
    />
  );
};

```
## There it is easy right!!
As you can see it is super easy to do it and there is no use for this library and you can do it all by yourself
in placeName name try to put something like "Kennedy Space Center Historic Launch Complex 39A"

I hope this was interesting and helpful.
this is my first article and I would glad to get reviews and stuff that I can do to improve the reading environment and how to write it better