(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); }); }); })();