Я хочу удалить все существующие маркеры с моей карты, когда завершится определенный вызов ajax. Я опубликую код API и мой код ajax:
Я загружаю свою карту в начале скрипта так:
<script type="text/javascript">
//SETTINGS
$(document).ready(function() {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
Затем я делаю некоторые вещи через ajax, а затем в конце завершенного вызова ajax хочу выполнить очистку моих маркеров. Посмотрите на комментарий:
//AJAX AUTOCOMPLETE PLUGIN
var a = $('#searchMap2').autocomplete({
serviceUrl: '/public/index.php/prodajna_mesta/search',
minChars: 1,
delimiter: /(,|;)\s*/, // regex or character
//params: { country:'Yes' }, //aditional parameters
noCache: false, //default is false, set to true to disable caching
// callback function:
onSelect: function(suggestion) {
$.ajax({
url: "/public/index.php/prodajna_mesta/coords",
context: document.body,
data: { coords: suggestion.data }
}).done(function(data) {
//CLEAR MY MARKERS HERE
});
}
});
});
И вот как я инициализирую карту Google после всего этого:
function initialize() {
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = [
<?php foreach ($records as $value): ?>
<?php $records = (array)$records; ?>
['<?php echo $value->name ?>', <?php echo $value->coords ?>],
<?php endforeach; ?>
];
// Info Window Content
var infoWindowContent = [
<?php foreach ($records as $value): ?>
<?php $records = (array)$records; ?>
['<div style="height: 80px; white-space: nowrap;" class="info_content"><b><?php echo $value->name; ?></b><br/><br/><?php echo $value->address; ?><br/>T: <?php echo $value->phone; ?></div>'],
<?php endforeach; ?>
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(9);
google.maps.event.removeListener(boundsListener);
});
}
очистить массив mapMarkers.
var mapMarkers = []; //STEP 1 Global, so that it can be accessed from ajax success callback
function initialize() {
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = [
<?php foreach ($records as $value): ?>
<?php $records = (array)$records; ?>
['<?php echo $value->name ?>', <?php echo $value->coords ?>],
<?php endforeach; ?>
];
// Info Window Content
var infoWindowContent = [
<?php foreach ($records as $value): ?>
<?php $records = (array)$records; ?>
['<div style="height: 80px; white-space: nowrap;" class="info_content"><b><?php echo $value->name; ?></b><br/><br/><?php echo $value->address; ?><br/>T: <?php echo $value->phone; ?></div>'],
<?php endforeach; ?>
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
mapMarkers.push(marker); //STEP 2
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(9);
google.maps.event.removeListener(boundsListener);
});
}//AJAX AUTOCOMPLETE PLUGIN
var a = $('#searchMap2').autocomplete({
serviceUrl: '/public/index.php/prodajna_mesta/search',
minChars: 1,
delimiter: /(,|;)\s*/, // regex or character
//params: { country:'Yes' }, //aditional parameters
noCache: false, //default is false, set to true to disable caching
// callback function:
onSelect: function(suggestion) {
$.ajax({
url: "/public/index.php/prodajna_mesta/coords",
context: document.body,
data: { coords: suggestion.data }
}).done(function(data) {
//CLEAR MY MARKERS HERE
//STEP 3
var len = mapMarkers.length;
for(var i=0; i<len; i++){
mapMarkers[i].setMap(null);
}
mapMarkers = []; //Empty the array});
}
});
});
Других решений пока нет …