A React component to integrate Google Maps
To install the stable version
yarn add react-geo-maps
or
npm install react-geo-maps --save
Google Maps marker is imported as
import { Marker } from "react-geo-maps";
Create your component
import React, { Component } from "react";
import { Marker } from "react-geo-maps";
const locations = [
{ lat: -25.363, lng: 131.044, title: "Australia" },
{ lat: 28.7041, lng: 77.1025, title: "Delhi" }
];
class App extends Component {
render() {
return (
<Marker
apikey="YOUR_API_KEY"
zoom={2}
center={{ lat: -28.024, lng: 140.887 }}
locations={locations}
height={500}
width={500}
/>
);
}
}
export default App;
Prop | Type | Required | Description |
---|---|---|---|
[apikey ] |
string | ✅ | Your Google Maps API Key |
[zoom ] |
number | ✅ | Set the map zoom level |
[center ] |
object | ✅ | Default Center |
[locations ] |
array or object | ✅ | Multiple Location |
[width ] |
number | Width of map | |
[height ] |
number | ✅ | Height of map |
[draggable ] |
boolean | dragable marker | |
[onDropMarker ] |
function | onDropMarker marker event |