<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>How to get a Google Map Driving Direction using Javascript.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=ENTER_YOUR_KEY_HERE"></script>
<script type="text/javascript" src="googlemap.js"></script>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<table class="tbl-entry">
<tr>
<td>Starting Point</td>
<td><input type="text" id="txtStartingPoint" class="input-entry"/></td>
</tr>
<tr>
<td>Destination Point</td>
<td><input type="text" id="txtDestinationPoint" class="input-entry"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnQuery" value="Query" onclick="bytutorialMap.getGeolocationData()"/> <input type="button" id="btnClear" value="Clear" onclick="bytutorialMap.clearEntries()"/> </td>
</tr>
</table>
<table class="tbl-map">
<tr>
<td><div id="map"></div></td>
<td><div id="panel-direction"></div></td>
</tr>
</table>
</body>
</html>
body{
font-family:Arial;
font-size:14px;
}
table.tbl-entry{
padding:5px 10px;
}
.input-entry{
padding:5px;
border-radius:5px;
min-width:300px;
}
table.tbl-map{
width:100%;
}
table.tbl-map td{
width:50%;
vertical-align:top;
padding:10px;
}
#map{
height:500px;
}
#panel-direction{
height:500px;
overflow-x:hidden;
}
//Init the geocoder library
var geocoder = new google.maps.Geocoder();
//array to hold the geo address
var geoAddress = [];
//function framework
bytutorialMap = {
initNavigateMap: function (mapID, panelDirectionID, startLatitude, startLongitude, endLatitude, endLongitude) {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
//initialize the map
var map = new google.maps.Map(document.getElementById(mapID), {
zoom: 7,
center: {lat: startLatitude, lng: startLongitude}
});
//clear the direction panel
$("#" + panelDirectionID).html("");
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(panelDirectionID));
//prepare the latitude and longitude data
start = startLatitude + ", " + startLongitude;
end = endLatitude + ", " + endLongitude;
bytutorialMap.calculateAndDisplayRoute(directionsService, directionsDisplay, start, end);
},
//function to get the driving route
calculateAndDisplayRoute: function (directionsService, directionsDisplay, start, end) {
directionsService.route({
origin: start,
destination: end,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
alert('Directions request failed due to ' + status);
}
});
},
//get geolocation based on address
codeAddress: function (address) {
return new Promise(function(resolve, reject){
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
resolve(results);
} else {
reject(Error("Geocode for address " + address + " was not successful for the following reason: " + status));
}
});
});
},
//function to get geolocation of both addresses.
getGeolocationData: function(){
if($("#txtStartingPoint").val() != "" && $("#txtDestinationPoint").val() != ""){
geoAddress = [];
bytutorialMap.codeAddress($("#txtStartingPoint").val()).then(function(response){
var geoData = {
latitude: response[0].geometry.location.lat(),
longitude: response[0].geometry.location.lng()
}
geoAddress.push(geoData);
}).then(function(){
return bytutorialMap.codeAddress($("#txtDestinationPoint").val()).then(function(response){
var geoData2 = {
latitude: response[0].geometry.location.lat(),
longitude: response[0].geometry.location.lng()
}
geoAddress.push(geoData2);
});
}).then(function(){
bytutorialMap.initNavigateMap("map", "panel-direction", geoAddress[0].latitude, geoAddress[0].longitude, geoAddress[1].latitude, geoAddress[1].longitude);
});
}else{
alert("Please enter both addresses");
}
},
//clear entries and map display
clearEntries: function(){
$("#txtStartingPoint, #txtDestinationPoint").val("");
$("#map, #panel-direction").html("");
}
}
