I want the users to see only the country names when they type on the search box. Is it possible?
I've tried this (doesn't work):
var options = {
types: [('regions')]
};
var searchBox = new google.maps.places.SearchBox(input, options);
Google lets you to use some properties for getting the data like you want.You can set to it language and anything else.
Here is a link,which will help you.
http://www.w3docs.com/learn-javascript/places-autocomplete.html
Related
I am looking for a possibility to get suggestions without country name.
I have the following js code:
var options = {
types: ['(cities)'],
componentRestrictions: {country: "us"}
};
autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), options);
The result is e.g. Austin TX, USA
Now I want to have for that example only
Expect result is e.g. Austin TX
See more info following image link
click here
Do you have an idea? Thanks. Dhiraj Gangal
I investigated more on this and I have more Info here:
The Service to use:
https://developers.google.com/maps/documentation/javascript/places-autocomplete?hl=de#place_autocomplete_service
The AutocompletePrediction defines what the service returns https://developers.google.com/maps/documentation/javascript/reference?hl=de#AutocompletePrediction
and a PredictionTerm here https://developers.google.com/maps/documentation/javascript/reference?hl=de#PredictionTerm is one part of the "description" that gets intially displayed as result.
The interesting part is actually the PredictionTerm which is a part of the whole place suggestion.
If you look into this example: https://developers.google.com/maps/documentation/javascript/examples/places-queryprediction
You could easily grab each PredictionTerm of the suggestion results like in the following snippet:
predictions.forEach(function(prediction) {
var li = document.createElement('li');
var city = prediction.terms[2];
var content = "Results: "+city;
li.appendChild(document.createTextNode(prediction.description));
document.getElementById('results').appendChild(li);
});
I made an example: https://jsfiddle.net/yfkpvf72/1/
have a question about this kind of autocomplete.
How it works?!?
We use Google autocomplete, and Google library for adresses.
But in Google maps api we didnt found any option to change "pac-icon" only near Airport, and didnt found even customizable adress with own icon.
I wanna ask more clever people, how those autocomplete works, what kinds of autocomplete they are and if its possible to do with google, before we will pay for premium at Google Maps Appi.
Thank You soo much for help !!
Blacklane autocomplete
myDriver autocomplete
Due to the limitations in Places API you can only set the pac-icon for all the results in the searchbox due to it being CSS class.
You can on the other hand restrict the search to Central Europe by different ways:
Option 1 - Setting the way by bounds, In this example I am telling it to limit the search between France and Czechia
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(46.144137,-2.4447717),
new google.maps.LatLng(49.7855718,13.2273027);
var input = document.getElementById('searchTextField');
var searchBox = new google.maps.places.SearchBox(input, {
bounds: defaultBounds
});
Option 2 - Restricting the search to a list of countries(5 max)
var input = document.getElementById('searchTextField');
var options = {
types: ['(cities)'],
componentRestrictions: {country: 'fr'}
};
autocomplete = new google.maps.places.Autocomplete(input, options);
You can find more information and examples in the Autocomplete for Addresses and Search Terms for Maps Javascript API.
When using Google Places API, what is the best way of hiding the map itself ?
We only need the search auto-complete, and our users don't need to see the map itself.
https://developers.google.com/maps/documentation/javascript/places?authuser=2#place_search_requests
Got the answer from https://developers.google.com/maps/documentation/javascript/places-autocomplete?authuser=2#video
Basically the Autocomplete constructor has a constructor overload
= new google.maps.places.Autocomplete( htmlInput, autoCompleteOptions )
var autocomplete = new google.maps.places.Autocomplete(input, { bounds: defaultBounds });
And this is not violating the TOS at all, reading the https://developers.google.com/maps/documentation/javascript/places-autocomplete?authuser=2#video above.
I need a POI API that returns ratings, photos, opening/closing times, etc and I thought Google Places API seemed to do what I want, but I am having some trouble with filtering: I want to use the autocomplete feature with multiple types for filtering.
Here is what I have:
var map;
var selectAttractionAutocomplete;
var selectCityAutocompleteOptions = {
types: ['(cities)']
};
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-33.8665433, 151.1956316),
zoom: 15
});
var inputsearchedCity = document.getElementById('input-searched-city');
selectCityAutocomplete = new google.maps.places.Autocomplete(inputsearchedCity, selectCityAutocompleteOptions);
selectCityAutocomplete.bindTo('bounds', map);
google.maps.event.addListener(selectCityAutocomplete, 'place_changed', function () {
console.log(selectCityAutocomplete.getPlace());
});
How can I use multiple types?
I have tried pipes, commas, brackets... nothing works:
var selectCityAutocompleteOptions = {
types: ['cities|point_of_interest']
};
If your are using in a query string, use the | separator. Remember that only 'geocode|establishment' is currently valid as a collection type, which is the same than not specifying any combined type.
See:
https://developers.google.com/places/web-service/autocomplete#place_types
You may restrict results from a Place Autocomplete request to be of a certain type by passing a types parameter. The parameter specifies a type or a type collection, as listed in the supported types below. If nothing is specified, all types are returned. In general only a single type is allowed. The exception is that you can safely mix the geocode and establishment types, but note that this will have the same effect as specifying no types.
According to Google Documentation, point_of_interestis of type 2, which are not supported in the types filter of a place search, or in the types property when adding a place.
This question is partly answered in this thread.
First, the place type of "cities" it not supported. You can find a list of supported place types here.
There is no way to use multiple types at once. However, you can call the API twice in order to get similar results. For example:
var selectCityAutocompleteOptions1 = {
types: ['zoo']
};
var selectCityAutocompleteOptions2 = {
types: ['museum']
};
Based off of your description, though, it sounds like you want all points of interest results, without filtering by type. In that case you might want to use a Find Place Requests Place Search instead.
Encountered this recently. Answer is here Google Places Auto-Complete
types, which can either specify one of two explicit types or one of two type collections.
var request = {
bounds: map.getBounds(),
types: ['bar','park']
//keyword: 'best view'
};
I've a layout template with a left sidebar where I show information of Location passed entities as an array.
Also in this template, I show a object Map with all of this locations.
I want to do click on a Location of my sidebar and then on the same template show another object Map replacing the previous with information of this Location. Keeping the sidebar with the information and not doing new queries on the database.
How to achieve this?
Ajax? Conditional layout?
I read this article but I don't understand how to solved my problem: http://twig.sensiolabs.org/doc/recipes.html#overriding-a-template-that-also-extends-itself
PD: I'm using Twig template and Symfony2
You could have a separate template for printing object map and, as you guessed, this would have to be done using AJAX. You would pass the data you want to show on map (not id as you don't want to query database again) and the controller would return formatted HTML.
However, this seems to me a bit overkill. I would always consider doing JS (with optional framework) in order to swap the content of sidebar with Map object.
It really depends on which map API do you use. If it could be controlled via JS I would look no further. It it could not, well then, AJAX is your natural choice....
UPDATE:
OK, what you should do is create initial Map object that will be modified later on:
var theMap = null;
function initializeMap(){
var mapOptions = {
center: new google.maps.LatLng(some_latitude, some_longitude),
zoom: 8, // goes from 0 to 18
mapTypeId: google.maps.MapTypeId.ROADMAP
};
theMap = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
// you must have some element with ID = 'map_canvas'
}
some_latitude and some_longitude are fairly unimportant as you will most likely set new coordinates in a few moments.
Now assuming (but not crucial at all) that you use some of the JS frameworks (I prefer jQuery) you could bind click event to those location links:
var onlyMarker = null;
$('.location').click(function(){
var $t = $(this);
var newLatLang = new google.maps.LatLng($t.attr('data-lat') ,$t.attr('data-lng'));
if ( onlyMarker == null ) {
onlyMarker = new google.maps.Marker({
position: newLatLang
map: theMap,
title: $t.attr('title')
});
}else{
onlyMarker.setPosition(newLatLang);
}
});
Now, relying on HTML5's 'data-*' attibutes is not good idea in particular as if you use any other version lower you will most likely end-up with invalid markup. The workaround is to for link (<a>) to carry id/key to LatLng object, for example:
// initially generated from `AJAX` or in `Twig` loop
var allLatlangs = [
new google.maps.LatLngf(some_latitude, some_longitude),
new google.maps.LatLngf(some_latitude, some_longitude),
new google.maps.LatLngf(some_latitude, some_longitude),
];
$('.location').click(function(){
var id = $(this).attr('id');
var newLatLang = allLatLang(id);
//....
// everything else is the same
// ....
});
Don't forget to include Maps API with proper API key:
https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&sensor=true
In order to obtain valid API key follow this link: API KEY HOW-TO
This link basically covers key steps that I have described here so study it and it should all come together nicely.
Also, if you're unsure how to retrieve some things from Maps you should consult reference:
REFERENCE which has every method call described pretty good
Remember not to execute any of this code until everything is being loaded.
Hope this helped a bit :)