Я реализую автозаполнение API Карт Google, чтобы он смотрел внутри многоугольника координат для адреса и проверял, что он находится внутри него.
Проблема в том, что он работает, пока я не введу адрес (в качестве примера) "Сан-Хуан 2638", и , если я выберу его, нажав на предложения , результатом будет поиск по карте в Соединенных Штатах, когда это должно быть в Росарио, Аргентина.
Я надеюсь, вы можете помочь мне, потому что я не могу найти ошибку
Я оставляю вам полный код того, что я делаю
JS:
/*=============================================
GOOGLE AUTOCOMPLETE + MAP
=============================================*/
function initAutocomplete() {
var pac_input = document.getElementById('registroDireccion');
var autocomplete_options = {
types: ['address'],
componentRestrictions: {country: "ar"}
};
/*=============================================
SELECTION OF FIRST SUGGESTION WHEN GIVING "ENTER"
=============================================*/
(function pacSelectFirst(input) {
// store the original event binding function
var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;
function addEventListenerWrapper(type, listener) {
// Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
// and then trigger the original listener.
if (type == "keydown") {
var orig_listener = listener;
listener = function(event) {
var suggestion_selected = $(".pac-item-selected").length > 0;
if (event.which == 13 && !suggestion_selected) {
var simulated_downarrow = $.Event("keydown", {
keyCode: 40,
which: 40
});
orig_listener.apply(input, [simulated_downarrow]);
}
orig_listener.apply(input, [event]);
};
}
_addEventListener.apply(input, [type, listener]);
}
input.addEventListener = addEventListenerWrapper;
input.attachEvent = addEventListenerWrapper;
var autocomplete = new google.maps.places.Autocomplete(input, autocomplete_options);
})(pac_input);
//var autocomplete = new google.maps.places.Autocomplete(input, options);
/*=============================================
VALIDATE ADDRESS WITHIN THE COORDINATE POLYGON
=============================================*/
// We create the instace bounds
var bounds = new google.maps.LatLngBounds();
// We extract the coordinates
var coords = [
{"lat": -32.9524231, "lng": -60.6682936},{"lat": -32.9719713, "lng": -60.67327},{"lat": -32.9741199, "lng": -60.6609489},{"lat": -32.9672002, "lng": -60.6591224},{"lat": -32.9717621, "lng": -60.6342073},{"lat": -32.9694741, "lng": -60.6335479},{"lat": -32.9715067, "lng": -60.6218164},{"lat": -32.9680472, "lng": -60.6205835},{"lat": -32.9630917, "lng": -60.6216094},{"lat": -32.958511, "lng": -60.6209314},{"lat": -32.9521298, "lng": -60.624212},{"lat": -32.9520442, "lng": -60.6251776},{"lat": -32.9503966, "lng": -60.6262076},{"lat": -32.9501265, "lng": -60.6256068},{"lat": -32.9462216, "lng": -60.6283345},{"lat": -32.9380717, "lng": -60.636903},{"lat": -32.9317529, "lng": -60.6468345},{"lat": -32.9265583, "lng": -60.6577651},{"lat": -32.9176559, "lng": -60.6700872},{"lat": -32.9182323, "lng": -60.6901178},{"lat": -32.9197859, "lng": -60.6891415},{"lat": -32.9284696, "lng": -60.6885702},{"lat": -32.9282011, "lng": -60.6780258},{"lat": -32.9294789, "lng": -60.6778898},{"lat": -32.9294001, "lng": -60.6743024},{"lat": -32.9333037, "lng": -60.6713756},{"lat": -32.9334751, "lng": -60.6734615},{"lat": -32.9351777, "lng": -60.6738827},{"lat": -32.9344493, "lng": -60.677983},{"lat": -32.9377555, "lng": -60.6788352},{"lat": -32.9360567, "lng": -60.6882969},{"lat": -32.9374164, "lng": -60.6886667},{"lat": -32.9364591, "lng": -60.6936267},{"lat": -32.9405789, "lng": -60.6936545},{"lat": -32.9481519, "lng": -60.6934212}
]
// We add the coordinate to the bounds
.map(function(coord) {
bounds.extend(coord);
return coord;
});
// We create the polygon
var area = new google.maps.Polygon({
paths: coords,
strokeColor: '#F99830',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#F99830',
fillOpacity: 0.30,
draggable: false
});
// We created the map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12.6,
center: bounds.getCenter(), // Centramos el mapa al area
mapTypeId: 'terrain',
disableDefaultUI: true
});
// We add the area to the map
area.setMap(map);
var geocoder = new google.maps.Geocoder();
jQuery(document).ready(function() {
$('#registroDireccion').on('change', function() {
var place = $(this).val().trim();
if (!place) {
return;
}
geocoder.geocode({
address: place
},
function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var result = results[0];
var marker = new google.maps.Marker({
position: result.geometry.location,
map: map,
label: place
});
if (google.maps.geometry.poly.containsLocation(result.geometry.location, area)) {
$("#registroDireccion").parent().before('<div class="alert alert-success"><strong>GREAT!</strong> Our delivery system arrives at your address.</div>');
} else {
$("#registroDireccion").parent().before('<div class="alert alert-success"><strong>WHAT EVIL!</Strong> Our delivery system does NOT arrive at your address.</div>');
document.getElementById("registroDireccion").value = "";
}
}
});
})
});
}
HTML
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="registroDireccion" name="registroDireccion" placeholder="Dirección de envío" required>
</div>
</div>
<div>
<button type="button" id="mostrarMapa" class="btn btn-default btn-xs pull-left">Mostrar zona de envío</button>
</div>
<div class="col-sm-12" id="map"></div>
API СКРИПТА GOOGLE:
<script src="https://maps.googleapis.com/maps/api/js?library=geometry&key=AIzaSyBDJVJOqxxr1PfcuzMZWYOut0lkGDW1YsU&libraries=places&callback=initAutocomplete" async defer></script>