Estoy trabajando en un proyecto con la API de Google Maps
, me he estado guiando con este Ejemplo que da la misma página de la API "Place Autocomplete and Directions"
Trate de hacer el mio guiándome con el ejemplo, remplazando la clase Autocomplete
por la clase SearchBox
pero no pude lograr nada....
Aquí les dejo el código que estuve haciendo, agregue dos cuadros de búsqueda que funcionan con la clase SearchBox
pero no se como implementar correctamente el servicio de indicaciones para que funcione como el ejemplo anterior que tiene la clase Autocomplete
.
Si me pudieran dar un ejemplo de como implementar ese servicio en el código que trate de hacer se los agradecería bastante.
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: 'roadmap'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var input2 = document.getElementById('pac-input2');
var searchBox = new google.maps.places.SearchBox(input);
var searchBox2 = new google.maps.places.SearchBox(input2);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input2);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
searchBox2.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
var markers2 = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox2.addListener('places_changed', function() {
var places2 = searchBox2.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers2.forEach(function(marker) {
marker2.setMap(null);
});
markers2 = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers2.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input,
#pac-input2 {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus,
#pac-input2:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#target {
width: 345px;
}
<input id="pac-input" class="controls center" type="text center" placeholder="Inicio">
<input id="pac-input2" class="controls center" type="text center" placeholder="Fin">
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDcglr0mL358bvGoBXuKhftNS1MBz76Zhg&libraries=places&callback=initMap"
async defer></script>
"{ "message": "Uncaught ReferenceError: searchBox2 is not defined", "filename": "https://stacksnippets.net/js", "lineno": 88, "colno": 1 }
agregué el código HTML y CSS de tu pregunta original. Ahora se muestra otro error. En un momento publicaré al menos una respuesta parcial.