completely destroy marker on gmap3 - google-maps

Question

I am trying to let a user drop up to 10 markers and remove them onClick. I also have it updating a "div" with the coordinates of the markers on the map when a user adds a marker or drags. I have everything working except for when the user deletes a marker, it's still seems to be on the map when I loop through the markers. Any idea what I'm doing wrong?
jsFiddle: jsfiddle.net/ryanverdel/WRyrJ/
Code:
$(document).ready(function () {
var markerCount = 0;
$("#test1").gmap3({
map: {
options: {
center: [-2.2214281090541204, -78.695068359375],
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
streetViewControl: false,
},
events: {
click: function (map, event) {
if(markerCount < 10){
$(this).gmap3(
{
marker: {
latLng: event.latLng,
options:{
draggable: true,
animation: google.maps.Animation.DROP,
},
events: {
click: function(marker) {
marker.setMap(map);
marker.setMap(null);
marker = null;
delete marker;
console.log(marker);
markerCount--;
},
dragend: function(marker) {
$("#inputArray").empty();
setTimeout(function(){
var markers = $("#test1").gmap3({
get: {
all: true
}
});
$.each(markers, function(i, marker){
$("#inputArray").append('<p>{"latitude":' + marker.position.lat() +', '+ '"longitude":' + marker.position.lng() +'},'+'</p>');
});
}, 400);
}
},
},
});
markerCount++;
$("#inputArray").empty();
setTimeout(function(){
var markers = $("#test1").gmap3({
get: {
all: true
}
});
$.each(markers, function(i, marker){
$("#inputArray").append('<p>{"latitude":' + marker.position.lat() +', '+ '"longitude":' + marker.position.lng() +'},'+'</p>');
});
}, 400);
}
else{
return false;
};
}
}
}
});
});

Answer 1

This sort of thing is maybe less than straightforward in gmap3. You need a slightly different mindset compared with that required for the direct google.maps API.
Thee main poitns :
You need to provide the markers with an id, name or tag
You need to remove the marker with clear
You need to make judicious use of callbacks (the gmap3 way).
Here's your code unravelled into a set of functions, with the necessary fixes applied
$(document).ready(function () {
var mapOpts = {
center: [-2.2214281090541204, -78.695068359375],
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
streetViewControl: false,
};
function genId() {
return '' + (new Date()).getTime();
}
function addMarker(map, event) {
if (markerCount < 10) {
var uid = genId();
$(this).gmap3({
marker: {
latLng: event.latLng,
options: {
draggable: true,
animation: google.maps.Animation.DROP
},
events: {
click: function() {
clearMarker(uid);
},
dragend: listMarkers
},
id: uid
}
});
markerCount++;
listMarkers();
} else {
return false;
};
}
function listMarkers() {
$("#test1").gmap3({
get: {
all: true,
callback: function(results) {
$("#inputArray").empty();
$.each(results, function (i, marker) {
$("#inputArray").append('<p>{"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() + '},' + '</p>');
});
}
}
});
}
function clearMarker(uid) {
$('#test1').gmap3({
clear: {
id: uid,
callback: function() {
listMarkers();
markerCount--;
}
}
});
}
var markerCount = 0;
$("#test1").gmap3({
map: {
options: mapOpts,
events: {
click: addMarker
}
}
});
});
DEMO