44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
import GoogleMapReact from "google-map-react";
|
|
const GoogleMapComponent = (props) => {
|
|
const { center, zoom } = props;
|
|
|
|
let data = [center];
|
|
|
|
const ModelsMap = (map, maps) => {
|
|
//instantiate array that will hold your Json Data
|
|
let dataArray = [];
|
|
//push your Json Data in the array
|
|
{
|
|
data.map((markerJson) => dataArray.push(markerJson));
|
|
}
|
|
|
|
//Loop through the dataArray to create a marker per data using the coordinates in the json
|
|
for (let i = 0; i < dataArray.length; i++) {
|
|
let marker = new maps.Marker({
|
|
position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
|
|
map,
|
|
label: dataArray[i].id,
|
|
});
|
|
}
|
|
};
|
|
return (
|
|
<GoogleMapReact
|
|
options={function (maps) {
|
|
return {
|
|
overviewMapControl: true,
|
|
mapTypeControl: true,
|
|
};
|
|
}}
|
|
bootstrapURLKeys={{
|
|
key: "AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo",
|
|
}}
|
|
defaultCenter={center}
|
|
defaultZoom={zoom}
|
|
yesIWantToUseGoogleMapApiInternals
|
|
onGoogleApiLoaded={({ map, maps }) => ModelsMap(map, maps)}
|
|
></GoogleMapReact>
|
|
);
|
|
};
|
|
|
|
export default GoogleMapComponent;
|