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

1. Google Account

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

2. API Key from Google Developers Console

Go to console.developers.google.com 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.

3. Tutorials and documentation

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.

4. Create your React App

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.

5. Import react-google-maps and other imports

import _ from "lodash";
import React from "react";
import { compose, withProps } from "recompose";
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker
} from "react-google-maps";

6. Create a file keys.js

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'

7. Add the Map Component

const MyMapComponent = compose(
  withProps({
googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${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.

8. Run your Server to Test

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!