My code
html:
input type='text' name='Address_A' id='Address_1' placeholder='Nhập địa chỉ' autocomplete='off'
javascript:
var input = document.getElementById("Address_1");
var autocomplete = new google.maps.places.Autocomplete(input, { types:['geocode'] });
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
input.value = name;
});
but textbox is not show incorrect. Something wrong?
You can try on Google API doc
The link is here with demo
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
Cheers :D
Related
I have to droppable area with same name, I need input for each to save it then in different places. The problem is its just creating new input after clicking save button but I need to update already existing input and creating new one.
You can see sample here
I am using this function to create input for each of the boxes. in my work it can be even more than 2. It depends on user's input:
var LISTOBJ = {
saveList: function() {
$(".projLeader").each(function() {
var listCSV = [];
$(this).find("li").each(function(){
listCSV.push($(this).text());
});
var values = listCSV.join(', ');
$(".output").append("<input type='text' name='projLeader[]' value='"+values+"' /></br>");
console.debug(listCSV);
});
}
}
You can try below code, might be help you.
var LISTOBJ = {
saveList: function() {
$(".output").html("");
$(".projLeader").each(function() {
var listCSV = [];
$(this).find("li").each(function(){
listCSV.push($(this).text());
});
var values = listCSV.join(', ');
$(".output").append("<input type='text' name='projLeader[]' value='"+values+"' /></br>");
console.debug(listCSV);
});
}
}
How to get place ids from address_components using google api for web? Is it possible to get the id of the titles?
$(document).ready(function() {
$(document).on('change', '#s', function () {
window.setTimeout(function () {
googleMapsLoaded(); }, 300);
});
});
var autocomplete; function initialize() {
var options = {
types : ['(regions)'] };
var input = document.getElementById('s');
autocomplete = new google.maps.places.Autocomplete(input , options, googleMapsLoaded);
}
var map = google.maps.event.addDomListener(window, 'load', initialize);
function googleMapsLoaded(){
var place = autocomplete.getPlace();
console.log(place.place_id);
}
I am using the google places api in my website.When i focus on the input field and start writing the autocomplete works fine but when i press enter it gets submitted without the value.I get the error: "cannot read property "location" of undefined".
Javascript:
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('main_search');
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(22.4667, 88.3067),
new google.maps.LatLng(22.8667, 88.467));
var options = {
bounds: defaultBounds,
types: ['establishment'],
componentRestrictions: {
country: 'in'
}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
document.getElementById('city').value = place.name;
document.getElementById('cityLat').value = place.geometry.location.lat();
document.getElementById('cityLng').value = place.geometry.location.lng();
});
}
</script>
i am using the get method and i don't get any value.when i use mouse and click on submit button everything works fine.
Temporary fix
Disable the enter default when pac-container (autocomplete dropdown) is visible
$('#search-entry').keydown(function(e) {
if (e.which == 13 && $('.pac-container:visible').length) return false;
});
This is my first JavaScript I have tried to put together but I am not having a lot of luck.
This is what the script should do: Geocode an address either by clicking on an autosuggested location or by clicking search button if we do not have the result already from clicking autosuggestion. Then submit the form.
I am not having much luck, it seems I have mucked up my bracketing on the script because no matter what I do it complains about exceptions.
This is my code:
geocode();
// SET COOKIE FOR TESTING PURPOSES
$.cookie("country", "US");
// GEOCODE FUNCTION
function geocode() {
var coded = false;
var input = document.getElementById('loc');
var options = {
types: ['geocode']
};
var country_code = $.cookie('country');
if (country_code) {
options.componentRestrictions = {
'country': country_code
};
}
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
processLocation();
});
// ON SUBMIT - WORK OUT IF WE ALREADY HAVE THE RESULTS FROM AUTOCOMPLETE FUNCTION
$('#searchform').on('submit', function(e) {
e.preventDefault();
if(coded = false;) {
processLocation();
}
else {
$('#searchform').submit();
}
});
// CHECK TO SEE IF INPUT HAS CHANGED SINCE BEING GEOCODED
// IF "CODED" VAR IS FALSE THEN WE WILL GEOCODE WHEN SEARCH BUTTON HIT
$("#loc").bind("change paste keyup", function() {
var coded = false;
});
};
// GEOCODE THE LOCATION
function processLocation(){
var geocoder = new google.maps.Geocoder();
var address = document.getElementById('loc').value;
$('#searchform input[type="submit"]').attr('disabled', true);
geocoder.geocode({
'address': address
},
// RESULTS - STORE COORDINATES IN FIELDS OR ERROR IF NOT SUCCESSFUL
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var coded = true;
$('#lat').val(results[0].geometry.location.lat());
$('#lng').val(results[0].geometry.location.lng());
} else {
var coded = false;
$('#searchform input[type="submit"]').attr('disabled', false);
alert("We couldn't find this location")
}
});
}
Where have I gone wrong?
PS: Because this is my first script, I am happy to receive feedback if I have made any poor choices in the design of it. I really want to make my first script as cleanly coded as possible.
There is an syntax error
if(coded = false;) {
should be
if(coded == false) {
Checking the console would have told you such a thing and also the place WHERE the error occured.... Here's your fixed fiddle
Currently when you click on the autosuggest suggestion in the location field it just loads it into the input box. I want to make an adjustment to it, so when you click on the result in the autosuggest box, not only does it load its value into the input box but it also triggers the geocode. I cant get my head around how I would do this though, so I would appreciate some help.
This is the code: http://jsfiddle.net/njDvn/130/
<!-- Geocode -->
$(document).ready(function () {
var GeoCoded = { done: false };
autosuggest();
$('#myform').on('submit', function (e) {
if (GeoCoded.done) return true;
e.preventDefault();
var geocoder = new google.maps.Geocoder();
var address = document.getElementById('location').value;
$('#myform input[type="submit"]').attr('disabled', true);
geocoder.geocode({
'address': address
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latLng = results[0].geometry.location;
$('#lat').val(results[0].geometry.location.lat());
$('#lng').val(results[0].geometry.location.lng());
GeoCoded.done = true;
$('#myform').submit();
} else {
console.log("Geocode failed: " + status);
//enable the submit button
$('#myform input[type="submit"]').attr('disabled', false);
}
});
});
});
And the autosuggest:
<!-- AutoSuggest -->
function autosuggest() {
var input = document.getElementById('location');
var options = {
types: [],
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
What you could do instead is use only Places API library and simply listen for place_changed event like in this sample here:
https://developers.google.com/maps/documentation/javascript/places#getting_place_information
You can get the Geocode using: place.geometry.location