Google Maps

OverviewOfficial Website

A declarative Google Map React component using React, lazy-loading dependencies and current-location finder.

Import package
import { GoogleApiWrapper, Map, Marker } from "google-maps-react";
Add Package
yarn add google-maps-react --save
Remove Package
yarn remove google-maps-react ( you can remove package by removing specific package from package.json )
Examples
Title Javascript
Required Code
const mapStyles = {
    width: '100%',
    height: '100%',
};
const LoadingContainer = () => <div>Loading...</div>
Markers
<Map
    google={props.google}
    zoom={8}
    style={mapStyles}
    initialCenter={{ lat: 34.134117, lng: -118.321495 }}
>
    <Marker position={{ lat: 48.00, lng: -122.00 }} />
    <Marker position={{ lat: 34.134117, lng: -118.321495 }} />
    <Marker position={{ lat: 32.995049, lng: -111.536324 }} />
    <Marker position={{ lat: 37.383064, lng: -109.071236 }} />
    <Marker position={{ lat: 39.877586, lng: -79.640617 }} />
</Map>
Overlays
<Map
    google={props.google}
    zoom={8}
    style={mapStyles}
    initialCenter={{ lat: 54.5260, lng: 15.2551 }}
/>
Street View Panoramas
<Map
  google={props.google}
  zoom={8}
  style={mapStyles}
  initialCenter={{ lat: 8.7832, lng: 34.5085 }}
/>
Map Types
<Map
    google={props.google}
    zoom={8}
    style={mapStyles}
    initialCenter={{ lat: 19.0760, lng: 72.8777 }}
/>
© Velzon.
Design & Develop by Themesbrand
Warning :- We are deprecating the saga version by the end of December this year.