googlemap/src/index.js

A simple module for displaying Google Maps

class GoogleMap {

    /**
     * Instantiate a new google map object.
     *
     * @param  {Node} canvas
     * @param  {Object} options
     * @return {void}
     */
    constructor(canvas, options = {}) {
      this.canvas = canvas;
      this.options = options;

      this.drawMap();
    }

    /**
    * Draw a new map.
    *
    * @return {void}
    */
    drawMap() {
      this.map = new google.maps.Map(this.canvas, this.options);
      this.bounds = new google.maps.LatLngBounds();
      this.markerCoords = JSON.parse(this.canvas.dataset.markers || '[]');

      this.drawMarkers();
    }

    /**
     * Draw the markers on the map.
     *
     * @return {void}
     */
    drawMarkers() {
      this.markerCoords.map((data) => {
        let position = new google.maps.LatLng(data.latitude, data.longitude);

        let marker = new google.maps.Marker({
          position: position,
          map: this.map,
          title: data.title || '',
        });

        this.attachClickEvent(marker, data);

        this.bounds.extend(marker.position);
      });

      this.map.fitBounds(this.bounds);
      this.map.setZoom(this.options.zoom || 10);
    }

    /**
     * Attach a click event on to a marker.
     *
     * @param  {google.maps.Marker} marker
     * @param  {Object} data
     * @return {void}
     */
    attachClickEvent(marker, data) {
      marker.addListener('click', () => {
        return this.options.markerClickCallback(marker, data);
      });
    }
}

export default GoogleMap;