jquery - Switching between radio buttons causes duplicate coordinates -
i'm running bit of pickle. have working tool utilizes jquery's plugin gmap3 , allows user select between writing json array, dropping pins or address. tool spits out json array <textarea> it's easy grab information later. problem duplicate coordinates created when "address" selected , user decides select option "drag n' drop" go "address" , type new address in. appreciated!
scenario:
- click on address in selection.
- type in address in input , click add.
- click on drag n' drop in selection select address again.
- type in different address time in input, click add , watch duplicate coordinates appear in
<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 , 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 invalid json , return stop further execution if (e.message === "e_too_many_coord") { $('#errormessage').text("you cannot exeed more 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(); } }); });
nevermind, got working.
i used: $('#test-ok').bind('click',function(){ }
instead of: $('#test-ok').click(function(){ }
then used $('#test-ok').unbind('click'); when clicked on drag n drop or json in radio selection.
Comments
Post a Comment