I want to use this type of map in my website for map journey with checkpoint are show in below the image and set the intent in their points. use the dynamically change the way-points using the array.
Here is my code
/**
* This is for used map of Journey
*
* @params id as Journeys id
* @params request as Data of Journeys
*
* return Google Map Data
*/
function journeyMap(id,request) {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: "#F24639",
strokeWeight: 5
}
});
var latlng = new google.maps.LatLng(20.5937,78.9629);
var myOptions = {
zoom : 4,
center : latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "landscape.man_made",
"stylers": [
{ "color": "#ffffff" },
{ "visibility": "off" }
]
},{
"featureType": "water",
"stylers": [
{ "color": "#80C8E5" },
{ "saturation": 0 }
]
},{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#999999" }
]
}
,{
"elementType": "labels.text.stroke",
"stylers": [
{ "visibility": "off" }
]
}
,{
"elementType": "labels.text",
"stylers": [
{ "color": "#333333" }
]
}
,{
"featureType": "road.local",
"stylers": [
{ "color": "#dedede" }
]
}
,{
"featureType": "road.local",
"elementType": "labels.text",
"stylers": [
{ "color": "#666666" }
]
}
,{
"featureType": "transit.station.bus",
"stylers": [
{ "saturation": -57 }
]
}
,{
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
}
]
};
var map = new google.maps.Map(document.getElementById("map_"+id),myOptions);
directionsDisplay.setMap(map);
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}//end journeyMap()
This is my php code
<?php
$originCityName = !empty($journeys['start_city_name']) ? $journeys['start_city_name'] : '';
$destinationCityName = !empty($journeys['end_city_name']) ? $journeys['end_city_name'] : '';
?>
<!-- #### This is used for the Google Journeys Map : START #### -->
<script>
var request_<?php echo !empty($journeys['id']) ? $journeys['id'] : ''; ?> = {
origin: '<?php echo $originCityName; ?>',
destination: '<?php echo $destinationCityName; ?>',
//~ waypoints: [{
//~ location:"Ajmer",
//~ stopover:true,
//~ }],
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
google.maps.event.addDomListener(window, "load", function () { journeyMap(<?php echo !empty($journeys['id']) ? $journeys['id'] : '' ?>,request_<?php echo !empty($journeys['id']) ? $journeys['id'] : '' ?>); });
</script>
<!-- #### This is used for the Google Journeys Map : END #### -->
<div id="map_<?php echo $journeys['id']; ?>" style="height: 340px;"></div>
