I have the same autocomplete script as in the documentation: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
My include script:
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.8&sensor=false&libraries=geometry,places&language=&hl=®ion=FR"></script>
The javascript:
function initAutocomplete(callback, input_s, lat_s, lng_s, label_s) {
var input = $(input_s)[0];
var autocomplete = new google.maps.places.Autocomplete(input);
//autocomplete.bindTo('', search_map.map);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
if (place.geometry) {
$(lat_s).val(place.geometry.location.lat());
$(lng_s).val(place.geometry.location.lng());
$(label_s).val(place.formatted_address);
if (callback) {
callback();
}
}
});
}
initAutocomplete(somefunction, '#zipcode_search_input', "#search_lat", "#search_lng", "#search_address_label");
I'd like the results to be biased in favor of french cities. Eg: if I type "laval", I want Laval, France to show up first, then Laval, Canada.
Specifying region or language, region or hl in the include script doesn't help. How can I bias the results towards france ?
You have to use location biasing:
Change:
var autocomplete = new google.maps.places.Autocomplete(input);
to:
var autocomplete = new google.maps.places.Autocomplete(input,
{componentRestrictions: {country: 'fr'}});
Edit: componentsRestrictions actually restricts the results in a specific country. To bias the results instead (results from others countries are still shown, but with lower priority), do this:
Grab sw and ne lat/lng here
var southWest = new google.maps.LatLng(42.97250, -3.82324);
var northEast = new google.maps.LatLng(51.64529, 5.49316);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
var autocomplete = new google.maps.places.Autocomplete(input, {bounds: bounds});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
//...
});
Related
I would like to add a click event to (subsequently) clustered icons on a leaflet map (using the Leaflet.markercluster plugin). The event itself works, but the alert always yields the very last element of the array for every icon that is clicked. I don't see the reason. declaring 'marker' as array did not change the result.
map.clearLayers;
var marker = [];
var markers = L.markerClusterGroup({
disableClusteringAtZoom: 10,
spiderfyOnMaxZoom: true,
chunkedLoading: true
});
for (id in reclist) {
var posn = reclist[id]['info'][1];
var pose = reclist[id]['info'][2];
var title = reclist[id]['info'][0];
var mapicon = L.icon({iconUrl: 'url of icon');
marker[id] = new L.marker(new L.LatLng(posn, pose), {icon: mapicon})
.on('click', function(){alert(title)});
markers.addLayer(marker[id]);
}
map.addLayer(markers);
There are special events for that: see documentation
markers.on('clusterclick', function() {});
Note that it is one event for your cluster. So it is NOT defined in your loop.
var markers = L.markerClusterGroup({ ... });
markers.on('clusterclick', function() { ... });
for (id in reclist) { ... }
In case I misunderstood your question and you want to define a click event for each markers: if you want to display title, you cannot use the variable as you do. Should do like this:
var title = reclist[id]['info'][0];
var marker = new L.marker(new L.LatLng(posn, pose), {icon: mapicon});
marker.title = title;
marker.on('click', function(e){alert(e.target.title)});
Here is an example
I have integrated a Google Map on my page and add a search box to it with the following code:
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
});
Currently this give me a search box with autocompletion list, which is good. But I have to click on a item of this list to go to the location. If I just type something in the input an hit enter, nothing happened..
Any help ?
Thanks !
Try changing
var searchBox = new google.maps.places.SearchBox(input);
to
var autocomplete = new google.maps.places.Autocomplete(input);
function dest()
{
var options = {
types: ['establishment']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.bindTo('bounds', map);
var place = autocomplete.getPlace();
var cd= place.geometry.location;
}
But I am getting Error on execution as:
place is undefined.
**(
TypeError: place is undefined
var cd= place.geometry.location;
)**
and I am defining my script as
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
Check out https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete for an example of how best to use Autocomplete in the Maps API.
autocomplete.getPlace() will not return a valid Place object until the user has entered one. You can tell when this happens by listening to the place_changed event on the autocomplete object.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
console.log(autocomplete.getPlace());
}
Users search my map with the Google places API which adds markers to my map. I have a click event inside each markers infowindow to get directions to that marker.
How do I pass the coordinates of the selected marker to my google directions service request?
So far I declared var placeLoc = null; as a global variable. I defined placeLoc=place.geometry.location; inside my create marker function. Then I have:
function calcRoute() {
var start = myLatLng;
var end = placeLoc;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.BICYCLING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
The function renders directions to the wrong marker. I am guessing that it is just giving directions to the first marker in the array returned after the search and not the actual marker I selected. How do I provide the directions request the coordinates of a selected marker?
Below is the code that places the search results into the place variable:
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
// alert("getPlaces returns "+places.length+" places");
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(null);
}
gmarkers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var place = places[i];
createMarker(place);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
// if (markers.length == 1) map.setZoom(17);
});
Something like this?
function createMarker(options) {
var marker = new google.maps.Marker(options);
google.maps.event.addListener(marker, 'click', function() {
placeLoc = marker.getPosition();
calcRoute();
});
return marker;
}
Right now, the autocomplete box works just fine when I click on the location, but when I press down, highlight the location that I want to go to, and press enter, it simply goes back to the home location of the map. Any insights on this? I call this function in initialize(). I'm lost as to what I possibly did wrong. Is this just a google api bug? If so, any insights as to how to work around it?
function setupAutoComplete() {
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, -180),
new google.maps.LatLng(90, 180));
var input = document.getElementById('placeSearch');
var options = {
bounds: defaultBounds,
types: ['(regions)']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
alert('hi');
removeAllOverlays();
var place = autocomplete.getPlace();
var mapCenter = place.geometry.location;
var colLat = mapCenter.lat() - (halfPoints)*latSeparation;
var colLng = mapCenter.lng() - (halfPoints)*lngSeparation;
var tempStart = new google.maps.LatLng(colLat, colLng);
map.setCenter(mapCenter);
pointArray[0][0] = tempStart;
reService();
mapSearch();
drawBounds();
});
}
Thanks so much!
I guess the input#placeSearch is placed inside a <form>.
You submit the form when you press [ENTER].
You may either remove the surrounding form or cancel the submission by adding:
onsubmit="return false"
...to the form-element.
I just hit this issue and went with the following, as I do want to submit the form at a later stage. This code is from google groups.
var input = document.getElementById('create-location');
var options = {
//types: ['(cities)'],
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addDomListener(input, 'keydown', function(e) {
if (e.keyCode == 13)
{
if (e.preventDefault)
{
e.preventDefault();
}
else
{
// Since the google event handler framework does not handle early IE versions, we have to do it by our self. :-(
e.cancelBubble = true;
e.returnValue = false;
}
}
});