Reputation: 25
I have a page where the user has to select a place on the map. He can still search for it.
While moving the marker I want him to know where "is he at" and that value is also stored in a hidden input, just like the latitude and longitude so It can later be used to insert the values in the database.
Everything Works fine, except that after I inserted the geocoding feature (may be a coincidence) the searchbox does not work anyome. It shows the results, but when you click nothing happens. I tried removing the geocoding but still don't work.
I'm also getting OVER_QUERY_LIMIT.
Here's my code:
function initialize() {
var geocoder = new google.maps.Geocoder();
var myLatlng = new google.maps.LatLng(-1.456688, -48.477586);
var mapOptions = {
zoom: 14,
minZoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true,
title: 'Hello World!'
});
google.maps.event.addListener(marker, 'position_changed', function() {
var lat = this.getPosition().lat();
var lng = this.getPosition().lng();
var latlng = new google.maps.LatLng(lat, lng);
document.getElementById('latitude').value = lat;
document.getElementById('longitude').value = lng;
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
document.getElementById('enderec').value = results[0].formatted_address;
$('.onde-esta').html(results[0].formatted_address);
} else {
alert("Sem resultados");
}
} else {
alert("Geocoder falhou: " + status);
}
});
});
// Create an Autocomplete and link it to the UI element.
var input = /** @type {HTMLInputElement} */ (
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */
(input), {
types: ['geocode']
});
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'place_changed', function() {
var place = this.getPlace();
document.getElementById('enderecoo').value = place.formatted_address;
//when place has been found
if (place.geometry) {
marker.setOptions({
title: place.name,
position: place.geometry.location
});
if (place.geometry.viewport) {
marker.getMap().fitBounds(place.geometry.viewport);
} else {
marker.getMap().setCenter(place.geometry.location);
}
}
else {
marker.setOptions({
title: null
});
alert('Lugar não encontrado');
}
});
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Is it because everytime the user moves the marker it geocodes? Is there anyway I can make it geocode only when the user DROPS the marker? Thanks in advance, Mateus
Upvotes: 0
Views: 78
Reputation: 1546
Yup. I think you're hitting too much or too fast the geocode api. Try using it only when the use drop the marker.
google.maps.event.addListener(Marker, "dragend", function(event) {
/*
User stopped dragging.
*/
});
Upvotes: 1