Advanced Custom Fields Google Maps integration (ACF)

map.js

/**
 * Advanced Custom Fields Google Maps integration
 *
 * @link https://www.advancedcustomfields.com/resources/google-map/
 * @example
 * <?php $location = get_field( 'location' ); ?>
 * <div class="acf-map">
 *     <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
 * </div>
 */
class ACFGoogleMaps {
    /* global google */

    /**
     * This function will render a Google Map onto the selected jQuery element
     *
     * @param  {HTMLElement} element
     * @return {Object}
     */
    constructor(element) {
        // var
        var $markers = $(element).find('.marker');

        // vars
        var args = {
            zoom: 16,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // create map
        var map = new google.maps.Map(element, args);

        // add a markers reference
        map.markers = [];

        // add markers
        $markers.each((idx, elm) => this.addMarker($(elm), map));

        // center map
        this.centerMap(map);

        // return
        return map;
    }

    /**
     * This function will add a marker to the selected Google Map
     *
     * @param  {jQuery} $marker
     * @param  {Object} map     Google Maps Instance
     * @return {Void}
     */
    addMarker($marker, map) {
        // var
        var latlng = new google.maps.LatLng($marker.data('lat'), $marker.data('lng'));

        // create marker
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });

        // add to array
        map.markers.push(marker);

        // if marker contains HTML, add it to an infoWindow
        if ($marker.html()) {
            // create info window
            var infowindow = new google.maps.InfoWindow({
                content: $marker.html()
            });

            // show info window when marker is clicked
            google.maps.event.addListener(marker, 'click', () => {
                infowindow.open(map, marker);
            });
        }
    }

    /**
     * This function will center the map, showing all markers attached to this map
     *
     * @param  {Object} map Google Maps Instance
     * @return {Void}
     */
    centerMap(map) {
        // vars
        var bounds = new google.maps.LatLngBounds();

        // loop through all markers and create bounds
        $.each(map.markers, (i, marker) => {
            var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());

            bounds.extend(latlng);
        });

        // only 1 marker?
        if (map.markers.length === 1) {
            // set center of map
            map.setCenter(bounds.getCenter());
            map.setZoom(16);
        } else {
            // fit to bounds
            map.fitBounds(bounds);
        }
    }
}

/**
 * Init
 */
export default function() {
    if (window.themeData.googleMapsApiKey) {
        $.ajaxSetup({
            cache: true
        });

        $.getScript(`https://maps.googleapis.com/maps/api/js?key=${window.themeData.googleMapsApiKey}`).done(() => {
            $('.acf-map').each((idx, elm) => new ACFGoogleMaps(elm));
        });
    }
}