//For TextBox Search..............
google.maps.event.addDomListener(window, 'load', function () {
var places = new google.maps.places.Autocomplete(document.getElementById('txtFrom'));
google.maps.event.addListener(places, 'place_changed', function () {
var place = places.getPlace();
});
var places1 = new google.maps.places.Autocomplete(document.getElementById('txtTo'));
google.maps.event.addListener(places1, 'place_changed', function () {
var place1 = places1.getPlace();
});
});
function calculateRoute(rootfrom, rootto) {
// Center initialized to Naples, Italy
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(40.84, 14.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("DivMap"), myOptions);
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: rootfrom,
destination: rootto,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(
directionsRequest,
function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
new google.maps.DirectionsRenderer({
map: mapObject,
directions: response
});
}
else
$("#lblError").append("Unable To Find Root");
}
);
}
$(document).ready(function () {
// If the browser supports the Geolocation API
if (typeof navigator.geolocation == "undefined") {
$("#lblError").text("Your browser doesn't support the Geolocation API");
return;
}
$("#calculate-route").submit(function (event) {
event.preventDefault();
calculateRoute($("#txtFrom").val(), $("#txtTo").val());
});
});
#DivMap
{
border: 1px solid Black;
width: 500px;
height: 400px;
margin-top: 30px;
margin-left: 32%;
}
<!--<script src="http://maps.google.com/maps/api/js?sensor=true"></script> REMOVED -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<div style="font-size: 30px; margin: 15px; padding: 15px;">
Get Direction In Google Map</div>
<hr />
<br />
<div>
<label for="txtFrom">
Root From:</label>
<input type="text" id="txtFrom" name="txtFrom" required="required" placeholder="Location From"
size="40" />
<label for="txtTo">
Root To:</label>
<input type="text" id="txtTo" name="txtTo" required="required" placeholder="Location To"
size="40" />
<br />
<br />
<input type="submit" />
<input type="reset" />
<p id="lblError" style="color: Red; font-size: 17px;" />
</div>
<div id="DivMap">
</div>
So I found this source code from the following website for drawing a route line between two geographic locations in google maps using the directions API: http://www.codescratcher.com/javascript/get-directions-google-map-api-using-javascript/
I followed the step-by-type guide and did everything as follows. It seems that there is something wrong with this code. I've tried solving these issues, but it didn't work for me. I think there is something wrong with the API key. Anyone can figure what is causing these issues? Thanks :)