Cacher is the code snippet organizer for pro developers

// Instructions: Import Map class and run map.init();
// E.g.
// import Map from '../path/to/Map.js';
// let map = new Map();
// map.init();

export default class Map {
  constructor() {
    this.map = {};
    // Change this to your locations API endpoint
    this.api = '/wp-json/wp/v2/locations'; 
  }

  init() {
    // Change 'map' to your element ID
    this.map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 38.39024, lng: -95.712891},
      zoom: 5,
      disableDefaultUI: true,
    });

    google.maps.event.addListenerOnce(this.map, 'idle', () => {
      this.showPins();
    });
  }

  getPins() {
    let $_ = $.Deferred();

    $.ajax({
      url: this.api
    })
    .done((response) => {
      $_.resolve(response);
    })
    .fail((error) => {
      $_.reject(error);
    })
    .always(() => {
      $_.notify('Making API request...');
    });

    return $_.promise();
  }

  showPins() {
    this.getPins().done((pins) => {
      pins.forEach((pin, index) => {
        // Change 'address' to your ACF field name on both lines
        if (pin.acf.hasOwnProperty('address')) {
          let address = pin.acf.address;
          let position = new google.maps.LatLng(parseFloat(address.lat), parseFloat(address.lng));
          let marker = new google.maps.Marker({
            position: position,
            map: this.map,
            icon: { // Change to your map pin icon
              url: '/wp-content/themes/solid/public/img/pin.png',
              scaledSize: new google.maps.Size(23, 33)
            },
          });

          google.maps.event.addListener(marker, 'click', () => {
            alert(`Click handler for pin ${index}`);
          });
        }
      });
    });
  }
}