Firstly please accept my apologies if this article already exists, but my long search efforts hasn't returned anything useful so far.
I'm integrating Google places autocomplete into one of my website, I'm struggling to find the options that will allow us to sort order the results; Currently we have an issue where a user can input the word London and we want London, UK to be the first results not London road in ...!
We still want the user to be able to search by Road, but we don't want this to show above big cities.
Can anyone please point me in the right direction on how to do this with Google Places Autocomplete?
Unfortunately, changing the order result of the autocomplete is not possible.
The Place Autocomplete service will return candidate matches based on this string and order results based on their perceived relevance.
The closest you can make is to add a restriction by adding type and/or componentRestriction. Currently, you can use componentRestrictions to filter by country.
Sample code:
var input = document.getElementById('searchTextField');
var options = {
types: ['(cities)'],
componentRestrictions: {country: 'fr'}
};
autocomplete = new google.maps.places.Autocomplete(input, options);
You can do something like this
const defaultBounds = new google.maps.LatLngBounds({ lat: 42.5214071, lng: -70.9310135 });
autocomplete = new google.maps.places.Autocomplete(
document.querySelector('#autocomplete'), {types: ['geocode'],
bounds: defaultBounds,
strictBounds: false
});
It will help you more.
Related
I have a MySQL address database which contains all the necessary information to look up the address on google maps. Each row with data contains an extra field naming LATLNG. Which contains the Lat and Lng in the preferred format of google maps. ####, ####. I have already created a viewing page with a ‘show’ button to display the content on a separated html page in Google maps with the address above it.
The problem is that I could find all kinds of tutorials (also from google themselves) with the vast possibility’s that google maps provide. The feature I would like to use however isn’t found in a tutorial. And whatever I do, I seem to get stuck with the result of it.
Example (own database):
After each address field there is a button with the next caption:
echo '<td>Show</td>';
Example (google maps) what opens after pressing the SHOW button:
<script>
function myMap() {
var Lelystad = new google.maps.LatLng(LAT LNG INFORMATION);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: TOWN NAME, zoom: 15};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:TOWN NAME});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "DISPLAY CONTENT OF ADDRESS ABOVE MARKER"
});
infowindow.open(map,marker);
}
</script>
What I want is that after pressing the ‘show’ button the latlng from that given address is being picked up by google maps and show it.
Hopefully someonw can help me, if some of the information is not clear enough don't hesitate to ask me.
I am not sure you want to use the JavaScript. There is a very simple API giving you the latitude and longitude through a URL:
http://maps.googleapis.com/maps/api/geocode/json?address=eiffel%20tower,paris
where "address" is the address you are looking for. You must first register to obtain a key and you are limited to 2500 requests per day (but you can store the results in the database).
See full documentation here: https://developers.google.com/maps/documentation/geocoding/intro?hl=fr
I have this options for my autocomplete google map search but when I added the locality and types it wont work.
var options = {
types:['school'],
componentRestrictions: {
locality:'caloocan',
country: 'PH'}
};
Based from this documentation, componentRestrictions can be used to restrict results to specific groups. Currently, you can use componentRestrictions to filter by country. The country must be passed as as a two-character, ISO 3166-1 Alpha-2 compatible country code.
Here is the example from the documentation
var input = document.getElementById('searchTextField');
var options = {
types: ['(cities)'],
componentRestrictions: {country: 'fr'}
};
autocomplete = new google.maps.places.Autocomplete(input, options);
I think the locality part of your code made the errors. Because it is stated in the documentation that "In general only a single type is allowed".
And the (cities) type collection instructs the Places service to
return results that match either locality or administrative_area3
Try to check the parameter that you can use for your code.
I want to only show the cities name using Geocomplete.js. I have restrict the search to only show the cities. But it is still showing the Country name "United State" at the end, i want to get rid from it.
Any Suggestions please
Thanks
Glad that I finally found solution for geocomplete.js! Hope it will be useful to someone.
Solution: Send options with restrictions required to geocomplete function:
var options = {
types: ['(cities)'],
componentRestrictions: {}
};
$("#source").geocomplete(options);
You can also send country-based restrictions.
with Options like
var options = {
types: ['(cities)'],
componentRestrictions: {country: ["usa"]}
};
Google Location Autocomplete using google places api solutions was straightforward and here is the answer
I am trying to make a geocoder which only works with roads, cities, towns and countries. However, if I type in something like "Papa Johns Pizza" it is returning me results.
How can I make it so google is working on addresses and remove places of business?
This is the code im working from:
http://jsfiddle.net/qcPgL/4/
http://jsfiddle.net/aleation/pqmQ5/1/
adding
var autocompleteOptions = {
types: ['geocode']
};
and assigning those options to the autocomplete
var autocomplete = new google.maps.places.Autocomplete(input, autocompleteOptions);
I am having problem with Google places search. If I choose types: ['geocode'] i get no results (ZERO_RESULTS) regardless of a search term. What am i doing wrong? Here is my code snippet:
...
var params = {
name: searchTerm, //search Term is for example 'lon'
bounds: map.getBounds(),
types: ['geocode']
}
var service = new google.maps.places.PlacesService(map);
service.search(params, function (results, status) {
alert(status); - gives ZERO_RESULTS
}
...
Update:
I want it to behave the same as Javascript AOI places Autocomplete. To get me the same results. I thought they are querying the same data?
var input = document.getElementById('location');
var options = {
bounds: map.getBounds(),
types: ['geocode']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
....
This one gives me great results. ( reason i am not using autocomplete method over first solution is because i could not manage to auto select first item in autocomplete list once enter (in search fields) is hit. - if you know answer to that please help :)
At this time at least, it is best not to assume that Google Places has a lot of data for a location or that the data is finely categorized. It is entirely likely that Google Places has few or no places of type geocode for you to find.
Since types is optional, remove it and you will likely get results.
UPDATE: Regarding the Autocomplete vs. Places Search stuff that has been added to the question: I have not used Autocomplete, but I would think that it should not give you the same results. A Places Search is trying to find stuff that matches search term XXXXX. Autocomplete is trying to predict given substring XXXXXX what it is you may be trying to type. So it is likely to return more (and different, and in many cases less relevant) results. So what you are seeing (more results with Autocomplete) does not strike me as anomalous.
I have found that by removing the "types" parameter I get way more places. I am using places autocomplete and it definately gives me more options without the types.
I am just catching the enter key and stopping it, to prevent users submitting the form accidentally. Not quite what you wanted but it works for me.
$("#LatLongSearch").keypress(function (event) {
if (event.which == 13) { // make enter key just search map and stop it from submitting form
event.preventDefault();
}
})
try this
$('#searchform').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
$('#yourform').submit();
}); } });
It work for me