Basically, I am trying to achieve this thing. 1 - Get Lat/long from MySQL using AJAX 2 - Draw Route on Map using direction service and waypoints technique. 3 - When a user clicks on map marker each marker has a clickable function when the marker is clicked location detail will be fetched in a div underneath the map, basically I need to handle click listener on each marker click so that I can perform my desired actions on those clicks.
What I achieve is that:
1 - Able to fetch lat/long using ajax request on page load from MySQL using PHP REST API.
2 - Pass Those Markers to map and draw a route using direction Service. Screenshot for idea reference https://i.sstatic.net/TtPYn.jpg
var i = 0;
var ACoptions = {
componentRestrictions: {
country: "PK"
}
};
var map;
var directionsDisplay;
var directionsService;
function initialize(directionsService, directionsDisplay , waypointElmts , origin1 , designation1) {
directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions:{
strokeColor:"#00a54f",
strokeOpacity: 1,
strokeWeight:5
}
});
directionsService = new google.maps.DirectionsService();
document.getElementById( 'map' ).style.display = "block";
var melbourne = new google.maps.LatLng(30.3753,69.3451);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: melbourne,
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay , waypointElmts , origin1 , designation1);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay , waypointElmts , origin1 , designation1) {
var waypts = [];
for (var i = 0; i < waypointElmts.length; i++) {
waypts.push({
location: waypointElmts[i],
stopover: true,
});
}
directionsService.route({
origin: origin1,
destination: designation1,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
renderDirectionsPolylines(response);
}
else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
wait = true;
setTimeout("wait = true", 2000);
//alert("OQL: " + status);x
} else {
toastr.error('Directions request failed due to '+status,'Error!',
{positionClass: 'toast-top-full-width', containerId: 'toast-top-full-width'});
}
});
}
$.ajax({
type: "POST",
url: "ajax-requests/ajaxm.php",
dataType: "json",
data: { what_need : 'detail_routesheet'
,_token: '<?php echo $_SESSION['_token'];?>',
route_id: <?php echo $_GET['routeid']?>
},
success: function(response){
var len = response.length;
for(var i=0; i<len; i++){
var start_location = response[i].start_location;
var end_location = response[i].end_location;
var waypoints = response[i].waypoints;
var datetime = response[i].datetime;
}
var array = $.map(waypoints, function(value, index) {
return [value];
});
function firstAndLast(array) {
var firstItem = array[0];
var lastItem = array[array.length-1];
var objOutput = {
start : firstItem,
end : lastItem
};
return objOutput;
}
var display = firstAndLast(array);
var start_locationlatlng = display.start;
var end_locationlatlng = display.end;
//calculateAndDisplayRoute(directionsService, directionsDisplay ,waypoints , originmap , designationmap);
array.shift();
array.pop();
initialize(directionsService, directionsDisplay , array , start_locationlatlng , end_locationlatlng)
}
});
1 - When User Click I can handle the click event on each marker generated by direction service waypoint
The DirectionsRenderer has a suppressMarkers property. Use it to remove the markers automatically added by the Directions service.
Then create your own markers for whatever point(s) you need (start and/or end and/or waypoints).
Below is a working snippet that creates clickable markers with an Infowindow for every point.
var map, infowindow, directionDisplay, directionsService;
function initialize() {
directionsService = new google.maps.DirectionsService();
infowindow = new google.maps.InfoWindow();
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
var myOptions = {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var waypts = [];
stop = new google.maps.LatLng(51.943571, 6.463856)
waypts.push({
location: stop,
stopover: true
});
stop = new google.maps.LatLng(51.945032, 6.465776)
waypts.push({
location: stop,
stopover: true
});
stop = new google.maps.LatLng(51.945538, 6.469413)
waypts.push({
location: stop,
stopover: true
});
stop = new google.maps.LatLng(51.947462, 6.467941)
waypts.push({
location: stop,
stopover: true
});
stop = new google.maps.LatLng(51.945409, 6.465562)
waypts.push({
location: stop,
stopover: true
});
stop = new google.maps.LatLng(51.943700, 6.462096)
waypts.push({
location: stop,
stopover: true
});
var start = new google.maps.LatLng(51.943382, 6.463116);
var end = new google.maps.LatLng(51.946199, 6.461947);
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
// Create custom markers for start / end locations
createMarker(start);
createMarker(end);
// Create custom markers for each waypoint
for (var i = 0; i < waypts.length; i++) {
createMarker(waypts[i].location);
}
directionsDisplay.setDirections(response);
}
});
}
function createMarker(latlng) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('Clicked marker at ' + this.position.toString());
infowindow.open(map, this);
});
}#map-canvas {
height: 180px;
}<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>