Search code examples
jquerygoogle-mapsradio-buttonduplicatesjquery-gmap3

Switching between radio buttons causes duplicate coordinates

I'm running into a bit of a pickle. I have a working tool that utilizes jQuery's plugin gMap3 and allows the user to select between writing a JSON Array, Dropping Pins or Address. The tool spits out a JSON array into a <textarea> so it's easy to grab the information later. The only problem is that duplicate coordinates are created when "Address" is selected and the user decides to select another option like "Drag N' Drop" then go back to the "Address" and type a new address in. Any help would be appreciated!

JSFIDDLE

Scenario:

  1. Click on Address in the selection.
  2. Type in any address in the Input and click Add.
  3. Click on Drag n' Drop in the selection then select Address again.
  4. Type in a different address this time in the input, click Add and watch duplicate coordinates appear in the <textarea>

Code:

$(document).ready(function() {  

//////// GMAP3 JSON ARRAY //////// 

var mapOpts = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    scrollwheel: true,
    disableDoubleClickZoom: true,
    streetViewControl: false,
}; 

$(".gmap3").gmap3({
        map:{
        options: mapOpts
        }

    });

$.mapArray = function(){

$('#show_array').click(function(){

$('.gmap3').gmap3('clear', 'markers');

  var coordinates = $("#geofenceCoords_array").val();
  var jsonObj = jQuery.parseJSON(coordinates);
  var addBtn = $("#show_array"); 

  var iconValues =
  new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default.png', //icon url
  new google.maps.Size(28.0, 43.0),
  new google.maps.Point(0, 0),
  new google.maps.Point(14.0, 43.0));


  var shadowValues =
  new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default_shadow.png', //icon shadow url
  new google.maps.Size(50.0, 43.0),
  new google.maps.Point(0, 0),
  new google.maps.Point(14.0, 43.0)); 

    $(".gmap3").gmap3({
    getlatlng:{
        callback: function(results){
          var markers=[];
          $.each(jsonObj, function(i, item) {

          var marker = new Object();
              marker.lat = jsonObj[i].latitude;
              marker.lng = jsonObj[i].longitude;
              marker.options = new Object();
              marker.options.icon = iconValues;
              marker.options.shadow = shadowValues;
              markers.push(marker);
          });


          $(".gmap3").gmap3({
            marker:{
              values: markers,
              options: {draggable: false,
              animation: google.maps.Animation.DROP
              },

          },
          autofit:{maxZoom: 14},
        });
      }
    }
    });
});
    }

//////// GMAP3 DRAG AND DROP ////////

 $.mapDrop = function(){

  var iconValues =
  new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default.png', //icon url
  new google.maps.Size(28.0, 43.0),
  new google.maps.Point(0, 0),
  new google.maps.Point(14.0, 43.0));

  var shadowValues =
  new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default_shadow.png', //icon shadow url
  new google.maps.Size(50.0, 43.0),
  new google.maps.Point(0, 0),
  new google.maps.Point(14.0, 43.0)); 

 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,
                        icon: iconValues,
                        shadow: shadowValues
                    },
                    events: {
                        click: function() {
                            clearMarker(uid);
                        },
                        dragend: listMarkers
                    },
                    id: uid
                }
            });
            markerCount++;
            listMarkers();

        } else {
            return false;
        };
    }
    function listMarkers() {
        $(".gmap3").gmap3({
            get: {
                all: true,
                callback: function(results) {
                    var coords = '';
                    $("#geofenceCoords_dragndrop").empty();

                    $.each(results, function (i, marker) {
                        //$("#inputArray").append('{"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() + '},' + '<br>');
                        coords+= '  {"latitude":'  + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() +'},\n';
                    });
                    $("#geofenceCoords_dragndrop").val('['+'\n'+coords.substr(0, (coords.length-2))+'\n]'); 
                }
            }
        });
    }
    function clearMarker(uid) {
        $('.gmap3').gmap3({
            clear: {
                id: uid,
                callback: function() {
                    listMarkers();
                    markerCount--;
                }
            }
        });
    }

    var markerCount = 0;

    $(".gmap3").gmap3({
        map: {
            options: mapOpts,
            events: {
                click: addMarker
            }
        }
    });

 }

//////// GMAP3 ADDRESS ////////

$.mapAddress = function(){



var mapOpts = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        scrollwheel: true,
        disableDoubleClickZoom: true,
        streetViewControl: false,
    };

  var iconValues =
  new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default.png', //icon url
  new google.maps.Size(28.0, 43.0),
  new google.maps.Point(0, 0),
  new google.maps.Point(14.0, 43.0));

  var shadowValues =
  new google.maps.MarkerImage('http://www.mindboxdesigns.com/test-images/map_marker_default_shadow.png', //icon shadow url
  new google.maps.Size(50.0, 43.0),
  new google.maps.Point(0, 0),
  new google.maps.Point(14.0, 43.0)); 


    $(".gmap3").gmap3({
        map:{
        options: mapOpts
        }

    });

    setTimeout(function() {
    $('<span>').attr({ class: 'deleteIcon'}).appendTo(".gmap3");
    }, 200);

    $('#test-ok').click(function(){
      var addr = $('#test-address').val();
      if ( !addr || !addr.length ) return;
      $(".gmap3").gmap3({
        getlatlng:{
          address:  addr,

          callback: function(results){

            if ( !results ) return;

            if (markerCount < 10) {
            $(this).gmap3({
              marker:{

                latLng:results[0].geometry.location,
                options:{
                icon: iconValues,
                shadow: shadowValues
                },
                map:{

                  center: true,

                },

              },
              autofit:{maxZoom: 14},

            });
            listMarkers();
            markerCount++;
            $('#test-address').val("");

            }else {
                $('#test-address').val("limit Reached");
                $('#test-address').css('color','red');
                $('#test-address').attr('readonly','readonly');
            return false;
        };

          }
        }
      });
    });

    function listMarkers() {
        $(".gmap3").gmap3({
            get: {
                all: true,
                callback: function(results) {
                    var coords = '';
                    //$("#geofenceCoords_address").val("");

                    $.each(results, function (i, marker) {
                        //$("#inputArray").append('{"latitude":' + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() + '},' + '<br>');
                        coords+= '  {"latitude":'  + marker.position.lat() + ', ' + '"longitude":' + marker.position.lng() +'},\n';
                    });
                    $("#geofenceCoords_address").val('['+'\n'+coords.substr(0, (coords.length-2))+'\n]');   
                }
            }
        });
    }

    var markerCount = 0;

    $('.gmap3').on('click', '.deleteIcon', function(){                      
    //alert("Handler");
    if(markerCount <= 10){
        markerCount = 0;
    }
    $('.gmap3').gmap3('clear', 'markers');
    $("#geofenceCoords_address").val('');
    $('#test-address').val('');
    $('#test-address').css('color','black');
    $('#test-address').removeAttr('readonly');

    });

    $('#test-address').keypress(function(e){
      if (e.keyCode == 13){
        $('#test-ok').click();
      }
    });
}

//////// JSON ARRAY VALIDATION ////////


$('#geofenceCoords_array').on('focusout keyup', function (e) {
    var fieldValue = $(this).val(),
    json;

     try {
    json = JSON.parse(fieldValue);
    if (json.length > 3) {
        throw new Error("E_TOO_MANY_COORD");
    }

    _.each(json, function (coordinate) {
        if (!_.has(coordinate, 'latitude') || !_.has(coordinate, 'longitude')) {
            throw new Error("E_INVALID_COORD");
        }
    });

    } catch (e) {
    console.log(e.message);
    // handle your invalid json and return to stop further execution
    if (e.message === "E_TOO_MANY_COORD") {
        $('#errorMessage').text("You cannot exeed more than 3 coordiniates");
        $('#errorMessage').removeClass().addClass('error');
        $('#show_array').removeClass().addClass('disabled');
    } else if (e.message === "E_INVALID_COORD") {
        $('#errorMessage').html("Please provide valid coordinate pairs:<br> [{\"latitude\":33.851871,\"longitude\":-84.364336}]");
        $('#errorMessage').removeClass().addClass('warning');
        $('#geofenceCoords_array').css({
            'border': '1px solid black'
        });
        $('#show_array').removeClass().addClass('disabled');
    }

    return;
}

$('#arrayNum').text(json.length);
$('#errorMessage').removeClass().addClass("hide");
$('#show_array').removeClass().addClass('enabled');
$('#errorMessage').text("");
$('#geofenceCoords_array').css({
    'border': '1px solid black'
});

if ($('#arrayNum').text() == 0) {
    $('#show_array').removeClass().addClass('disabled');
}

});

