Для начала нам нужно создать проект в консоли разработчика Google.
Затем нам нужно создать ключ API в разделе учетных данных консоли разработчика Google. Нам нужен этот ключ API для отображения карты в веб-приложении.
После этого нам нужно включить Maps Javascript API, перейдя в раздел библиотеки консоли разработчика Google. Теперь мы готовы написать код.
В приведенном ниже примере мы используем пакет @googlemaps/react-wrapper
для отображения карты в нашем веб-приложении.
MapWrapper.js
import { Wrapper, Status } from '@googlemaps/react-wrapper' import CircularProgress from '@mui/material/CircularProgress' import MapView from './MapView.js' const MapWrapper = () => { const mapStatusRender = (status) => { if(status === Status.LOADING) { return ( <CircularProgress color="error" className='mr-20' /> ) } else if(status === Status.FAILURE) { //Failure } else if(status === Status.SUCCESS) { //Success } return null } return ( <Wrapper apiKey="Your google api key" render={mapStatusRender}> <MapView center={{lat: 10.004510, lng: 76.310600}} zoom={15}/> </Wrapper> ) } export default MapWrapper
MapView.js
import { useState, useRef, useEffect } from 'react' import Marker from './Marker' const MapView = ({ center, zoom }) => { const mapRef = useRef(null) const [map, setMap] = useState() useEffect(() => { if (mapRef.current && !map) { setMap(new window.google.maps.Map(mapRef.current, { center, zoom })) } }, [mapRef, map, center, zoom]) return ( <div className='mapview-wrapper'> <div ref={mapRef} id="map" className='mapview-container'> <Marker position={center} map={map} /> </div> </div> ) } export default MapView //Css .mapview-wrapper { position: relative; width: 100vw; height: 100vh; } .mapview-container { position: absolute; inset: 0; }
Маркер.js
import { useState, useEffect } from 'react' const Marker = ({ position, map }) => { const [marker, setMarker] = useState(null) useEffect(() => { if (!marker) { setMarker(new window.google.maps.Marker({})) } // remove marker from map on unmount return () => { if (marker) { marker.setMap(null) } } }, [marker]) useEffect(() => { if (marker) { marker.setOptions({ position, map }) } }, [marker, position, map]) return null; } export default Marker
В приведенном выше примере показано, как мы можем отобразить карту Google и маркер для заданной широты и долготы.
Спасибо, что прочитали
Подпишитесь на меня, чтобы узнать больше!