使用 Maps JavaScript API 将 Google Map 添加到 GatsbyJS

Question

我正在尝试使用Google Maps JavaScript API将地图添加到我的Gatsby项目中。

我正在通过默认html.js的副本自定义盖茨比：

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

然后，根据谷歌地图Hello World的例子，经过一些谷歌搜索，我发现我需要使用dangerouslySetInnerHTML并在该新html.js的关闭</body>标签之前添加以下内容：

<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>

(显然，用我的实际 API 密钥替换MY_KEY(

然后我在 React 组件中创建了一个空<div id="map"></div>。

这行得通...有点。如果我导航离开，并返回带有地图的页面，它将消失。 只有重新加载地图所在的页面，我才能看到地图。

有什么想法吗？

Answer 1

这是我用来将谷歌地图放入我的盖茨比构建中的实现：

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就不会破坏你的盖茨比构建！

Answer 2

我不确定这是否会对您有所帮助，但这是我所做的：

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>放在正文标签的底部。
3. 将映射初始化放在渲染#map的组件componentDidMount()。

步骤 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" />
}
}

Answer 3

以下是我如何在盖茨比(版本 1(上工作：

1. 在定义我的 React 组件(在本例中为我的页面(之前，我已经定义了一个名为initMap的函数，如下所示

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 期间，window 未定义，如果不将该代码包装到if语句中，则会引发错误。

2. 使用react-helmet我将谷歌地图脚本标签注入我的网站

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

就是这样。加载脚本(异步(时，它将调用initMap回调，并在div 中显示具有mapid 的映射。

[编辑]如果您只想显示地图，也许还想在其上显示一些静态标记和信息窗口，那就太好了。但是，如果您需要向其添加一些动态内容，也许您的标记取决于某些过滤器，我建议您 https://tomchentw.github.io/react-google-maps