Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

More than one input address #6

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

More than one input address #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7c50567
Included more than one input address on the screen
danilodeveloper Jun 30, 2013
486bd49
Some issues fixed
danilodeveloper Jun 30, 2013
e3b786b
Typo corrected
danilodeveloper Jun 30, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,12 @@ <h1>Geocoding with Google Maps and jQuery UI</h1>
<hr/>

<div id='input'>
<input id='gmaps-input-address' placeholder='Start typing a place name...' type='text' />
<input id='gmaps-input-address' placeholder='Address one' type='text' />
<br/>
<br/>
<input id='gmaps-input-address' placeholder='Address two' type='text' />
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix indentation.

<br/>
<br/>
Latitude: <span id='gmaps-output-latitude'></span>
<br/>
Longitude: <span id='gmaps-output-longitude'></span>
Expand Down
92 changes: 52 additions & 40 deletions js/gmaps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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());
}
Expand Down Expand Up @@ -108,45 +109,56 @@ 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){
$(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').match('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() {
Expand Down