Добавьте Google Map в GatsbyJS с помощью JavaScript API Карт

Question

Я пытаюсь добавить карту в свой проект Gatsby, используя JavaScript API Карт Google.

Я настраиваю Gatsby html.js с помощью копии по умолчанию:

cp .cache/default-html.js src/html.js

Затем, согласно Google Maps Hello WorldНапример , и после некоторого поиска в Google, я понял, что мне нужно использовать dangerouslySetInnerHTML и добавить следующее перед моим закрывающим тегом </body> в этом новом html.js:

<script dangerouslySetInnerHTML={{
    __html: `
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    `
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap"
async defer></script>

(очевидно, заменив MY_KEY моим действительным ключом API)

Затем я создал пустой <div id="map"></div> в своем компоненте React.

Это работает ... Сорта.Если я уйду и вернусь на страницу с картой, она исчезнет.Я могу видеть карту, только если перезагрузить страницу, на которой она находится.

Есть идеи?

Answer 1

Вот как я работал с Gatsby (версия 1):

1. Я определил функцию с именем initMap до определения моего компонента React (в данном случае моей страницы), например

if (typeof window !== 'undefined') {
  window.initMap = function() {
    new window.google.maps.Map(document.getElementById('map'), {
      center: { lat: 40, lng: 10 },
      zoom: 5,
    })
  }
}

ПРИМЕЧАНИЕ: if (typeof window !== 'undefined') существует, чтобы избежать нарушения рендеринга на стороне сервера.Во время ssr окно не определено и выдает ошибку, если вы не включите этот код в оператор if.

Используя react-helmet Я вставил тег скрипта Google Maps в свой веб-сайт

<Helmet>
  <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap" async defer />
</Helmet>

Вот и все.Когда скрипт загружается (асинхронно), он вызывает обратный вызов initMap и отображает карту внутри div с идентификатором map.

[EDIT] Это здорово, если выпросто хотите отобразить карту и, возможно, какой-нибудь статический маркер и информационное окно на ней.Но если вам нужно добавить к нему динамический контент, возможно, ваши маркеры зависят от некоторых фильтров, я бы порекомендовал https://tomchentw.github.io/react-google-maps

Answer 2

Это реализация, которую я использовал для добавления Карт Google в свою сборку Gatsby:

import React from 'react';
import GoogleMapReact from 'google-map-react';

const isClient = typeof window !== 'undefined';

export const GoogleMap = (props) => {
  const {
    address,
    googleMapsApiKey
  } = props;
  const lat = parseFloat(address.lat);
  const lng = parseFloat(address.lng);
  return (
    <section className="google-map">
      <div className="map">
        { isClient && (
          <GoogleMapReact
            bootstrapURLKeys={{ key: googleMapsApiKey }}
            defaultCenter={[lat, lng]}
            defaultZoom={14}
          >
            <div
              className="marker"
              lat={lat}
              lng={lng}
            />
          </GoogleMapReact>
        )}
      </div>
    </section>
  );
}

Обратите внимание, условный рендеринг isClient важен, чтобы google-map-react не нарушал вашу сборку Gatsby!

Answer 3

Я не уверен, поможет ли это вам или нет, но вот что я сделал:

1. cp .cache/default-html.js src/html.js
2. Отредактируйте src/html.js и установите <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap" async defer></script> внижняя часть тега body.
3. Поместите инициализацию карты в componentDidMount() компонента, который отображает #map.

Шаг 3 может выглядеть следующим образом:

import React, { Component } from 'react'

export default class Map extends Component {
  initMap = () => {
    new window.google.maps.Map(document.getElementById('map'), {
      center: { lat: 40, lng: 10 },
      zoom: 5,
    })
  }

  componentDidMount() {
    this.initMap()
  }

  render() {
    return <div id="map" />
  }
}