How do I get places details ?

[juliopiubello]

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

[Quixotical]

so what are you all trying to get?

[chenop]

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