moving google map folder

This commit is contained in:
Antoine M 2023-12-12 12:02:21 +01:00
parent 6eb5a01ae6
commit 6830f40bf7
4 changed files with 188 additions and 0 deletions

View File

@ -0,0 +1,22 @@
{
"name": "acf/google-map",
"title": "Carte Google",
"category": "homegrade-blocks",
"multiple": false,
"icon": {
"foreground": "#DF1E1E",
"src": "location-alt"
},
"supports": {
"anchor": true
},
"keywords": [
"Carte",
"google",
"map"
],
"acf": {
"mode": "auto",
"renderTemplate": "google-map.php"
}
}

View File

@ -0,0 +1,17 @@
.section_latest_news {
@apply py-24;
.section_titling {
@apply max-w-md mx-auto;
}
.articles_container {
@apply grid
grid-cols-1
sm:grid-cols-2
xl:grid-cols-4
max-w-screen-2xl
px-8
py-16
gap-8
mx-auto;
}
}

View File

@ -0,0 +1,133 @@
<?php
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
$mapDatas = get_field('map_datas');
?>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZmUF1CrKW2Yl0xKWsm0dMmZfUPOhwd5w&callback=Function.prototype"></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;
}
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>
<section id="<?php echo $block['anchor'] ?>" <?php echo get_block_wrapper_attributes(['class' => 'homegrade-blocks-google-map']); ?>>
<?php if ($mapDatas) : ?>
<div class="map_frame acf-map" data-zoom="16">
<div class="marker" data-lat="<?php echo esc_attr($mapDatas['lat']); ?>" data-lng="<?php echo esc_attr($mapDatas['lng']); ?>"></div>
</div>
<?php endif; ?>
</section>

View File

@ -0,0 +1,16 @@
<?php
/* -------------------------------------
REGISTER MAP API KEY
-------------------------------------*/
function my_acf_google_map_api($api)
{
$api['key'] = 'AIzaSyDZmUF1CrKW2Yl0xKWsm0dMmZfUPOhwd5w';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');