@react-google-maps/api thoughts (pt.1)

There I was... On a team... Given a task... make a map (or two)

And then this happened:

I needed a map. But not just picture of a map. I needed a google map to use inside of react. Specifically I needed to generate a map that would render data dynamically from our database. I also wanted to use another smaller map as an input field for a user who wanted to select a location of their liking, but didn't want to share their current location. I first turned to react-google-maps. Unfortunately, I found that this library - though very useful - was unmaintained. What to do, what to do, what to do... Yup, you guessed it: @react-google-maps/api to the rescue!

Well, almost.

While @react-google-maps/api did solve my problem of needing a "non-deprecated" library, I found their documentation functioned much more like a dictionary than a helpful guide. The walkthroughs and getting-started material was helpful for only a short portion of my map making adventures. I needed to render a map (documentation did help with that)... Then I needed to: render markers, compute the longitude and latitude of the markers, store that information in the database, and possibly change the map's center based on user interaction.

During this several-hour journey I eventually found what I was looking for and was able to create a couple of maps to my liking, however I spent a lot of time looking for information that I still think should be clearly outlined in the documentation in a more overtly obvious way. My biggest issue was that I found myself reading google maps documentation, react google maps documentation, and react google maps/api documentation and then having to combine all three to get a simple result.

So, enough jibber jabber and let's get on with the some pointers that I hope can be helpful for you in your map generating journeys.

We'll start here: My favorite component set up for a map

Again, simple, but I have to say it would have been nice to know this setup a week ago. Let's begin.

You will need to create a react app, install the react google maps/ api library, and then install dotenv for environmental variables.

npm i -S @react-google-maps/api

npm install dotenv

I am going to assume that you are comfortable with create-react-app and that you can make a google API key and hide it in a .env file. If not, there are fortunately gobs of tutorials out there on how to do so. Check out those tidbits and jump back over here once you're all set up. Now, this is what my most basic, stripped down Map component might look like:

import React, { useState } from 'react'
import { GoogleMap, useLoadScript } from '@react-google-maps/api'

const Map = () => {
  const [ myMap, setMyMap ] = useState(null);
  const [ center, setCenter ] = useState({ lat: 29.972065, lng: -90.111533 });

  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_KEY,
  });

  const renderMap = () => (
        <GoogleMap
          mapContainerStyle={{
            height: "50vh",
            width: "50vw",
            margin: "20px",
          }}
          zoom={10}
          center={center}
          onLoad={map => setMyMap(map)}
        >
        </GoogleMap>
  )

  return isLoaded ? renderMap() : null;
}

export default Map

This can look like a lot is going on here, especially for starter code, but it's easily broken down. I'll explain it from the top down and you'll be making some killer maps in no time.

At the tippy top we are importing React and utilizing the useState hook. Then we are importing the @react-google-maps/api library and using its GoogleMap component which is what will be our actual map.

We then created a functional component and named it Map and exported it at the bottom so that we can import it to whichever part of our app we would like it to be displayed. So far, so good. Let's skip the hooks for now and go to the line that starts with

const { isLoaded } = useLoadScript...

This deconstructed variable assignment functions in a really cool way. Your current predicament: you have to get the map from google and they have to approve your API key all before you can load it. This, isLoaded, combined with the returned ternary operator at the end will make sure your map is ready to go so you can have a smooth rendering each time.

Now diving into the meat and potatoes of the component. It might seem silly to add styling, but forewarning, if you don't specify width and height it will render so small you can't see it. We're talking 0 x 0 pixels, so you're going to need to specify something here. The next line concerning the margin is simply there so the map is not stuck at the very top of where ever you are wanting to render it. Please change these values as your heart desires.

Next we have the zoom, this is found in the documentation and tells google how far zoomed in our out you would like to the initial view to be.

And last but not least, we have our center and onLoad which will tie us back into our hooks. The center value is the longitude and latitude of where you want the center of the map to start. Google likes to use "lat" and "lng" so keep that "o" in "long" outa there. To take us home we have our onLoad which is saving this specific map instance to our myMap value in state so we can use and examine later.

That should do it for getting started with @react-google-maps/api. There are more snags and hurdles to overcome and we'll tackle some of those issues by finding going over useful tools in future posts. Fun mapping!