Hello devs,
In this tutorial, I will show you an example of how we can draw a google map from point a to point b with a direction route. If you don't know google maps api draw route between multiple points then this example is for you. I will use direction api to draw this map with to point.
So from this direction map example, I will draw line from point a to point b using latitude and longitude with the static value. You can make it dynamic with your latitude and longitude. So from this example you will learn how to draw a google map with two point with polygonal line.
See the example preview:
First create a div with this id like:
And use this javascript api code to generate this above map:
function initMap() {
var pointA = new google.maps.LatLng(51.7519, -1.2578),
pointB = new google.maps.LatLng(50.8429, -0.1313),
myOptions = {
zoom: 7,
center: pointA
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
// Instantiate a directions service.
directionsService = new google.maps.DirectionsService,
directionsDisplay = new google.maps.DirectionsRenderer({
map: map
}),
markerA = new google.maps.Marker({
position: pointA,
title: "point A",
label: "A",
map: map
}),
markerB = new google.maps.Marker({
position: pointB,
title: "point B",
label: "B",
map: map
});
// get route from A to B
calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
directionsService.route({
origin: pointA,
destination: pointB,
avoidTolls: true,
avoidHighways: false,
travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
initMap();
Read also: Polygonal Google Map in Laravel with Multiple Markers
Hope it can help you.
#google-map #javascript