How to start Google API

Google API (Map and Marker)

Photo by henry perks on Unsplash

1. Google Account

2. API Key from Google Developers Console

3. Tutorials and documentation

4. Create your React App

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

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>`};

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" />
];

8. Run your Server to Test

--

--

Software Engineer Student

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