Functional component with google-maps-react

This post will walk you through creating a React functional component using google-maps-react.

Step 1: Install the google-maps-react package from NPM using the command:

npm install google-maps-react --save

Step 2: Create a new file for your component. For this tutorial, the file will be named custom-map.js and the name of the component will be CustomMap.

Step 3: The CustomMap component will take two props. The first prop google will be required to render the map and the second prop locations = [] will take an array of co-ordinates to display markers on the map.

Your component should now look something like this:

export default function CustomMap({ google, locations = [] }) {
    return (<div>Map will appear here</div);
};

Step 4: Next, import Map and Marker from google-maps-react to render the map through the CustomMap component.

How you customise the <Map /> will depend on your prefences. Refer to the documentation for customisation options.

Your component will now look something like this:

export default function CustomMap({ google, locations = [] }) {
    return (
        <Map
            google={google}
            containerStyle={{
                position: "static",
                width: "100%",
                height: "100%"
            }}
            style={{
                width: "100%",
                height: "100%"
            }}
            center={locations[0]}
            initialCenter={locations[0]}
            zoom={locations.length === 1 ? 18 : 13}
            disableDefaultUI={true}
        >
            {locations.map(
                coords => <Marker position={coords} />
            )}

        </Map>
    )
};

Step 5: The CustomMap component is ready, but it is missing the google prop. To fix this, import GoogleApiWrapper from google-maps-react and create a HOC at the bottom of the file like this:

export default GoogleApiWrapper({
    apiKey: process.env.GOOGLE_API_KEY
})(CustomMap);

In this code snippet, the Google API key is being retrieved from the environment variables. For testing purposes you can set this to a blank string ("") and the map will still appear.

Step 6: Finally, ensure you only have one export default in this custom-map.js file. Remove it from CustomMap and keep it only for GoogleApiWrapper.

Using the CustomMap component

You will notice in Step 4 the style of the map and the containerStyle for the map has a width and height of 100%. This means that simply rendering <CustomMap /> will not display anything on your screen if the parent container does not have a width or height.

Therefore, to render the <CustomMap /> and to keep it re-useable across the app wrap it in a <div>. For example:

<div style={{ width: 300, height: 300 }}>
    <CustomMap {...props} />
</div>