【JavaScript・ES6】Google Mapの埋め込みスニペット

Google Mapの埋め込みで同じコードを何度も書くのが面倒なので、スニペットとしてここに置いておきます。
使いたい方はご自由にどうぞ。

まずはじめにid="map" と data-lat, data-lng に緯度経度を指定したHTMLを用意しましょう。

<div id="map" data-lat="43.279011" data-lng="142.465059"></div>

次にGoogleMap.jsとして次のコードを書いたファイルを用意します。

const API_KEY = ‘YOUR_API_KEY';

export default class GoogleMap {

  constructor(el = '#map') {
    this.map = null;
    this.el = el;

    this.initialize();
  }

  initialize() {
    // Load Google Map API
    const tag = document.createElement('script');
    tag.src = 'https://maps.googleapis.com/maps/api/js?key=' + API_KEY;
    tag.async = 1; tag.defer = 1;
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    window.addEventListener('load', this.render.bind(this));
  }

  render() {
    this.target = document.querySelector(this.el);
    this.map = new google.maps.Map(this.target, {
      center: {
        lat: this.target.getAttribute('data-lat') * 1,
        lng: this.target.getAttribute('data-lng') * 1
      },
      zoom: 9,
      mapTypeControl: false
    });
  }

}

Google MapのAPIキーを取得したら const API_KEY = ‘YOUR_API_KEY'; にセットするのを忘れずに。

最後に利用したいところで次のように初期化して完成です。

import GoogleMap from ‘./GoogleMap.js'

new GoogleMap()

new GoogleMap()にはレンダリングするDOMをセレクタで指定できます。
デフォルトは #map です。