From 7c50567994bd02360fabb6c0a0c1530fe775e9ba Mon Sep 17 00:00:00 2001 From: danilodeveloper Date: Sat, 29 Jun 2013 21:32:13 -0300 Subject: [PATCH 1/3] Included more than one input address on the screen --- index.html | 5 ++- js/gmaps.js | 93 ++++++++++++++++++++++++++++++----------------------- 2 files changed, 57 insertions(+), 41 deletions(-) diff --git a/index.html b/index.html index 181dd67..43a5e35 100644 --- a/index.html +++ b/index.html @@ -45,9 +45,12 @@

Geocoding with Google Maps and jQuery UI

- +

+ +
+
Latitude:
Longitude: diff --git a/js/gmaps.js b/js/gmaps.js index a50ab04..6404a86 100644 --- a/js/gmaps.js +++ b/js/gmaps.js @@ -48,8 +48,9 @@ function update_map( geometry ) { // fill in the UI elements with new position data function update_ui( address, latLng ) { - $('#gmaps-input-address').autocomplete("close"); - $('#gmaps-input-address').val(address); + elem = $( document.activeElement ); + elem.autocomplete("close"); + elem.val(address); //$('#gmaps-output-latitude').html(latLng.lat()); //$('#gmaps-output-longitude').html(latLng.lng()); } @@ -108,45 +109,57 @@ function geocode_lookup( type, value, update ) { // initialise the jqueryUI autocomplete element function autocomplete_init() { - $("#gmaps-input-address").autocomplete({ - - // source is the list of input options shown in the autocomplete dropdown. - // see documentation: http://jqueryui.com/demos/autocomplete/ - source: function(request,response) { - - // the geocode method takes an address or LatLng to search for - // and a callback function which should process the results into - // a format accepted by jqueryUI autocomplete - geocoder.geocode( {'address': request.term }, function(results, status) { - response($.map(results, function(item) { - return { - label: item.formatted_address, // appears in dropdown box - value: item.formatted_address, // inserted into input element when selected - geocode: item // all geocode data: used in select callback event - } - })); - }) - }, - - // event triggered when drop-down option selected - select: function(event,ui){ - update_ui( ui.item.value, ui.item.geocode.geometry.location ) - update_map( ui.item.geocode.geometry ) - } - }); - - // triggered when user presses a key in the address box - $("#gmaps-input-address").bind('keydown', function(event) { - if(event.keyCode == 13) { - geocode_lookup( 'address', $('#gmaps-input-address').val(), true ); + $('input[id*="gmaps-input"]').each(function(index){ + console.log($(this)); + $(this).autocomplete({ + + // source is the list of input options shown in the autocomplete dropdown. + // see documentation: http://jqueryui.com/demos/autocomplete/ + source: function(request,response) { + + // the geocode method takes an address or LatLng to search for + // and a callback function which should process the results into + // a format accepted by jqueryUI autocomplete + geocoder.geocode( {'address': request.term }, function(results, status) { + response($.map(results, function(item) { + return { + label: item.formatted_address, // appears in dropdown box + value: item.formatted_address, // inserted into input element when selected + geocode: item // all geocode data: used in select callback event + } + })); + }) + }, + + // event triggered when drop-down option selected + select: function(event,ui){ + update_ui( ui.item.value, ui.item.geocode.geometry.location ) + update_map( ui.item.geocode.geometry ) + } + }); + + // triggered when user presses a key in the address box + $(this).bind('keydown', function(event) { + if(event.keyCode == 13) { + geocode_lookup( 'address', $(this).val(), true ); + + // ensures dropdown disappears when enter is pressed + $(this).autocomplete("disable") + } else { + // re-enable if previously disabled above + $(this).autocomplete("enable") + } + }); + + $(this).bind('focus', function(event) { + elem = $(this); + if (elem.val() && elem.attr('id').contains('gmaps-canvas')) { + geocode_lookup( 'address', $(this).val(), true ); + } + }); + + }); - // ensures dropdown disappears when enter is pressed - $('#gmaps-input-address').autocomplete("disable") - } else { - // re-enable if previously disabled above - $('#gmaps-input-address').autocomplete("enable") - } - }); }; // autocomplete_init $(document).ready(function() { From 486bd49add4ddb5ab013374f603310609bc86cc8 Mon Sep 17 00:00:00 2001 From: danilodeveloper Date: Sat, 29 Jun 2013 21:42:03 -0300 Subject: [PATCH 2/3] Some issues fixed --- js/gmaps.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/js/gmaps.js b/js/gmaps.js index 6404a86..930ee04 100644 --- a/js/gmaps.js +++ b/js/gmaps.js @@ -110,7 +110,6 @@ function geocode_lookup( type, value, update ) { // initialise the jqueryUI autocomplete element function autocomplete_init() { $('input[id*="gmaps-input"]').each(function(index){ - console.log($(this)); $(this).autocomplete({ // source is the list of input options shown in the autocomplete dropdown. @@ -153,7 +152,7 @@ function autocomplete_init() { $(this).bind('focus', function(event) { elem = $(this); - if (elem.val() && elem.attr('id').contains('gmaps-canvas')) { + if (elem.val() && elem.attr('id').match('gmaps-canvas')) { geocode_lookup( 'address', $(this).val(), true ); } }); From e3b786bfeaa3ecafeb7da43193e08f2aef3f22dd Mon Sep 17 00:00:00 2001 From: danilodeveloper Date: Sat, 29 Jun 2013 21:49:35 -0300 Subject: [PATCH 3/3] Typo corrected --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 43a5e35..7830ec4 100644 --- a/index.html +++ b/index.html @@ -45,10 +45,10 @@

Geocoding with Google Maps and jQuery UI

- +

- +

Latitude: