Google Mapのピン生成に便利なクラス

pin-maker.js

const GoogleMapsLoader = require('google-maps');

export default class GooglePinMaker {
  constructor({id, key, zoom, lat, lng, draggable, dragend, added, removed, markers, input, mode = 'view'}) {
    this.markers = [];
    this.tmp = markers;
    const element = document.querySelector(`#${id}`);
    if (element && element.getAttribute('data-lat')) {
      lat = element.getAttribute('data-lat');
      lng = element.getAttribute('data-lng');
    }
    GoogleMapsLoader.KEY = key;
    GoogleMapsLoader.load((google) => {
      this.google = google;
      this.id = id;
      this.dragend = dragend;
      this.added = added;
      this.input = input;
      this.removed = removed;
      this.mode = mode;
      this.init({zoom, lat, lng, draggable});
    });
  }

  searchAddress({address}) {
    const google = this.google;
    return new Promise((resolve,reject) => {
      const geocoder = new google.maps.Geocoder();
      geocoder.geocode({address}, (results, status) => {
        if ( status == google.maps.GeocoderStatus.OK ) {
          resolve(results[0].geometry.location);
        } else {
          reject(status);
        }
      });
    });
  }

  init({ zoom, lat, lng, draggable}) {
    const google = this.google;
    const id = this.id;
    const center = new google.maps.LatLng(lat, lng);
    const myOptions = {
      zoom,
      center,
      draggable,
      navigationControl: true,
      mapTypeControl: true,
      scaleControl: true,
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    const map = new google.maps.Map(document.getElementById(id), myOptions);
    this.map = map;
    if(this.tmp) {
      this.tmp.forEach(marker => {
        this.addPin(Object.assign({}, marker));
      });
      // this.tmp = null;
    }
  }

  addPin({ image, lat, lng, width = 32, height = 32, name, style, text }) {
    const size = new google.maps.Size(width, height);
    const position = new google.maps.LatLng(lat, lng);
    const mode = this.mode;
    const draggable = mode === 'edit' ? true : false;
    const map = this.map;
    const markers = this.markers;
    const marker = new google.maps.Marker({ position, map, draggable });
    const id = this.getUniqId();
    let content = `<input type="text" id="${id}-text" value="${text}" /><button type="button" id="${id}" class="acms-admin-btn acms-admin-btn-alert">削除</button></input>`;
    if (mode === 'view') {
      content = `${text}`;
    }
    const info = new google.maps.InfoWindow({ content, size });
    marker.id = id;
    marker.text = text || '';
    markers.push(marker);
    google.maps.event.addListener(marker, 'click', () => {
      info.open(map, marker);
    });
    if (this.added) {
      this.added(this.markers);
    }
    google.maps.event.addListener(marker, 'dragend', (event) => {
      if (this.dragend) {
        const latLng = event.latLng;
        const lat = latLng.lat();
        const lng = latLng.lng();
        this.dragend(this.markers);
      }
    });
    google.maps.event.addListener(info, 'domready', () => {
      const remove = document.getElementById(`${id}`);
      const input = document.getElementById(`${id}-text`);
      google.maps.event.addDomListener(remove, 'click', () => {
        marker.setMap(null);
        this.markers = this.markers.filter((item) => item.id !== id);
        if (this.removed) {
          this.removed(this.markers);
        }
      });
      google.maps.event.addDomListener(input, 'input', () => {
        if (this.input) {
          marker.text = input.value;
          if (this.input) {
            this.input(this.markers);
          }
        }
      });
    });
  }

  getUniqId() {
    return (Date.now().toString(36) + Math.random().toString(36).substr(2, 5)).toUpperCase();
  }
}