I am trying to install a service on my card but cannot make it work. Here is the html:
<div> <span class="bold">From:</span> <input id="start" type="text" size="60" maxlength="150" /> <span class="bold">To:</span> <input type="text" disabled="disabled" size="<?php echo $address_length;?>" value="<?php echo $address ;?>"/> <input id="end" type="hidden" value="<?php echo $latlng ;?>" /><br/><br/> <span class="bold">Mode of Travel:</span> <select id="mode"> <option value="DRIVING">Driving</option> <option value="WALKING">Walking</option> <option value="BICYCLING">Bicycling</option> </select> <input type="button" class="submit" value="Find Directions!" onclick="calcRoute()";/> </div><br class="clear" /> <div class="inline"> <div id="mapDiv" style="width:950px; height:550px; border:1px solid #FD5F00;"> <noscript><h3 style="color:red; margin:150px 0 0 250px">Oppps. Please activate JavaScript to view this map</h3></noscript> </div> </div> </div>
And at the bottom of the page I have built-in Javascript
$(function() { var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; initialize(); }); function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var latlng = new google.maps.LatLng(<?php echo $latlng; ?>); var myOptions = { zoom:15, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng } map = new google.maps.Map(document.getElementById("mapDiv"), myOptions); directionsDisplay.setMap(map); } function calcRoute() { var selectedMode = document.getElementById("mode").value; var start = document.getElementById("start").value; var end = document.getElementById("end").value; var request = { origin:start, destination:end, travelMode: google.maps.TravelMode[selectedMode] }; directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } }); }
You can see that latlng is populated from a PHP variable. It seems that everything is working correctly, the initial load on the card, etc.
In the JS calcRoute function, if I warn varr values using
alert(request.toSource());
I get all the correct data (start, start and end), but the very next line is an error, my JS error is "directionService is not defined".
I’m looking for a watch, trying to fix it, but I can’t understand what the problem is, although it is about as simple as a google map :-(
If anyone has any thoughts, I would be very kind, it made me get lost!