I can show markers from database on the map and get user location. What i want is to add get direction button on the infowindow which gives the direction of that maker from the user location. Is it possible? if yes then please share the logic. Here is my js for showing markers and user location.
<script type='text/javascript'>
<?php
echo "var markers=$markers;n";
?>
function initMap() {
var latlng = new google.maps.LatLng(25.5941, 85.1376);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
for( i = 0; i < markers.length; i++ ) {
lat = (markers[i].lat);
lng = (markers[i].lng);
name = (markers[i].name);
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
name:name,
map: map
});
google.maps.event.addListener( marker, 'click', function(e){
infowindow.setContent( this.name );
infowindow.open( map, this );
}.bind( marker ) );
}
infoWindow = new google.maps.InfoWindow();
const locationButton = document.createElement("button");
locationButton.textContent = "Locate Yourself";
locationButton.classList.add("custom-map-control-button");
map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
locationButton.addEventListener("click", () => {
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
infoWindow.setPosition(pos);
infoWindow.setContent("you are here");
infoWindow.open(map);
map.setCenter(pos);
},
() => {
handleLocationError(true, infoWindow, map.getCenter());
}
);
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
});
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(
browserHasGeolocation
? "Error: The Geolocation service failed."
: "Error: Your browser doesn't support geolocation."
);
infoWindow.open(map);
}
</script>
And also i want the distance matrix input boxes (sorry i dont know what its called but the input boxes to enter starting point and end point)and the transport mode selection only two walking or by bike.