Google Map Reactを簡単に試す

完成形

Google Map React

でも紹介されているGoogle Map React。いくつか過去記事がある。

今回使うのは以下。

npm install --save google-map-react

サンプル

Main.js

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class SimpleMap extends Component {
  static defaultProps = {
    center: {
      lat: 35.66, // 緯度経度
      lng: 139.74
    },
    zoom: 15
  };

  render() {
    return (
      // Important! Always set the container height explicitly
      <div style={{ height: '100vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key:'{API キーをここに}' }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
          <AnyReactComponent
            lat={35.667345081692176}
            lng={139.7401442420512}
            text="アークヒルズはここ"
          />
        </GoogleMapReact>
      </div>
    );
  }
}

export default SimpleMap;

トラブルシューティング

依存関係の解決

npm install --save --legacy-peer-deps google-map-react

APIキー

このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。

「Google Maps JavaScript API」で「有効にする」ことで、このエラーを抑止して、利用できるようになります。

You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable
Learn more at https://developers.google.com/maps/gmp-get-started

Zoomとは

Zoom は 0 to 18。

ということで超簡単にできた！という以上メモ書きだが、なにがしか参考になればさいわいです。