Open juliopiubello opened 6 years ago
so what are you all trying to get?
Hope that helps:
import Box from "@material-ui/core/Box";
import React, {useEffect, useState} from "react";
import WorkplaceMap from "../../../../../MyProjects/meeba-web/public/components/workplace/WorkplaceMap";
import {getPlace} from "../../../../../MyProjects/meeba-web/public/helpers/googleMapsService";
const MyMap = ({onClick, location, center, initMap}) => {
const onMapClicked = (mapProps, map, clickEvent) => {
onClick({
lat: clickEvent.latLng.lat(),
lng: clickEvent.latLng.lng()
});
};
return (
<Map google={window.google}
zoom={14}
center={center}
onClick={onMapClicked}
onReady={initMap}
>
<Marker
position={location}
/>
</Map>
);
};
const Main = () => {
const [map, setMap] = useState(null);
const [mapCenter, setMapCenter] = useState({});
useEffect(() => {
if (!workplace?.placeId || !map)
return;
// Once we have placeId and map object we retrieve the google map Place object
fetchPlace();
}, [map, workplace?.placeId]);
const fetchPlace = async () => {
if (workplace?.placeId) {
const place = await getPlace(workplace.placeId, map);
setMapCenter({
lng: place?.geometry.location.lng(),
lat: place?.geometry.location.lat(),
});
}
};
/**
* User change the location
* @param location
* @return {Promise<void>}
*/
const handleMapLocationChange = async location => {
const placeByLocation = await getPlaceByLocation(location);
handleChange("placeId", placeByLocation.place_id);
};
const initMap = (mapProps, map) => {
setMap(map);
};
return (
<MyMap
location={extractLocation()}
onClick={handleMapLocationChange}
center={mapCenter}
initMap={initMap}/>
);
};
const geocoder = new window.google.maps.Geocoder;
export const getPlaceByLocation = location => {
if (!location?.lat || !location?.lng)
return;
return new Promise(resolve => {
geocoder.geocode({'location': location}, function (result) {
const place = result[0];
return resolve(place);
});
});
};
I'm trying to get places details but I'm limmited to the name, adress and id. I'm having a little trouble trying to get this using react components. Someone got a hint ?
*** Tried use the google places api but I couldnt the the google.etc's to work, react simply doesnt load the library from script