Integrating Google Maps into a React.js Application

Google Maps is a mapping service provided by Google that supports a wide range of configurations. Adding Google Maps to your application can provide users with comprehensive location information in the form of street addresses or sets of coordinates for the desired location.

In this article, I will discuss the steps to integrate the Google Maps API into a React.js application. With this integration, we can easily display dynamic maps on the website or application we develop using React.js.

# Preparation

A laptop with Node.js and React.js already installed. To download and install Node.js, you can visit their website at https://nodejs.org/. For React.js, you can find installation instructions on their website at https://reactjs.org/docs/getting-started.html. Don't forget a cup of coffee ☕ as well! 😁

# Coding Time

Once Node.js and React.js are installed, the first step is to create a new project with the following command:

npx create-react-app react-gmaps

Next, navigate to the directory of the created project:

cd react-gmaps

Before running or writing code, let's install the Google Maps dependency:

npm i @react-google-maps/api or yarn add @react-google-maps/api

At this point, we have a React application with the react-google-maps package. Now, we can use Google Maps in our React.js application. Next, we need to edit the App.js file to use the installed Google Maps package.

Open src/App.js and follow the code below:

// Import the installed Google Maps package
import {
  GoogleMap,
  LoadScript
} from "@react-google-maps/api";

function App() {

  // Set the center coordinates; here, I'm setting them to Jakarta
  const center = {
    lat: -6.2269976,
    lng: 106.7848748,
  };

  // ContainerStyle is used to style the Google Maps container
  const containerStyle = {
    width: '800px',
    height: '800px'
  };

  return (
    <>
      <LoadScript googleMapsApiKey={YOUR_GOOGLE_API_KEY}>
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={12}
        />
      </LoadScript>
    </>
  );
}

export default App;

To see the result of the Google Maps integration, run the following command:

npm start or yarn start

For example, access it at localhost:3000:

/assets/articles/2021-06-01-103253800x804scrot-framed.png

Using Markers

First, import the Marker package to use markers in the Google Maps API. You can see an example of how to use markers in the code below:

// Import the installed Google Maps package
import {
  GoogleMap,
  LoadScript,
  Marker, // Import Marker
} from "@react-google-maps/api";

function App() {

  // Set the center coordinates; here, I'm setting them to Jakarta
  const center = {
    lat: -6.2269976,
    lng: 106.7848748,
  };

  // ContainerStyle is used to style the Google Maps container
  const containerStyle = {
    width: '800px',
    height: '800px'
  };

  return (
    <>
      <LoadScript googleMapsApiKey={process.env.REACT_APP_GMAPS_API}>
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={12}
        >
          <Marker
            // Place the marker by specifying the coordinates
            position={{
              lat: -6.214511929764319,
              lng: 106.84522285129088,
            }}
            // If you want the marker to be draggable, change the value of `draggable` to true
            draggable={false}
          />
        </GoogleMap>
      </LoadScript>
    </>
  );
}

export default App;

Customizing Google Maps

To customize the style of Google Maps, visit https://mapstyle.withgoogle.com/. Modify the map appearance according to your preferences, and after you're done, copy the JSON-style script.

/assets/articles/2021-06-01-105759748x691scrot-framed.png

Next, you can use the JSON style in the options parameter of the <GoogleMap> tag with the styles key. Here's an example of the code:

// Import the installed Google Maps package
import {
  GoogleMap,
  LoadScript,
  Marker,
  InfoWindow,
} from "@react-google-maps/api";

function App() {

  // Set the center coordinates; here, I'm setting them to Jakarta
  const center = {
    lat: -6.2269976,
    lng: 106.7848748,
  };

  // ContainerStyle is used to style the Google Maps container
  const containerStyle = {
    width: '800px',
    height: '800px'
  };

  // The custom map style obtained from https://mapstyle.withgoogle.com/
  const customMaps = [
    {
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#242f3e"
        }
      ]
    },
    {
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#746855"
        }
      ]
    },
    {
      "elementType": "labels.text.stroke",
      "stylers": [
        {
          "color": "#242f3e"
        }
      ]
    },
    {
      "featureType": "administrative.land_parcel",
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "administrative.locality",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#d59563"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "labels.text",
      "stylers": [
        {
          "visibility":

 "off"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#d59563"
        }
      ]
    },
    {
      "featureType": "poi.business",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "poi.park",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#263c3f"
        }
      ]
    },
    {
      "featureType": "poi.park",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#6b9a76"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#38414e"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "geometry.stroke",
      "stylers": [
        {
          "color": "#212a37"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "labels.icon",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#9ca5b3"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#746855"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "geometry.stroke",
      "stylers": [
        {
          "color": "#1f2835"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#f3d19c"
        }
      ]
    },
    {
      "featureType": "road.local",
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "transit",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "transit",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#2f3948"
        }
      ]
    },
    {
      "featureType": "transit.station",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#d59563"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#17263c"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#515c6d"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "labels.text.stroke",
      "stylers": [
        {
          "color": "#17263c"
        }
      ]
    }
  ];

  return (
    <>
      <LoadScript googleMapsApiKey={process.env.REACT_APP_GMAPS_API}>
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={12}
          options={{
            styles: customMaps
          }}
        >
          <Marker
            position={{
              lat: -6.214511929764319,
              lng: 106.84522285129088,
            }}
            draggable={false}
          />
        </GoogleMap>
      </LoadScript>
    </>
  );
}

export default App;

Customized result:

/assets/articles/2021-06-01-110343804x803scrot-framed.png

# Author's Message

It's that easy, right? For complete documentation, you can check it out here. That's all I have to offer; I hope it's useful. Thank you! 😁

Integrating Google Maps into a React.js Application

Sat, 26 2021, 1:37:00 am

Table Of Content

# Preparation

# Coding Time

# Author's Message