$('#geofenceCoords_array').on('focusout mouseout', function (e) {

var fieldValue = $(this).val(),
    json;

if (e.which === 8) return;

try {
    json = JSON.parse(fieldValue);
} catch (e) {
    console.log(e.message);

    if (e instanceof SyntaxError) {
        $('#errorMessage').text("Please use valid json");
        $('#errorMessage').removeClass().addClass('error');
        $('#geofenceCoords_array').css({
            'border': '1px solid red'
        });
        $('#show_array').removeClass().addClass('disabled');
    }

    if (fieldValue === "") {
        $("#arrayNum").text("0");
        $('#geofenceCoords_array').css({
            'border': '1px solid black'
        });
        $('#show_array').removeClass().addClass('disabled');
        $('#errorMessage').removeClass().addClass('hide');
    }
    return;
    }

    });

$('html,body').on('mousemove', function (e) {

var fieldValue = $("#geofenceCoords_array").val(),
    json;

if (e.which === 8) return;

try {
    json = JSON.parse(fieldValue);
} catch (e) {
    console.log(e.message);

    if (e instanceof SyntaxError) {
        $('#errorMessage').text("Please use valid json");
        $('#errorMessage').removeClass().addClass('error');
        $('#geofenceCoords_array').css({
            'border': '1px solid red'
        });
        $('#show_array').removeClass().addClass('disabled');
    }

    if (fieldValue === "") {
        $("#arrayNum").text("0");
        $('#geofenceCoords_array').css({
            'border': '1px solid black'
        });
        $('#show_array').removeClass().addClass('disabled');
        $('#errorMessage').removeClass().addClass('hide');
    }
    return;
    }
    });


//////// MAP TRANSITIONS ////////

$('#default_selection').prop("checked",true);
$('#default_selection').attr("checked",true);


$('#show_array').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {
     if($("#show_array").hasClass('enabled')){
     $.mapArray();
     }
 });


 $("[name=mapSelect]").change(function() {
    $('.gmap3').gmap3('destroy');


    if($(this).val() == 'JSONArray'){
    $('.gmap3').attr("id","newId1");
    $(".gmap3").gmap3({
        map:{options: mapOpts}
    });
    $("#geofenceCoords_dragndrop").val("");
    $("#geofenceCoords_address").val("");
    $.mapArray();
    }

    if($(this).val() == 'dragnDrop'){
    $('.gmap3').attr("id","newId2");
    $(".gmap3").gmap3({
        map:{options: mapOpts}
    });
    $("#geofenceCoords_array").val("");
    $("#geofenceCoords_address").val("");
    $.mapDrop();
    }

    if($(this).val() == 'addrSelect'){
    $('.gmap3').attr("id","newId3");
    $(".gmap3").gmap3({
        map:{options: mapOpts}
    });
    $("#geofenceCoords_array").val("");
    $("#geofenceCoords_address").val("");
    $("#geofenceCoords_dragndrop").val("");
    $.mapAddress();
    }


});

});
Solution

  • Nevermind, got it working.

    I used: $('#test-ok').bind('click',function(){ }

    Instead of: $('#test-ok').click(function(){ }

    Then I just used $('#test-ok').unbind('click'); when I clicked on Drag n Drop or JSON in the radio selection.