Для начала нам нужно создать проект в консоли разработчика 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 и маркер для заданной широты и долготы.

Спасибо, что прочитали

Подпишитесь на меня, чтобы узнать больше!