Интерактивные маркеры в компоненте google-maps-react

Итак, у вас есть отличная Google Map, встроенная в ваше приложение React (или, если вы еще этого не сделали, посмотрите мой блог о том, как это настроить и запустить - Интеграция Google Maps в ваше приложение React). Это супер круто. Но не было бы еще круче, если бы ваши пользователи могли нажимать на появившиеся маркеры и получать более подробную информацию о том, что маркирует маркер?

Пакет google-maps-react, который вы установили для визуализации карты в своем приложении, предлагает простой способ решить эту проблему! Если вы помните, в нашем приложении есть компонент Map, который пока выглядит так:

import React from "react";
import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from "react-google-maps";
const Map = withScriptjs(withGoogleMap((props) =>{
   const recycleCenters = props.recycleCenters 
  
   return (       
       <GoogleMap zoom={4.5} center={ { lat:  39.6693, lng: -98.3476 } } />  
     
       {recycleCenters.map(center => (            
           <Marker                 
              key={center.id}                 
              position={{                     
                 lat: center.latitude,                     
                 lng: center.longitude                 
              }}
           />        
        ))};
       </GoogleMap>
}))
export default Map;

Во-первых, обратите внимание, что при импорте из react-google-maps мы добавили нечто под названием Infowindow. Информационное окно - это именно то, что мы хотим вывести при нажатии на маркер.

Итак, что мы хотим показать в информационном окне? Вы можете положить сюда все, что захотите! Вы можете добавлять изображения (подумайте о Redfin, когда вы нажимаете на маркер дома на продажу, и появляется изображение дома!) Или любую другую информацию о местоположении, которую вы сохранили в свой реквизит, который проходит в компонент "Карта".

Чтобы наше приложение узнало, какой маркер был нажат, нам нужно установить состояние следующим образом:

const [selectedCenter, setSelectedCenter] = useState(null);

Затем нам, конечно же, нужно добавить прослушиватель событий к нашему маркеру -

<Marker
   key={center.id}
   position={{
      lat: center.latitude,
      lng: center.longitude
   }}
   onClick={() => {
      setSelectedCenter(center);
   }}
/>

Но нам нужно убедиться, что информационное окно отображается прямо над маркером, там, где мы хотим. Для этого давайте создадим информационное окно, которое мы импортировали из нашего пакета react-google-maps, и установим широту и долготу.

{selectedCenter && (
   <InfoWindow
      onCloseClick={() => {
         setSelectedCenter(null);
      }}
      position={{
         lat: selectedCenter.latitude,
         lng: selectedCenter.longitude
      }}
   >
   </InfoWindow>
)}

Пока все хорошо, теперь у нас есть пустое окно, которое всплывает, когда мы нажимаем на маркер! Заполнить информационное окно тем, что вы хотите, очень просто. Для моего RecycleIt! app, я хотел, чтобы пользователи могли видеть имя, адрес, номер телефона и часы работы для выбранного центра, и, передав эту информацию моему компоненту карты в качестве реквизита, я могу отформатировать ее так:

<div>
   <h3>{selectedCenter.name}</h3>
   <h5>{selectedCenter.address}, {selectedCenter.city},{selectedCenter.state} {selectedCenter.zip_code}</h5>
   <h5>{selectedCenter.phone_number}</h5>
   <p>Hours of operation: {selectedCenter.hours}</p>
</div>

Обратите внимание, что, заключив отображаемую информацию в ‹div /›, я могу форматировать с помощью CSS - я мог бы даже добавить className в div и установить стиль CSS в моем файле app.css!

Последнее, что важно при создании информационных окон, которые всплывают, когда пользователь нажимает на маркер, - это то, что вы не хотите, чтобы это окно оставалось открытым навсегда. Как это будет раздражать, если вы откроете одно информационное окно, и оно останется ... в конце концов, весь ваш экран будет покрыт перекрывающимися информационными окнами! React-google-maps дает нам удобный метод под названием useEffect, который аккуратно справляется с этим за нас.

useEffect(() => {
   const listener = e => {
      if (e.key === "Escape") {
         setSelectedCenter(null);
      }
   };
   window.addEventListener("keydown", listener);
   return () => {
      window.removeEventListener("keydown", listener);
   };
}, 
[]);

Вот и все! Теперь у нас есть не только рабочая карта, но и карта, которая отображает маркеры для любых местоположений, возвращаемых нашим поиском, И имеет информационные окна, которые открываются, когда пользователь нажимает на маркер!

Вы можете проверить официальную документацию по использованию информационных окон, включая пример, чтобы увидеть, как создать полностью настроенное здесь:

Удачного кодирования!