WordPress + Google Map Workflow (using ACF field data)

app.js

import $ from 'jquery';
import maps from './modules/maps';

$(document).ready(() => maps.init());

GoogleMap.js

/* global google */
import $ from 'jquery';

class GoogleMap {
  constructor(el) {
    this.el = $(el);
    this.icon = {
      path: 'M25,0C15.957,0,8.625,7.277,8.625,16.253C8.625,31.638,25,50,25,50s16.375-17.37,16.375-33.747 C41.375,7.277,34.044,0,25,0z M25,23.084c-3.383,0-6.125-2.742-6.125-6.125s2.742-6.125,6.125-6.125s6.125,2.742,6.125,6.125 S28.383,23.084,25,23.084z',
      fillColor: '#ed1c2e',
      fillOpacity: 1,
      anchor: new google.maps.Point(25, 50),
      strokeWeight: 0,
      scale: 1,
    };
    this.animation = google.maps.Animation.DROP;
  }

  centerMap() {
    const bounds = new google.maps.LatLngBounds();
    $.each(this.map.markers, (i, marker) => {
      const latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
      bounds.extend(latlng);
    });
    if (this.map.markers.length === 1) {
      this.map.setCenter(bounds.getCenter());
    } else {
      this.map.fitBounds(bounds);
    }
  }

  getMarker(item) {
    const position = new google.maps.LatLng(item.attr('data-lat'), item.attr('data-lng'));
    return new google.maps.Marker({
      position,
      map: this.map,
      icon: this.icon,
      animation: this.animation,
    });
  }

  render() {
    const markers = this.el.find('.marker');
    this.map = new google.maps.Map(this.el[0], {
      zoom: 13,
      navigationControl: false,
      mapTypeControl: false,
    });
    this.map.markers = [];
    markers.each((index, item) => {
      const marker = this.getMarker($(item));
      this.map.markers.push(marker);
    });
    this.centerMap();
    this.map.setOptions({ scrollwheel: false });
    google.maps.event.addListener(
      this.map, 'click',
      () => this.map.setOptions({ scrollwheel: true }),
    );
  }
}

export default GoogleMap;

map.php

<?php $map = get_field( 'google_map' ); ?>

<div class="js-google-map">
	<div class="marker" data-lat="<?php echo $map['lat']; ?>"
	data-lng="<?php echo $map['lng']; ?>"></div>
</div>

maps.js

/* global google */
import $ from 'jquery';
import GoogleMap from './GoogleMap';

export default {
  instances: {
    map: {
      el: '.js-google-map',
    },
  },
  init() {
    this.maps = [];
    this.render();
  },
  resizeHandler() {
    $(window).resize(() => {
      this.maps.forEach((map) => {
        map.centerMap();
      });
    });
  },
  render() {
    if (typeof google === 'object' && typeof google.maps === 'object') {
      $.each(this.instances, (index, instance) => {
        const map = new GoogleMap(instance.el);
        map.render();
        this.maps.push(map);
      });

      this.resizeHandler();
    }
  },
};