Реализуйте Google Maps в ReactJs

У меня было немало проблем с внедрением Google Maps в ReactJs с использованием пакета npm. Надеюсь, эта статья поможет вам избежать неприятностей, через которые я прошел.

В поисках лучшего пакета

В основном проблема заключалась в том, чтобы найти лучший пакет с хорошей документацией, чтобы я мог разместить свои Карты Google на своей странице и начать работу. Лучше всего я нашел пакет google-map-react от istarkov.

Пример проекта карты Google

Что было действительно приятно с его стороны, так это создание примера проекта React.Js, реализующего google-map-react. Таким образом, вы можете иметь реальное приложение, чтобы увидеть пример.

Быстрый старт

Он довольно хорошо помогает вам быстро изучить его документацию, но я добавил этот пример на тот случай, если вы захотите немедленно скопировать и вставить его.

Находясь в текущем каталоге React.JS, запустите следующие строки кода в своем терминале.

npm i -S google-map-react

Затем создайте компонент, я назову свой map.js. Скопируйте и вставьте в этот файл следующие строки кода.

import React, { Component } from 'react'
import GoogleMapReact from 'google-map-react'
const AnyReactComponent = ({ text }) => <div>{ text }</div>;
export default class Map extends Component {
  static defaultProps = {
    center: { lat: 40.7446790, lng: -73.9485420 },
    zoom: 11
  }
render() {
    return (
      <div className='google-map'>
        <GoogleMapReact
          defaultCenter={ this.props.center }
          defaultZoom={ this.props.zoom }>
          <AnyReactComponent
            lat={ 40.7473310 }
            lng={ -73.8517440 }
            text={ 'Where's Waldo?' }
          />
        </GoogleMapReact>
      </div>
    )
  }
}

Теперь вы можете просто импортировать этот файл в любой другой файл компонента / контейнера, который у вас есть, и он должен отображать карту Google в вашем проекте! Чтобы лучше понять Google Maps, я бы порекомендовал прочитать google-map-react GitHub репозиторий с документацией по Google Maps API, используя проект в качестве справочника.

Надеюсь, это помогло!