ACF Maps JS

acf-maps.js

(function() {

    /**
     * initMap
     *
     * Renders a Google Map onto the selected element
     *
     * @date    22/10/19
     * @since   5.8.6
     *
     * @param   HTMLElement el The HTML element.
     * @return  object The map instance.
     */
    function initMap(el) {

        // Find marker elements within map.
        var markers = el.querySelectorAll('.marker');

        // Create generic map.
        var mapArgs = {
            zoom        : el.dataset.zoom || 16,
            mapTypeId   : google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(el, mapArgs);

        // Add markers.
        map.markers = [];
        markers.forEach(function(markerEl) {
            initMarker(markerEl, map);
        });

        // Center map based on markers.
        centerMap(map);

        // Return map instance.
        return map;
    }

    /**
     * initMarker
     *
     * Creates a marker for the given element and map.
     *
     * @date    22/10/19
     * @since   5.8.6
     *
     * @param   HTMLElement markerEl The marker element.
     * @param   object The map instance.
     * @return  object The marker instance.
     */
    function initMarker(markerEl, map) {

        // Get position from marker.
        var lat = markerEl.dataset.lat;
        var lng = markerEl.dataset.lng;
        var latLng = {
            lat: parseFloat(lat),
            lng: parseFloat(lng)
        };

        // Create marker instance.
        var marker = new google.maps.Marker({
            position : latLng,
            map: map
        });

        // Append to reference for later use.
        map.markers.push(marker);

        // If marker contains HTML, add it to an infoWindow.
        if (markerEl.innerHTML) {

            // Create info window.
            var infowindow = new google.maps.InfoWindow({
                content: markerEl.innerHTML
            });

            // Show info window when marker is clicked.
            marker.addListener('click', function() {
                infowindow.open(map, marker);
            });
        }
    }

    /**
     * centerMap
     *
     * Centers the map showing all markers in view.
     *
     * @date    22/10/19
     * @since   5.8.6
     *
     * @param   object The map instance.
     * @return  void
     */
    function centerMap(map) {

        // Create map boundaries from all map markers.
        var bounds = new google.maps.LatLngBounds();
        map.markers.forEach(function(marker) {
            bounds.extend({
                lat: marker.getPosition().lat(),
                lng: marker.getPosition().lng()
            });
        });

        // Case: Single marker.
        if (map.markers.length == 1) {
            map.setCenter(bounds.getCenter());

        // Case: Multiple markers.
        } else {
            map.fitBounds(bounds);
        }
    }

    // Render maps on page load.
    document.addEventListener('DOMContentLoaded', function() {
        var mapElements = document.querySelectorAll('.acf-map');
        mapElements.forEach(function(el) {
            var map = initMap(el);
        });
    });

})();