# Google Maps and React With a Custom Marker

Photo by [Yucel Moran](https://unsplash.com/@yucelmoran?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

### Overview

[Google Map React](https://www.npmjs.com/package/google-map-react) is a component wrapping a set of the [Google Maps API](https://developers.google.com/maps/) 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](https://cloud.google.com/maps-platform/?apis=maps,places). Once there click **Getting Started** and check the box for **Maps.** Then click **Continue**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055498373/f75bd808-cc65-4253-b3c9-ba4517c7bbc4.png align="left")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055499768/a631a06a-e61d-4132-a673-64e9e021b453.jpeg align="left")

**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`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055501537/804055f1-3af0-471b-b937-6ff42b1b1209.jpeg align="left")

### 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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055503175/36ef6d75-59ba-4485-8cc0-dd418ff48182.jpeg align="left")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055504638/426684fa-ab32-4442-a595-b9a43cbc948c.jpeg align="left")

### 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055506140/185406aa-c161-4678-8341-4a5b75d0f1a8.jpeg align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055508310/55dfe3c2-0504-4ad8-b047-7742713d9256.jpeg align="left")

Congratulations you have created a simple map with a custom marker and animation in React. Explore more with the plugin. Happy coding :)

#### Reference Link

[**google-map-react**  
*isomorphic google map react component, allows render react components on the google map*www.npmjs.com](https://www.npmjs.com/package/google-map-react)