How to point on google maps from point A to point B with specific location?
Here is the google maps in order to point from start location to our destination on google maps include they draw on road:
HTML
Here is the google maps in order to point from start location to our destination on google maps include they draw on road:
HTML
<div id="floating-panel"><b>Mode of Travel: </b></div>
<select id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
</div>
<div id="map"></div>
CSS
<style>JavaScript
#map {
width:100%;
height: 650px;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
<script>function initMap() {
var start_long = "104.4545";
var start_lat = "11.2132";
var s_longs = "104.4545";
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: 37.77, lng: -122.447}
});
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay);
document.getElementById('mode').addEventListener('change', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var start_long = "104.1252";
var start_lat = "11.1254";
var s_longs = parseFloat(start_long);
var s_lat = parseFloat(start_lat);
var end_long = "104.2358";
var end_lat = "11.1245";
var e_longs = parseFloat(end_long);
var e_lat = parseFloat(end_lat);
var selectedMode = document.getElementById('mode').value;
directionsService.route({
origin: {lat:s_lat, lng: s_longs }, // Haight.
destination: {lat:e_lat , lng: e_longs}, // Ocean Beach.
// Note that Javascript allows us to access the constant
// using square brackets and a string value as its
// "property."
travelMode: google.maps.TravelMode[selectedMode]
}, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap">
</script>