I'm having some trouble with google map markers. I have an array that contains 7 locations. When the page loads, a "for" loop runs through the array and places the first four locations as markers on the map. What I then want to happen is to be able to click the "Remove and add markers" button, which would run a function (called addMarker2) to remove the original 4 location markers and add the last 3 location markers to the map.
I've tested the function to only add the last 3 markers, and it works fine. But when I add the code to remove the first 4 markers before adding the last 3 markers, it doesn't work anymore. I've been searching all over for an answer, and almost everything I've found seems to indicate that I'm doing it correctly, although clearly I'm not.
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(40, -95),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// create the map
var map = new google.maps.Map(mapCanvas, mapOptions);
// array of locations
var pins = [
['Cleveland',41.499321,-81.694359],
['Florence',34.195435,-79.762566],
['Knoxville',35.960638,-83.920739],
['Memphis',35.149532,-90.048981],
['Nashville',36.162664,-86.781602],
['Phoenix',33.448376,-112.074036],
['Toronto',43.653225,-79.383186]
];
// Loop through the array of locations & place each one on the map
for( i = 0; i < 4; i++ ) {
var position = new google.maps.LatLng(pins[i][1], pins[i][2]);
var marker = new google.maps.Marker({
position: position,
map: map,
icon: 'http://i.imgur.com/FPiUErC.png',
title: pins[i]['0']
});
} // end of the for loop
function addmarker2() {
// remove the first four markers
for( i = 0; i < 4; i++ ) {
pins[i].setMap(null);
}
// add the last three markers
for( i = 4; i < 7; i++ ) {
var myPosition = new google.maps.LatLng(pins[i][1], pins[i][2]);
var marker = new google.maps.Marker({
position: myPosition,
map: map,
icon: 'http://i.imgur.com/FPiUErC.png',
title: pins[i][0]
});
} // end of for loop
} // end of addmarker2 function
$("#mysubmit").click(addmarker2);
Something has to be incorrect with the way I am using setMap(null). I have a jsfiddle of the code. It won't work at first, but if you comment out the "for" loop that is attempting to remove the first 4 markers, then it will successfully add the last 3. I just need it to do both.
In case anyone else is having the same problem and finds this question, as ray stated, I needed to create an array to push the markers into and then apply the setMap(null) to the markers array, as opposed to applying it to the original array (pins[]) that contained my location info.
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(40, -95),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// create the map
var map = new google.maps.Map(mapCanvas, mapOptions);
// array of locations
var pins = [
['Cleveland',41.499321,-81.694359],
['Florence',34.195435,-79.762566],
['Knoxville',35.960638,-83.920739],
['Memphis',35.149532,-90.048981],
['Nashville',36.162664,-86.781602],
['Phoenix',33.448376,-112.074036],
['Toronto',43.653225,-79.383186]
];
// this array will hold the markers
var markers = [];
// Loop through the array of locations & place each one on the map
for( i = 0; i < 4; i++ ) {
var position = new google.maps.LatLng(pins[i][1], pins[i][2]);
var marker = new google.maps.Marker({
position: position,
map: map,
icon: 'http://i.imgur.com/FPiUErC.png',
title: pins[i]['0']
});
//each marker is added to the markers array
markers.push(marker);
} // end of the for loop
function addmarker2() {
// remove the first four markers
for( i = 0; i < 4; i++ ) {
// the loop removes the first four results from the markers array
markers[i].setMap(null);
}
// add the last three markers
for( i = 4; i < 7; i++ ) {
var myPosition = new google.maps.LatLng(pins[i][1], pins[i][2]);
var marker = new google.maps.Marker({
position: myPosition,
map: map,
icon: 'http://i.imgur.com/FPiUErC.png',
title: pins[i][0]
});
} // end of for loop
} // end of addmarker2 function
$("#mysubmit").click(addmarker2);
I've already live debugging by typing on developer console, and i've found a way to remove all markers. (which saved using array.push()
method)
Here is the code -- just call neutralize()
:
function neutralize() {
for (var i = 0; i < markers.length; i++) {
try{
markers[i].f.setMap(null);
}
catch{
markers[i].setMap(null);
}
}
markers = [];
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.