Ich baue eine Karte mit Google Map und ACF auf einer Wordpress-Website. Mein Ziel ist es, eine filterbare Karte nach Kategorien zu erstellen: Die Beiträge sind Städte, sie sind in Kategorien gruppiert und die Kategorien sind Länder. Ich habe eine Liste mit Optionsfeldern für jede Kategorie erstellt und wenn ich darauf klicke, wird immer nur eine Kategorie angezeigt.Wordpress ACF und Google Map Filter nach Kategorie ... und Zoom
Die Sache ist, dass, wenn ich auf einen Radioknopf klicke und wenn die Markierungen eines Landes angezeigt werden, würde ich gerne in das Land hineinzoomen. Die Karte bleibt auf derselben Zoomstufe. Ich weiß, dass es viele ähnliche Beispiele im Internet gibt, aber keine von ihnen lässt die Karte heranzoomen, wenn man auf ein Optionsfeld klickt. Gibt es jemanden, der mir sagen könnte, ob das möglich ist? Ich versuchte auch mit Cluster, in diesem Fall funktioniert der Zoom, aber die Herausforderung besteht darin, es mit einem Filter arbeiten (Radio-Button oder Kontrollkästchen oder wählen ..) Vielen Dank im Voraus für jeden, der mir helfen kann !! :)
hier ist der google.js Code
(function($) {
// New Map
// This function will render a Google Map onto the selected jQuery element
function new_map($el) {
// var
var $markers = $el.find('.marker');
// vars
var args = {
zoom : 4,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP,
};
// create map
var map = new google.maps.Map($el[0], args);
// add a markers reference
map.markers = [];
// add markers
// Filter Markers
$('.virtual-map-filter').on('change', 'input[type="radio"]', function() {
filter = $(this);
filterValue = filter.val();
if(filter.is(':checked')) {
map.markers.forEach(function(element) {
if(element.category == filterValue) {
element.setVisible(true);
}else{
element.setVisible(false);
}
});
}
else
{
map.markers.forEach(function(element) {
if(element.category != filterValue) {
element.setVisible(false);
}
});
}
});
$markers.each(function(){
add_marker($(this), map);
});
// center map
center_map(map);
// return
return map;
}
// Add Marker
function add_marker($marker, map) {
// var
var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
var category = $marker.data('category'); // Get category name from data
// create marker
var marker = new google.maps.Marker({
position : latlng,
draggable : true, // set marker to draggable to hide duplicates
crossOnDrag : false, // hide cross icon on drag event
map : map,
category : category, // store category as property of marker
});
// add to array
map.markers.push(marker);
//first hide all the markers
marker.setVisible(false);
// 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() {
if (typeof(window.infoopened) != 'undefined') infoopened.close();
infowindow.open(map,marker);
infoopened = infowindow;
});
}
}
// Center Map
function center_map(map) {
// vars
var bounds = new google.maps.LatLngBounds();
// loop through all markers and create bounds
$.each(map.markers, function(i, marker){
var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
bounds.extend(latlng);
map.fitBounds(bounds);
});
// only 1 marker?
if(map.markers.length == 1) {
// set center of map
map.setCenter(bounds.getCenter());
map.setZoom(16);
} else {
// fit to bounds
map.fitBounds(bounds);
}
}
// Document Ready
// global var
var map = null;
$(document).ready(function(){
$('.acf-map').each(function(){
// create map
map = new_map($(this));
});
});
})(jQuery);
und hier ist die html/php Teil
<div class="map-container">
<?php
$terms = get_field('category_select');
if($terms): ?>
<?php foreach($terms as $term):
$args = array(
'post_type' => 'post',
'category__in' => $term
);
$the_query = new WP_Query($args);
;?><div class="acf-map"><?php
while ($the_query->have_posts()) : $the_query->the_post();
$location = get_field('google_maps');?>
<?php
if(!empty($location)) {
?>
<div class="marker" data-category="<?php echo $term->slug ;?>" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<?php the_post_thumbnail('thumbnail'); ?>
<h4><a href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?></a></h4>
<p class="address"><?php echo $location['address']; ?></p>
</div>
<?php
}
endwhile;
wp_reset_postdata();
endforeach ;?>
<?php endif; ?>
</div>
</div>
Niemand zu helfen ?? – blogob
Haben Sie dieses Problem immer noch? Verwenden Sie einfach die 'panTo'-Funktion und ändern Sie den Zoom der Karte mit' setZoom'. Überprüfen Sie die Dokumentation: https://developers.google.com/maps/documentation/javascript/examples/event-simple – henrisycip