Менять данные на карте после нажатия на кнопку Google maps
Я хочу, чтобы после нажатия на кнопку, данные на карте менялись. Новые данные получаю при помощи аякс запроса и они выводяться на экран , но мне надо чтобы и на карте тоже отображались. Все данные выводяться в блок "result marker " но мне надо чтобы и на карте отображались. И так всегда должно происходить после нажатия на кнопку. Я сделал так, что все записи показаны на карте сразу, но нужно чтобы показывались имменно те, которые вывелись при помощи аякс запроса и показались на карте и так каждый раз.
<form class="search-form" data-js-form="filter">
<div class="row dropdown-inputs">
<div class="select-country">
<div class="select-wrapper">
<div class="label">
<label class="search-label" for="room-country">country</label>
</div>
<select data-css-form="input" id="country" name="room-country" class="SlectBox">
<option value="country">country</option>
</select>
</div>
</div>
<div class="select-city">
<div class="select-wrapper">
<div class="label">
<label class="search-label" for="room-city">city</label>
</div>
<select data-css-form="input" name="room-city" id="city" class="selectCity" >
<option selected='city'>city</option>
</select>
</div>
</div>
<div class="row search-btn">
<div class="col-md-4 ">
<fieldset>
<button class="search-button">Search</button>
<input type="hidden" name="action" value="filter">
</fieldset>
</div>
</div>
</div>
</div>
Всеё выводиться в "results-block marker" ... при помощи этого кода у меня уже есть блок который просто называется ""marker" и там просто все записи после загрузки страницы показываються, а надо ещё чтобы менялись на те , которые вывелись... п.с. всё выводится при помощи аякса "results-block marker"
<div class="results">
<?php
while ($query->have_posts()) : $counter++;
$query->the_post();
$thumb = get_the_post_thumbnail_url();
$location_lat = get_field('lat');
$location_lng = get_field('lng');
?>
<div class="results-block marker" data-lat="<?php echo $location_lat; ?>" data-lng="<?php echo $location_lng; ?>">
<div class="infowindow">
<div class="infowindow-left">
<div class="infowindow-thumbnail">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
</div>
</div>
<div class="infowindow-right">
<div class="infowindow-title">
<?php the_title(); ?>
</div>
<?php
// Check rows exists.
if( have_rows('phone') ){ ?>
<div class="infowindow-phone">
<?php // Loop through rows.
while( have_rows('phone') ) : the_row();
// Load sub field value.
$phone_number = get_sub_field('phone_number'); ?>
<div class="window-phone">
<a href="tel:<?php echo $phone_number ?> "><?php echo $phone_number ?> </a>
</div>
<?php
// End loop.
endwhile; ?>
</div>
<?php } else {
// Do something...
} ?>
<?php
// Check rows exists.
if( have_rows('e-mail') ){ ?>
<div class="infowindow-mail">
<?php // Loop through rows.
while( have_rows('e-mail') ) : the_row();
// Load sub field value.
$email_information = get_sub_field('email_information'); ?>
<div class="window-email">
<a href="mailto:<?php echo $email_information ?> "><?php echo $email_information ?> </a>
</div>
<?php
// End loop.
endwhile; ?>
</div>
<?php } else {
// Do something...
} ?>
<div class="infowindow-adress">
<?php echo get_field('adrese') ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
Google maps
/******
* Google maps
*/
/**
* 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.
*/
var global_markers = [];
var global_infowindows = [];
/*
* new_map
*
* This function will render a Google Map onto the selected jQuery element
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param $el (jQuery element)
* @return n/a
*/
function new_map($el) {
let $markers = $el.find('.marker');
let mapArgs = {
zoom: $el.data('zoom') || 50,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
// zoomControl: true,
styles: [
{elementType: 'geometry', stylers: [{color: '#ebe3cd'}]},
{
"elementType": "geometry",
"stylers": [
{
"color": "#dedede"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#aeaeae"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#aeaeae"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"color": "#828282"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#828282"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#e2e2e2"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#e2e2e2"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e2e2e2"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#e2e2e2"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#e2e2e2"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#cdcdcd"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#cdcdcd"
}
]
}
],
};
let map = new google.maps.Map($el[0], mapArgs);
function CenterControl(controlDiv, map) {
controlDiv.style.padding = '10px';
// Set CSS for the control border.
let controlUiZoomIn = document.createElement('div');
controlUiZoomIn.style.cursor = 'pointer';
controlUiZoomIn.style.borderStyle = 'solid';
controlUiZoomIn.style.borderColor = 'rgba(255, 168, 0, 0.7)';
controlUiZoomIn.style.borderWidth = '1px';
controlUiZoomIn.style.borderRadius = '5px'
controlUiZoomIn.style.padding = '26px';
controlUiZoomIn.style.backgroundColor ='rgba(255, 168, 0, 0.7)';
controlUiZoomIn.style.textAlign = 'center';
controlDiv.appendChild(controlUiZoomIn);
// Set CSS for the control interior.
let zoomInButton = document.createElement('div');
zoomInButton.classList.add("zoomIn");
controlUiZoomIn.appendChild(zoomInButton);
// Setup the click event listener - zoomIn
google.maps.event.addDomListener(controlUiZoomIn, 'click', function () {
map.setZoom(map.getZoom() + 1);
});
}
function ZoomOutControl(controlZoom, map) {
controlZoom.style.padding = '10px';
// Set CSS for the control border.
let controlUiZoomOut = document.createElement('div');
controlUiZoomOut.style.cursor = 'pointer';
controlUiZoomOut.style.borderStyle = 'solid';
controlUiZoomOut.style.borderColor = 'rgba(255, 168, 0, 0.7)';
controlUiZoomOut.style.borderWidth = '1px';
controlUiZoomOut.style.borderRadius = '5px'
controlUiZoomOut.style.padding = '26px';
controlUiZoomOut.style.backgroundColor = 'rgba(255, 168, 0, 0.7)';
controlUiZoomOut.style.textAlign = 'center';
controlZoom.appendChild(controlUiZoomOut);
// Set CSS for the control interior.
let zoomOutButton = document.createElement('div');
zoomOutButton.classList.add("zoomOut");
controlUiZoomOut.appendChild(zoomOutButton);
// Setup the click event listener - zoomOut
google.maps.event.addDomListener(controlUiZoomOut, 'click', function () {
map.setZoom(map.getZoom() - 1);
});
}
let centerControlDiv = document.createElement('div');
let zoomOutControlDiv = document.createElement('div');
let centerControl = new CenterControl(centerControlDiv, map);
let zoomOutControl = new ZoomOutControl(zoomOutControlDiv, map);
centerControlDiv.index = 1;
zoomOutControlDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(zoomOutControlDiv);
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(centerControlDiv);
// add a markers reference
map.markers = [];
// add markers
$markers.each(function () {
add_marker($(this), map);
});
center_map(map);
// Toggles between infowindows
for (var i = 0; i < global_markers.length; i++) {
// Keep value of 'i' in event creation
(function (i) {
google.maps.event.addListener(global_markers[i], 'click', function () {
closeInfowindows();
global_infowindows[i].open(map, global_markers[i]);
});
}(i));
}
return map;
}
/*
* add_marker
*
* This function will add a marker to the selected Google Map
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param $marker (jQuery element)
* @param map (Google Map object)
* @return n/a
*/
function add_marker($marker, map) {
// var
var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
console.log(latlng);
// create marker
const image =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
console.log(image);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: 'http://localhost/wordpress-sparkle/wp-content/uploads/2020/07/Vector.png',
});
// add to array
map.markers.push(marker);
global_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()
});
global_infowindows.push(infowindow);
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
infowindow.setContent( $marker.html());
infowindow.open(map, marker);
console.log(marker);
for (var j = 0; j < global_markers.length; j++) {
global_markers[j].setIcon("http://localhost/wordpress-sparkle/wp-content/uploads/2020/07/Vector.png");
infowindow.open(map, marker);
}
marker.setIcon("http://localhost/wordpress-sparkle/wp-content/uploads/2020/07/Vector-7.png");
});
}
}
/*
* center_map
*
* This function will center the map, showing all markers attached to this map
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param map (Google Map object)
* @return n/a
*/
function center_map(map) {
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);
});
// Case: Single marker.
if (map.markers.length == 1) {
map.setCenter(bounds.getCenter());
// Case: Multiple markers.
} else {
map.setCenter(bounds.getCenter());
map.setZoom(6.5)
}
}
// Close infowindow function
function closeInfowindows() {
for (var x = 0; x < global_infowindows.length; x++) {
global_infowindows[x].close();
}
}
/*
* document ready
*
* This function will render each map when the document is ready (page has loaded)
*
* @type function
* @date 8/11/2013
* @since 5.0.0
*
* @param n/a
* @return n/a
*/
// global var
let map = null;
$(document).ready(function () {
$('.acf-map').each(function () {
map = new_map($(this));
});
$('button').on('click', function () {
var idx = $(this).attr('data-marker');
google.maps.event.trigger(global_markers[idx], 'click');
});
});
// Render maps on page load.
$(document).ready(function () {
$('.acf-map').each(function () {
let map = initMap($(this));
});
})