Google maps, clear markers - php

Question

I want to clear all existing markers from my map when certain ajax call finishes. I will post the API code and my ajax code:
I load my map at the start of the script like so:
<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);
I then do some stuff via ajax and then at the end of the finished ajax call I want to execute clearing of my markers. Look for the comment:
//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
});
}
});
});
And this is how I initialize google map after all of this:
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);
});
}

Answer 1

var mapMarkers = []; Declare it global
push markers to mapMarkers array.
In ajax callback, loop all markers in mapMarkers array and set their map property to null.
clear the mapMarkers array.
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
});
}
});
});