completely destroy marker on gmap3

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