2

El código en Pasar el resultado de Google Maps SearchBox al servicio de direcciones devuelve el error

Error: { "message": "Script error.", "filename": "", "lineno": 0, "colno": 0 }

El cual fue reportado en https://meta.stackoverflow.com/q/326126/1595451. Como se menciona en la pregunta que el código fue tomado del ejemplo de la página de la API de Google Maps, hice mi propio intento de pasar el código de dicha fuente al stacksnippet (usan el mismo key del OP) y funciona correctamente:

Me parece que el error se debe a algo que toqueteó el OP mas allá de lo que menciona la pregunta, pero no me queda claro cómo interpretar el error y que puedo usar para encontrar el error sin tener que revisar línea por línea.


Mi adaptación de código del ejemplo de Google Maps API (no devuelve error, el error se observa en la pregunta referida)

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeControl: false,
    center: {lat: -33.8688, lng: 151.2195},
    zoom: 13
  });

  new AutocompleteDirectionsHandler(map);
}

 /**
  * @constructor
 */
function AutocompleteDirectionsHandler(map) {
  this.map = map;
  this.originPlaceId = null;
  this.destinationPlaceId = null;
  this.travelMode = 'WALKING';
  var originInput = document.getElementById('origin-input');
  var destinationInput = document.getElementById('destination-input');
  var modeSelector = document.getElementById('mode-selector');
  this.directionsService = new google.maps.DirectionsService;
  this.directionsDisplay = new google.maps.DirectionsRenderer;
  this.directionsDisplay.setMap(map);

  var originAutocomplete = new google.maps.places.Autocomplete(
      originInput, {placeIdOnly: true});
  var destinationAutocomplete = new google.maps.places.Autocomplete(
      destinationInput, {placeIdOnly: true});

  this.setupClickListener('changemode-walking', 'WALKING');
  this.setupClickListener('changemode-transit', 'TRANSIT');
  this.setupClickListener('changemode-driving', 'DRIVING');

  this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
  this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');

  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput);
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector);
}

// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) {
  var radioButton = document.getElementById(id);
  var me = this;
  radioButton.addEventListener('click', function() {
    me.travelMode = mode;
    me.route();
  });
};

AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) {
  var me = this;
  autocomplete.bindTo('bounds', this.map);
  autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    if (!place.place_id) {
      window.alert("Please select an option from the dropdown list.");
      return;
    }
    if (mode === 'ORIG') {
      me.originPlaceId = place.place_id;
    } else {
      me.destinationPlaceId = place.place_id;
    }
    me.route();
  });

};


AutocompleteDirectionsHandler.prototype.route = function() {
  if (!this.originPlaceId || !this.destinationPlaceId) {
    return;
  }
  var me = this;

  this.directionsService.route({
    origin: {'placeId': this.originPlaceId},
    destination: {'placeId': this.destinationPlaceId},
    travelMode: this.travelMode
  }, function(response, status) {
    if (status === 'OK') {
      me.directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
};
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#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);
}

#origin-input,
#destination-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 200px;
}

#origin-input:focus,
#destination-input:focus {
  border-color: #4d90fe;
}

#mode-selector {
  color: #fff;
  background-color: #4d90fe;
  margin-left: 12px;
  padding: 5px 11px 0px 11px;
}

#mode-selector label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}
<input id="origin-input" class="controls" type="text"
    placeholder="Enter an origin location">

<input id="destination-input" class="controls" type="text"
    placeholder="Enter a destination location">

<div id="mode-selector" class="controls">
  <input type="radio" name="type" id="changemode-walking" checked="checked">
  <label for="changemode-walking">Walking</label>

  <input type="radio" name="type" id="changemode-transit">
  <label for="changemode-transit">Transit</label>

  <input type="radio" name="type" id="changemode-driving">
  <label for="changemode-driving">Driving</label>
</div>

<div id="map"></div>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDcglr0mL358bvGoBXuKhftNS1MBz76Zhg&libraries=places&callback=initMap"
    async defer></script>

1 respuesta 1

1

Una de las cosas que puede ayudar es usar las herramientas del desarrollador del navegador. En el caso de usar Google Chrome, presiona F12 y mira la pestaña Consola. (Gracias a ArtEze quien en un comentario del chat lo sugirió).

En el caso referido, se muestra que hay 9 errores, dos de los cuales se deben a error de sintaxis.

Uncaught TypeError: google.maps.places.Searchbox is not a constructor
Uncaught TypeError: google.maps.places.searchBox is not a constructor

De acuerdo a la referencia oficial, las sintaxis correcta es google.maps.places.SearchBox

Sin embargo, al tratar de "reproducir" la pantalla mostrada arriba, no he logrado obtener una similar. Aparentemente la pregunta no ha tenido cambios, así que "algo" seguramente metió "ruido".

Debes iniciar sesión para responder a esta pregunta.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta .