Databases
StackOverflow2013
Postsdbo
POhtml code for Google Maps directions not working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhtml code for Google Maps directions not working
    text
    copied!<p>I'm trying to allow the user to enter 2 cities, using google's Autofill, and then draw the line between them on Google Maps. The autofill works fine for both boxes. The starting location works ( when the user enters a city, the map zooms in to that city and the marker appears ), but nothing happens when the end location is entered. If anyone see's what the problem in, I would greatly appreciate some advice. </p> <p><em><strong>Directions.html</em></strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Google Maps JavaScript API v3 Example: Places Autocomplete&lt;/title&gt; &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"&gt;&lt;/script&gt; &lt;style&gt; body { font-family: sans-serif; font-size: 14px; } #lred { color: #FF0000;} #map-canvas { height: 400px; width: 600px; margin-top: 0.6em; } start {border: 1px solid rgba(0, 0, 0, 0.5);} start.notfound { background-color: #F5A9A9; } end {border: 1px solid rgba(0, 0, 0, 0.5);} end.notfound { background-color: #F5A9A9; } &lt;/style&gt; &lt;script&gt; var directionDisplay; var directionsService = new google.maps.DirectionsService(); function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var mapOptions = { center: new google.maps.LatLng(39.8282, -98.5795), zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); var options = { types: ['(cities)'], componentRestrictions: {country: 'us'} }; var start = document.getElementById('start'); var sAutocomplete = new google.maps.places.Autocomplete(start, options); var end = document.getElementById('end'); var eAutocomplete = new google.maps.places.Autocomplete(end, options); sAutocomplete.bindTo('bounds', map); eAutocomplete.bindTo('bounds', map); var infowindow = new google.maps.InfoWindow(); var marker = new google.maps.Marker({ map: map }); google.maps.event.addListener(sAutocomplete, 'place_changed', function() { infowindow.close(); marker.setVisible(false); start.className = ''; var place = sAutocomplete.getPlace(); // Inform the user that the place was not found and return. if (!place.geometry) { start.className = 'notfound'; return; } else { map.setCenter(place.geometry.location); map.setZoom(6); // Why 17? Because it looks good. } var image = { 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(35, 35) }; marker.setIcon(image); marker.setPosition(place.geometry.location); marker.setVisible(true); }); } function calcRoute() { var start2 = document.getElementById("start").value; var end2 = document.getElementById("end").value; var request = { origin:start2, destination:end2, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } google.maps.event.addDomListener(window, 'load', initialize); &lt;/script&gt; &lt;/head&gt; &lt;body onload="initialize()"&gt; &lt;div&gt; &lt;input id="start" onchange="calcRoute();" type="text" size="50"&gt; &lt;input id="end" onchange="calcRoute();" type="text" size="50"&gt; &lt;/div&gt; &lt;div id="map-canvas"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload