Google Maps and React With a Custom Marker

Overview

Google Map React is a component wrapping a set of the Google Maps API functionality. It allows you to render any React component on the Google Map.

Objectives

Integrate Google Maps with React (Javascript & Typescript)
Obtain the API key
Creating a custom marker on the map
Adding animations for the custom markers
Displaying the Google map options

Project Creation

Let’s begin by creating a React app using the below command

create-react-app map-example cd map-example npm start

If you would like to use TypeScript for your React application, then use the below command

create-react-app map-example --typescript cd map-example npm start

Installing Google Maps Component

Now we will install the [google-map-react](https://www.npmjs.com/package/google-map-react) library using the below command.

npm i google-map-react

If you are using TypeScript, then install the types for google-map-react using the below command.

npm i @types/google-map-react

Once the types are installed, we need to get the API key.

Get API Key

To show the maps, you will need an API key to properly authenticate calls.

Go visit the maps platform page. Once there click Getting Started and check the box for Maps. Then click Continue

Then from the dropdown select your Project name. Click Next when you’re brought to the page to enable your APIs. You will now be brought to the following page that displays your API key

Copy the API key and add in your code and you can see the map gets displayed once you run the project using the command npm start

Integrating Google Maps with React with a Simple Component

Create a new file named simpleMap.tsx (for JS simpleMap.js) and add the below code

Creating a Custom Marker on the Map

Now we will create a custom marker instead of the text.

Create a file named Marker.tsx and add the below code.

Create a CSS file named Marker.css and add the below code.

Replace the AnyReactComponent with the Marker component like below in SimpleMapExample.tsx

Your output will be like below:

You now know how to create a custom marker. Now we will animate the marker.

Adding animations for the custom markers

Add the below code in Marker.css.

Replace the below code in Marker.tsx.

We will have the custom animation for the marker like below

Displaying the Google Map Options Bar

We can show the native Google Map options bar like street view, map view control. You do so by passing an options object to the Google Maps component.

Add the map options in SimpleMap.tsx like below.

Now you could see the following changes in your map.