代码之家 › 专栏 › 技术社区 › skube

使用Maps JavaScript API将Google地图添加到GatsbyJS

gatsby google-maps reactjs

skube · 技术社区 · 7 年前

我是 customizing 盖茨比 html.js 通过默认设置的副本:

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

Google Maps Hello World example , 通过谷歌搜索,我发现我需要使用 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> 在我的组件中。

有什么想法吗?

3 回复 | 直到 7 年前

Andrea Gherardi 6 年前

下面是我如何在《盖茨比》(第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

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

就这样。加载脚本时(异步),它将调用 初始映射 回调并使用 map 身份证件

[编辑] https://tomchentw.github.io/react-google-maps

Janosh 6 年前

我不确定这是否会对你有帮助,但以下是我所做的:

cp .cache/default-html.js src/html.js
编辑 src/html.js 放 <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap" async defer></script> 在body标签的底部。
将映射初始化放入 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" />
  }
}

Allan of Sydney 6 年前

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 不会破坏你的盖茨比身材!