Интеграция Google Maps в ваше приложение React

При создании приложения возможность добавить все функции, предоставляемые Google Maps, — это здорово, но проблема в том, что это сложно сделать в рамках.

Google предоставляет информацию только об использовании своего Maps API с Vanilla JS; если вы используете такие фреймворки, как Angular, Vue или (в данном случае) React, вам могут понадобиться сторонние библиотеки, документация по которым вызывает затруднения.

Первое, что вам понадобится, это ключ API от Google, который легко получить у них по адресу https://developers.google.com/maps/documentation/. Чтобы сначала создать приложение React, вам нужно скачать npm (Node Packet Manager) и ввести npx create-react-app (название вашего приложения).

Когда я делал свое первое приложение React, которое интегрировало Google Maps API, я изучил несколько сторонних библиотек, которые утверждали, что предлагают простую интеграцию; в конце концов, я остановился на @react-google-maps. Вы можете найти это здесь". На мой взгляд, это лучшая библиотека, связывающая React и Google Maps API, поскольку она все еще постоянно обновляется. Есть еще один, называемый react-google-maps, который вы можете найти здесь, если хотите изучить конкурентов. Мне потребовалось некоторое время, чтобы понять, что лучше, поэтому я пишу этот блог!

Чтобы установить библиотеку, введите в терминал следующее…

npm install --save @react-google-maps/api
# or
yarn add @react-google-maps/api

В верхней части ваших компонентов React вставьте следующее…

import { GoogleMap, LoadScript } from '@react-google-maps/api'

Чтобы интегрировать карту в ваш компонент, вы хотите включить следующее…

<LoadScript
  id="script-loader"
  googleMapsApiKey="YOUR_API_KEY"
  {...other props}
>
  <GoogleMap
    id='example-map'
    {...other props }
  >
   ...Your map components
  </GoogleMap>
</LoadScript>

Это вызовет карту в вашем интерфейсе, но у вас не будет никаких маркеров или функций! Тем не менее, похлопайте себя по спине, так как мне потребовалось пару дней, чтобы нормально работать. Как только вы закончите поглаживание, будьте готовы добавить маркеры и функциональные возможности, как показано ниже…

import { InfoWindow } from '@react-google-maps/api'
import { Marker } from '@react-google-maps/api';

// Initial state is empty and when a marker is clicked, the info is populated
state = {
  locationInfo: null
}

// Create a method that handles the event when a marker is clicked
handleMarkerOnClick = (locationInformation) => {
  this.setState({
    locationInfo: locationInformation
  })
}

// In the render method:
// A Marker on the map that has an onClick event handler
<Marker
      onClick={this.handleMarkerOnClick({lat: 33.772, lng: -117.214})}
      position={{
        lat: 37.772,
        lng: -122.214
      }}
/>

// Ternary that set the condition of whether an information window is shown after a marker is clicked
{ this.state.locationInfo ?
  <InfoWindow
    onLoad={infoWindow => {
     console.log('infoWindow: ', infoWindow)
    }}
    position={{lat: this.state.locationInfo.lat, lng: this.state.locationInfo.lng}}
  >
    <div style={{
     background: 'white',
     padding: 15,
     maxWidth: 400,
     maxHeight: 250,
    }}>
     <h1>InfoWindow</h1>
  </InfoWindow>
  :
  null
}

На этом этапе у вас будет карта, дающая вам маркер с обработчиком событий для обработки кликов. Как разработчик, вы будете иметь полную автономию, чтобы решить, где находится маркер и что произойдет, когда ваш пользователь щелкнет маркер; и благодаря великой щедрости Google вы сможете получить много кликов и трафика на сайт, прежде чем они придут просить денег. Для дальнейшего изучения вашего проекта вы можете посмотреть документацию здесь, но вы уже на пути к удивительному проекту Google Maps API!