How to start Google API

Google API (Map and Marker)

I always wanted to use API on my project and I was so excited, but also a bit nervous at the same time. However, I was able to pull through. If someone wants to use API but does not know where to start, then I can share my experience with the Google API process. After reading this, I hope you can be more comfortable with it.

Photo by henry perks on Unsplash

First, if you want to use Google API you must have a Google account. Please sign up for a Google Account so that you can access the Google API (Google Account Sign up).

Go to and click Library on the left column.

You can type into the search bar to easily find your API. I will try to use Google Map API.

Click Enable, go to Credentials in API & Services. Click CREATE CREDENTIALS, then choose the API key to create your own API key. If you need to you can also restrict key by options.

For example, my project name is “My First Project”. But give it your own specific project name so that you can easily manage your API for each project.

Google Maps API has tutorials and documentation in many different computer languages so you can check some sample code. But if you try for the first time, it may be a lot of information so be patient and give enough time to understand.

npm install -g npm
npx create-react-app <your-app-name>
//install dependencies
npm install --save react-google-maps

This is how we get the google maps as a component and check the package.json file to make sure it is installed.

import _ from "lodash";import React from "react";import { compose, withProps } from "recompose";import {
} from "react-google-maps";
export default {  API_KEY: `<API Key here>`};

Create a file in the src directory for the API key and add keys.js into .gitignore so that you can protect your key from the public sharing repository. import keys from '../keys'

const MyMapComponent = compose(  withProps({googleMapURL: `${keys.API_KEY}&v=3.exp&libraries=geometry,drawing,places`,loadingElement: <div style={{ height: `100%` }} />,containerElement: <div style={{ height: `400px` }} />,mapElement: <div style={{ height: `100%` }} />}),withScriptjs,withGoogleMap)(props => (<GoogleMap defaultZoom={12} defaultCenter={{ lat: 40.693249, lng:  -74.057278 }}><Marker position={{ lat: 40.693249, lng: -74.057278 }} />.     </GoogleMap>));const enhance = _.identity;const ReactGoogleMaps = () => [ 
<MyMapComponent key="map" />

This map component has styles for the container and also adds default Marker in the Map.

Map and Maker have static position and center in this code, but next blog I will share about the dynamic location by using geocoding API and custom Maker inside the map.

I hope this blog helps in building your own app and please don’t be afraid to use API!

It was my first API and I really enjoyed and learned a lot using it in this project. I had to research a lot of information to make sure it worked properly. I cannot wait to try more API on my next project.

Thank you for reading my blog, I welcome thoughts, comments, and counterpoints to help me learn, evolve, and grow. Please let me know what you think!




Software Engineer Student

Love podcasts or audiobooks? Learn on the go with our new app.

Create a Next.js App and Consume API

How to add screen sharing to your web app with Sendbird Calls

Implementing Google AdMob in React Native

Part 1: Create your first Next.js application

How to log a Node.js API in an Express.js app with Mongoose plugins

Complete Nuxt 3 Review

How to test React application with Jest

The screen with code of unit tests

Status Codes in GraphQL

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Esther Kim

Esther Kim

Software Engineer Student

More from Medium

Back-End Introduction


Version Controlling | NoSql

All MongoDB Database Commands