Last active
February 14, 2022 13:35
-
-
Save vollyimnetz/810d04273de374c7560f9c8355b458b8 to your computer and use it in GitHub Desktop.
Working example of a custom maps integration with complianz (version 6).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Add immobilienMapCanvas to the list of complianz-placeholders. | |
* @param $tags | |
* @return array | |
*/ | |
add_filter('cmplz_placeholder_markers', function($tags){ | |
$tags['google-maps'][] = "immobilienMapCanvas"; | |
return $tags; | |
}); | |
function cl_getGoogleMaps($data) { | |
ob_start(); | |
if(!empty($data['immobilie_maps'])) { | |
$lat = $data['immobilie_maps']['lat']; | |
$lng = $data['immobilie_maps']['lng']; | |
?> | |
<div class="locationMap"> | |
<style> | |
#mapCanvas { width: 100%; height: 400px; } | |
#mapCanvas img { max-width: none; } | |
</style> | |
<?php | |
// Set map default options | |
$map_args = array( | |
'map_type' => 'ROADMAP', | |
'mapTypeControl' => true, | |
'navigationControl' => true, | |
'scrollwheel' => false, | |
'streetViewControl' => true, | |
'zoom' => '14' | |
); | |
if(!empty($data['immobilie_maps']['zoom'])) $map_args['zoom'] = intval($data['immobilie_maps']['zoom']); | |
if(isset($data['streetview_value'])) $map_args['streetViewControl'] = !!$data['streetview_value']; | |
?> | |
<script data-category="functional"> | |
var callbackName = 'cl_maps_initClMap'; | |
var mapsKey = '<?php echo GOOGLE_MAPS_KEY; ?>'; | |
jQuery(document).on('cmplz_enable_category', function(consentData) { | |
if (consentData.detail.category==='marketing' && !document.getElementById(callbackName)){ | |
loadMaps(callbackName, callbackName, mapsKey); | |
} | |
}); | |
function loadMaps(scriptId, callbackName, mapsKey) { | |
var script = document.createElement('script'); | |
script.type = 'text/javascript'; | |
script.src = 'https://maps.googleapis.com/maps/api/js?key='+mapsKey+'&callback='+callbackName; | |
script.async = true; | |
script.defer = true; | |
script.id = scriptId; | |
document.getElementsByTagName('head')[0].appendChild(script); | |
} | |
function cl_maps_initClMap() { | |
var myLatlng = new google.maps.LatLng(<?php echo $lat; ?>,<?php echo $lng; ?>); | |
var mapOptions = <?php echo json_encode($map_args); ?>; | |
mapOptions.center = myLatlng; | |
mapOptions.mapTypeId = google.maps.MapTypeId.ROADMAP; | |
var map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions); | |
var marker = new google.maps.Marker({ | |
position: myLatlng, | |
map: map, | |
title: '<?php echo esc_attr( $data['title'] ); ?>' | |
}); | |
} | |
</script> | |
<div itemprop="availableAtOrFrom" itemscope itemtype="http://schema.org/Place"> | |
<div class="listingLocation" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates"> | |
<div class="immobilienMapCanvas"> | |
<div id="mapCanvas"></div> | |
</div> | |
<?php if(!empty($data['immobilie_maps']['place_id'])) : ?> | |
<p class="pt-3 elementor-element elementor-align-justify elementor-button-info"><a class="elementor-button-link elementor-button elementor-size-sm" rel="noopener noreferrer nofollow" target="_blank" href="https://www.google.com/maps/place/?q=place_id:<?php esc_attr_e($data['immobilie_maps']['place_id']) ?>">auf Google Maps anzeigen</a></p> | |
<?php endif; ?> | |
<meta itemprop="latitude" content="<?php echo $lat; ?>" /> | |
<meta itemprop="longitude" content="<?php echo $lng; ?>" /> | |
</div> | |
</div> | |
</div> | |
<?php | |
} | |
return ob_get_clean(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment