In this long tutorial I will be showing you How to add a ACF google map field to Divi Multiple maps too
This need some custom steps to be done 1. 1. Make sure google maps API is set and enqueued on Divi theme options
2. On The templates for the CPTs called iatroi,iatrika-kentra and epaggelma-ygeias add a row with 3 code modules code module 1 is for the need css/jquery code code module 2 will create the map for the 1st address called map in acf code module 2 will create the map for the 2st address called map3 in acf. Make sure to add your own maps api key where it says XXX
Jquery and css code for first code module
<style type="text/css">
.acf-map {
width: 100%;
height: 400px;
border: #ccc solid 1px;
margin: 20px 0;
}
// Fixes potential theme css conflict.
.acf-map img {
max-width: inherit !important;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVc887KdBcTyAXWFXdiLcMaE3oBTuQYv8"></script>
<script type="text/javascript">
(function( $ ) {
/**
* initMap
*
* Renders a Google Map onto the selected jQuery element
*
* @date 22/10/19
* @since 5.8.6
*
* @param jQuery $el The jQuery element.
* @return object The map instance.
*/
function initMap( $el ) {
// Find marker elements within map.
var $markers = $el.find('.marker');
// Create gerenic map.
var mapArgs = {
zoom : $el.data('zoom') || 16,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map( $el[0], mapArgs );
// Add markers.
map.markers = [];
$markers.each(function(){
initMarker( $(this), map );
});
// Center map based on markers.
centerMap( map );
// Return map instance.
return map;
}
/**
* initMarker
*
* Creates a marker for the given jQuery element and map.
*
* @date 22/10/19
* @since 5.8.6
*
* @param jQuery $el The jQuery element.
* @param object The map instance.
* @return object The marker instance.
*/
function initMarker( $marker, map ) {
// Get position from marker.
var lat = $marker.data('lat');
var lng = $marker.data('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( $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', 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.position.lat(),
lng: marker.position.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).ready(function(){
$('.acf-map').each(function(){
var map = initMap( $(this) );
});
});
})(jQuery);
</script>php code for first map field set in PHP inserter to generate shortcode for map1 acf field.
<?php
$location = get_field('map');
//echo "<pre>";
//echo esc_attr($location['lat']);
//echo "</pre>";
if( esc_attr($location['lat']!="0") ): ?>
<div class="acf-map" data-zoom="16">
<div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>"></div>
</div>
<?php endif; ?>php code for second map field set in PHP inserter to generate shortcode for map3 acf field.
<?php
$location2 = get_field('map3');
//echo "<pre>";
//echo esc_attr($location2['lat']);
//echo "</pre>";
if( esc_attr($location2['lat']!="0") ): ?>
<div class="acf-map" data-zoom="16">
<div class="marker" data-lat="<?php echo esc_attr($location2['lat']); ?>" data-lng="<?php echo esc_attr($location2['lng']); ?>"></div>
</div>
<?php endif; ?>
0 Comments