From bee73e0ae2a7c35b1b0bcc0fd198c36e3d98a4cb Mon Sep 17 00:00:00 2001 From: Ryan Courreges Date: Thu, 25 Jul 2013 16:31:06 -0700 Subject: [PATCH 01/11] added street_address_only data type and option to set select dropdowns The available options for values from the geocode request do not include a street only address, e.g., 123 Main St instead of 123 Main St, Anytown, USA. This option was added. The setDetail function failed to set select dropdowns with the proper value. I personally was using them for state selection, but it should work for anything where the returned value from the geocode is a match for the select option's value or text. This has been added now. --- jquery.geocomplete.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/jquery.geocomplete.js b/jquery.geocomplete.js index db95882..68ad04b 100644 --- a/jquery.geocomplete.js +++ b/jquery.geocomplete.js @@ -57,7 +57,7 @@ // See: [Geocoding Types](https://developers.google.com/maps/documentation/geocoding/#Types) // on Google Developers. - var componentTypes = ("street_address route intersection political " + + var componentTypes = ("street_number route street_address intersection political " + "country administrative_area_level_1 administrative_area_level_2 " + "administrative_area_level_3 colloquial_area locality sublocality " + "neighborhood premise subpremise postal_code natural_feature airport " + @@ -363,7 +363,7 @@ // Set the values for all details. $.each(this.details, $.proxy(function(key, $detail){ - var value = data[key]; + var value = (key !== "street_address") ? data[key] : data["street_number"] + " " + data["route"]; this.setDetail($detail, value); }, this)); @@ -371,7 +371,9 @@ }, // Assign a given `value` to a single `$element`. - // If the element is an input, the value is set, otherwise it updates + // If the element is an input, the value is set, if the element is a + // select, it checks the value and text fields of its options and + // selects the matching option if it exists, otherwise it updates // the text content. setDetail: function($element, value){ @@ -383,6 +385,10 @@ if ($element.is(":input")){ $element.val(value); + } else if ($element.is("select")){ + $element.find("option").filter(function(){ + return ( ($(this).val() == value) || ($(this).text() == value) ) + }).prop('selected', true); } else { $element.text(value); } From 00db037c78a7324758b3d950485b2b44803964af Mon Sep 17 00:00:00 2001 From: Ryan Courreges Date: Thu, 25 Jul 2013 16:32:56 -0700 Subject: [PATCH 02/11] small syntax correction --- jquery.geocomplete.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.geocomplete.js b/jquery.geocomplete.js index 68ad04b..812ef60 100644 --- a/jquery.geocomplete.js +++ b/jquery.geocomplete.js @@ -57,7 +57,7 @@ // See: [Geocoding Types](https://developers.google.com/maps/documentation/geocoding/#Types) // on Google Developers. - var componentTypes = ("street_number route street_address intersection political " + + var componentTypes = ("street_address route street_address_only intersection political " + "country administrative_area_level_1 administrative_area_level_2 " + "administrative_area_level_3 colloquial_area locality sublocality " + "neighborhood premise subpremise postal_code natural_feature airport " + @@ -363,7 +363,7 @@ // Set the values for all details. $.each(this.details, $.proxy(function(key, $detail){ - var value = (key !== "street_address") ? data[key] : data["street_number"] + " " + data["route"]; + var value = (key !== "street_address_only") ? data[key] : data["street_number"] + " " + data["route"]; this.setDetail($detail, value); }, this)); From b632b7a927b958063f26a09194822c711f12ab3d Mon Sep 17 00:00:00 2001 From: Ryan Courreges Date: Fri, 26 Jul 2013 09:21:10 -0700 Subject: [PATCH 03/11] Semantic fix fixed the $element.is("select") branch so it works --- jquery.geocomplete.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/jquery.geocomplete.js b/jquery.geocomplete.js index 812ef60..c38db87 100644 --- a/jquery.geocomplete.js +++ b/jquery.geocomplete.js @@ -384,12 +384,14 @@ } if ($element.is(":input")){ - $element.val(value); - } else if ($element.is("select")){ - $element.find("option").filter(function(){ - return ( ($(this).val() == value) || ($(this).text() == value) ) - }).prop('selected', true); - } else { + if($element.is("select")){ + $element.find("option").filter(function(){ + return ( ($(this).val() == value) || ($(this).text() == value) ) + }).prop('selected', true); + } + else + $element.val(value); + } else { $element.text(value); } }, From 19b5f7f1c42fb3a3c600dd1373d86258a4d6ad93 Mon Sep 17 00:00:00 2001 From: Ryan Courreges Date: Thu, 8 Aug 2013 22:05:16 -0700 Subject: [PATCH 04/11] Removed street_address_only address component and added multiple address component support Added the ability to set multiple address component types to a single input field. The components will be set in the input in the order in which the markup lists them. For example, on a return from google of "123 Main St, Anytown, AA", using the detailsAttribute of `data-geo` and setting `data-geo="street_number route". Behavior remains the same for inputs that have a repeated component type as the first data-geo attribute. Only the first input will be filled. --- jquery.geocomplete.js | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/jquery.geocomplete.js b/jquery.geocomplete.js index c38db87..6bbc028 100644 --- a/jquery.geocomplete.js +++ b/jquery.geocomplete.js @@ -57,7 +57,7 @@ // See: [Geocoding Types](https://developers.google.com/maps/documentation/geocoding/#Types) // on Google Developers. - var componentTypes = ("street_address route street_address_only intersection political " + + var componentTypes = ("street_address route intersection political " + "country administrative_area_level_1 administrative_area_level_2 " + "administrative_area_level_3 colloquial_area locality sublocality " + "neighborhood premise subpremise postal_code natural_feature airport " + @@ -200,7 +200,7 @@ details = {}; function setDetail(value){ - details[value] = $details.find("[" + attribute + "=" + value + "]"); + details[value] = $details.find("[" + attribute + "^=" + value + "]"); } $.each(componentTypes, function(index, key){ @@ -361,9 +361,26 @@ lng: geometry.location.lng() }); - // Set the values for all details. $.each(this.details, $.proxy(function(key, $detail){ - var value = (key !== "street_address_only") ? data[key] : data["street_number"] + " " + data["route"]; + // use the selector to get the element and then fill the value + + // build the value for single or mutliple address component types + var value; + var count = 0; + var comps = $detail.attr('data-geo'); + if(comps !== undefined){ + $.each(comps.replace(/\s+/g, ' ').split(" "), function(){ + var current = data[this.toString()]; + if(count++ === 0) + value = current; + else + value += " " + current; + }); + } + else + value = data[key]; + + // Set the values for all details. this.setDetail($detail, value); }, this)); @@ -371,9 +388,7 @@ }, // Assign a given `value` to a single `$element`. - // If the element is an input, the value is set, if the element is a - // select, it checks the value and text fields of its options and - // selects the matching option if it exists, otherwise it updates + // If the element is an input, the value is set, otherwise it updates // the text content. setDetail: function($element, value){ @@ -382,7 +397,7 @@ } else if (typeof value.toUrlValue == "function"){ value = value.toUrlValue(); } - +console.log("setDetail: "+value); if ($element.is(":input")){ if($element.is("select")){ $element.find("option").filter(function(){ From 16114dd0e16c768ae582fdf3a2484317ead1e2f7 Mon Sep 17 00:00:00 2001 From: Ryan Courreges Date: Thu, 8 Aug 2013 22:07:58 -0700 Subject: [PATCH 05/11] removed an errant console.log --- jquery.geocomplete.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.geocomplete.js b/jquery.geocomplete.js index 6bbc028..fdd0565 100644 --- a/jquery.geocomplete.js +++ b/jquery.geocomplete.js @@ -397,7 +397,7 @@ } else if (typeof value.toUrlValue == "function"){ value = value.toUrlValue(); } -console.log("setDetail: "+value); + if ($element.is(":input")){ if($element.is("select")){ $element.find("option").filter(function(){ From 01081f51ca18f84c98eea19f7e0c25df0d0ce421 Mon Sep 17 00:00:00 2001 From: Ryan Courreges Date: Thu, 8 Aug 2013 22:09:27 -0700 Subject: [PATCH 06/11] added a removed comment line back in somehow removed a comment line on accident. put it back in. --- jquery.geocomplete.js | 1 + 1 file changed, 1 insertion(+) diff --git a/jquery.geocomplete.js b/jquery.geocomplete.js index fdd0565..1be0b28 100644 --- a/jquery.geocomplete.js +++ b/jquery.geocomplete.js @@ -361,6 +361,7 @@ lng: geometry.location.lng() }); + // Set the values for all details. $.each(this.details, $.proxy(function(key, $detail){ // use the selector to get the element and then fill the value From 360e18df32064b1407fc881f2a2755f3a9d1f4f1 Mon Sep 17 00:00:00 2001 From: Ryan Courreges Date: Thu, 8 Aug 2013 22:21:33 -0700 Subject: [PATCH 07/11] fixed bug causing multiple inputs to be filled with the same value Inputs with sharing the same first component type in their `dataAttribute` attribute were being filled with whatever the first instance was calling for. --- jquery.geocomplete.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.geocomplete.js b/jquery.geocomplete.js index 1be0b28..ca8c5da 100644 --- a/jquery.geocomplete.js +++ b/jquery.geocomplete.js @@ -364,7 +364,7 @@ // Set the values for all details. $.each(this.details, $.proxy(function(key, $detail){ // use the selector to get the element and then fill the value - + $detail = $detail.first(); // build the value for single or mutliple address component types var value; var count = 0; From 118bb542dcb5a89cab908a5ea60dc2e59982415a Mon Sep 17 00:00:00 2001 From: Ryan Courreges Date: Thu, 8 Aug 2013 22:22:51 -0700 Subject: [PATCH 08/11] formatting change --- jquery.geocomplete.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.geocomplete.js b/jquery.geocomplete.js index ca8c5da..01b2f53 100644 --- a/jquery.geocomplete.js +++ b/jquery.geocomplete.js @@ -363,8 +363,8 @@ // Set the values for all details. $.each(this.details, $.proxy(function(key, $detail){ - // use the selector to get the element and then fill the value $detail = $detail.first(); + // build the value for single or mutliple address component types var value; var count = 0; From 1e2e161d5774081f67ef07c7cbb809ad0155d8d5 Mon Sep 17 00:00:00 2001 From: Ryan Courreges Date: Sun, 11 Aug 2013 14:00:55 -0700 Subject: [PATCH 09/11] Added functionality to pass in a pre-existing map marker and whether to init the marker location Added the ability to pass in a pre-existing map marker to the initialization options. Can also specify whether the plugin should set the marker's position during initialization. --- jquery.geocomplete.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/jquery.geocomplete.js b/jquery.geocomplete.js index 01b2f53..a05b272 100644 --- a/jquery.geocomplete.js +++ b/jquery.geocomplete.js @@ -36,6 +36,8 @@ bounds: true, country: null, map: false, + marker: false, + initMarker: true, details: false, detailsAttribute: "name", location: false, @@ -119,10 +121,16 @@ }, // Add a marker with the provided `markerOptions` but only - // if the option was set. Additionally it listens for the `dragend` event - // to notify the plugin about changes. + // if the option was set or link to an existing marker instance. + // Additionally it listens for the `dragend` event to notify + // the plugin about changes. initMarker: function(){ if (!this.map){ return; } + if(typeof this.options.marker.setPosition == "function"){ + this.marker = this.options.marker; + return; + } + var options = $.extend(this.options.markerOptions, { map: this.map }); if (options.disabled){ return; } @@ -239,7 +247,7 @@ if (latLng){ if (this.map){ this.map.setCenter(latLng); } - if (this.marker){ this.marker.setPosition(latLng); } + if (this.marker && this.options.initMarker){ this.marker.setPosition(latLng); } } }, @@ -364,7 +372,7 @@ // Set the values for all details. $.each(this.details, $.proxy(function(key, $detail){ $detail = $detail.first(); - + // build the value for single or mutliple address component types var value; var count = 0; From f35bc559d87a9568dd02ae42b1909d6c40f8bfed Mon Sep 17 00:00:00 2001 From: Ryan Courreges Date: Sun, 11 Aug 2013 15:42:43 -0700 Subject: [PATCH 10/11] updated readme.md for fork --- README.md | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 0a69c7f..600dcf9 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,14 @@ -# $.geocomplete() - Version 1.4 +# $.geocomplete() - Version 1.4 forked ## jQuery Geocoding and Places Autocomplete Plugin An advanced jQuery plugin that wraps the Google Maps API's [Geocoding](https://code.google.com/apis/maps/documentation/javascript/geocoding.html) and [Places Autocomplete](https://code.google.com/apis/maps/documentation/javascript/places.html#places_autocomplete) services. You simply provide an input that lets you search for locations with a nice autocomplete dropdown. Optionally add a container to show an interactive map and a form that will be populated with the address details. +### ATENTION!!! + +This fork has been modified to include the ability to apply multiple address components to a single input, the ability to set the selected option of a select box, support for pre-existing markers and whether to set the marker position on initialization. -View the [annotated source](http://ubilabs.github.com/geocomplete/docs/). +View the original repository [annotated source](https://github.com/ubilabs/geocomplete) + +View the [annotated source](https://github.com/climbak/geocomplete/blob/master/jquery.geocomplete.js). ## Basic Usage @@ -90,10 +95,11 @@ Advanced Example: ```html
- Latitude: - Longitude: - Address: - Country Code: + Latitude: + Longitude: + Full Address: + Street Address: + Country Code:
``` @@ -124,6 +130,8 @@ $("#my_input").geocomplete({ ``` * `map` - Might be a selector, a jQuery object or a DOM element. Default is `false` which shows no map. +* `marker` - Might be a selector, a jQuery object or a DOM element. Default is `false` which creates a new basic marker. +* `initMarker` - Whether to set the position of the marker on map initialization. Default: `true` * `details` - The container that should be populated with data. Defaults to `false` which ignores the setting. * `location` - Location to initialize the map on. Might be an address `string` or an `array` with [latitude, longitude] or a `google.maps.LatLng`object. Default is `false` which shows a blank map. * `bounds` - Whether to snap geocode search to map bounds. Default: `true` if false search globally. Alternatively pass a custom LatLngBounds object From 6251ad2294c3c4a387e6e13f783576086f18e906 Mon Sep 17 00:00:00 2001 From: Ryan Courreges Date: Sun, 11 Aug 2013 15:43:15 -0700 Subject: [PATCH 11/11] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 600dcf9..92d3181 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ## jQuery Geocoding and Places Autocomplete Plugin An advanced jQuery plugin that wraps the Google Maps API's [Geocoding](https://code.google.com/apis/maps/documentation/javascript/geocoding.html) and [Places Autocomplete](https://code.google.com/apis/maps/documentation/javascript/places.html#places_autocomplete) services. You simply provide an input that lets you search for locations with a nice autocomplete dropdown. Optionally add a container to show an interactive map and a form that will be populated with the address details. -### ATENTION!!! +### ATTENTION!!! This fork has been modified to include the ability to apply multiple address components to a single input, the ability to set the selected option of a select box, support for pre-existing markers and whether to set the marker position on initialization.