CODEWITHSUNDEEP
htmlcssapigoogle-maps
user2228503
user2228503

Reputation: 77

html code for Google Maps directions not working

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.

Directions.html

<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

<style>
  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;
        }
 </style>

 <script>
  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);
  </script>
 </head>
 <body onload="initialize()">
 <div>
  <input id="start" onchange="calcRoute();" type="text" size="50">
  <input id="end" onchange="calcRoute();" type="text" size="50">
</div>
<div id="map-canvas"></div>
</body>
</html>

Upvotes: 1

Views: 1167

Answers (1)

Michael Geary
Michael Geary

Reputation: 28880

Load your HTML file in a syntax checking editor such as Komodo Edit. It identified the errors in these two lines:

<input id="start" onchange="calcRoute(); type="text" size="50">
<input id="end" onchange="calcRoute(); type="text" size="50">

Do you see it? There are missing quote marks in both tags.

After that is fixed, your page behaves differently. Now it does call the calcRoute() function, which wasn't getting called at all before. But there is an error shown in the JavaScript console:

Uncaught ReferenceError: directionsService is not defined

And sure enough, I don't see directionsService defined anywhere in the code.

Over to you...

Upvotes: 1

Related Questions