Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.

Jquery

Jquery Training

Jquery training blog

Google map to find waypoints in directions via location

Google map to find way points via location on to given location .The following code is the direction waypoins with search auto complete. Only Google map api key is require to run the code Limits and Restrictions for Waypoints The following usage limits and restrictions are in waypoints: The maximum number of waypoints allowed is Continue Reading


Google map to find way points via location on to given location

.The following code is the direction waypoins with search auto complete. Only Google map api key is require to run the code

Limits and Restrictions for Waypoints

The following usage limits and restrictions are in waypoints:

The maximum number of waypoints allowed is 23 excluding the origin and destination when using the Directions service in the Google Maps JavaScript API .

The limits are the same for the Google Maps Directions API web service.
For the Google Maps Directions API web service, customers are allowed 23 waypoints, plus the origin, and destination.
Google Maps APIs Premium Plan customers are allowed 23 waypoints, plus the origin, and destination.
Waypoints are not supported for transit directions.

(Source : Google Maps APIs)

<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}

#right-panel select, #right-panel input {
font-size: 15px;
}

#right-panel select {
width: 100%;
}

#right-panel i {
font-size: 12px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
float: left;
width: 70%;
height: 100%;
}
#right-panel {
margin: 20px;
border-width: 2px;
width: 20%;
float: left;
text-align: left;
padding-top: 20px;
}
#directions-panel {
margin-top: 20px;
background-color: #FFEE77;
padding: 10px;
}
</style>
</head>
<body>

<div id="map"></div>
<div id="right-panel">
<div>
<b>Start:</b>
<input id="start" class="controls" type="text"
placeholder="Enter a location">

<br>

<b>End:</b>
<input id="end" class="controls" type="text"
placeholder="Enter a location">

<br>

<div class="input_fields_wrap">
<b>Via:</b>
<input id="waypoints_1" name="waypoints[]" class="waypoints" type="text"
placeholder="Enter a location">

</div>
<input type="submit" id="submit">&nbsp;<button class="add_field_button">Add More</button>
</div>
<div id="directions-panel"></div>
</div>

<script>

function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;

var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input =(document.getElementById('start'));
var autocomplete = new google.maps.places.Autocomplete(input);

var end =(document.getElementById('end'));
var autocomplete = new google.maps.places.Autocomplete(end);

var mid =(document.getElementById('waypoints_1'));
var autocomplete = new google.maps.places.Autocomplete(mid);

autocomplete.bindTo('bounds', map);

directionsDisplay.setMap(map);

document.getElementById('submit').addEventListener('click', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});

}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
$('.input_fields_wrap').find('input[id^="waypoints_"]').each(function(){

var checkboxArray = document.getElementById($(this).attr('id'));

if(checkboxArray.value!=''){
waypts.push({
location: checkboxArray.value,
stopover: true
})
}
});
/*for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected) {
waypts.push({
location: checkboxArray[i].value,
stopover: true
});
}
}*/

directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions-panel');
summaryPanel.innerHTML = '';
// For each route, display summary information.

var dset=0;
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
'</b><br>';
summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
summaryPanel.innerHTML += route.legs[i].distance.text + '<br>';
summaryPanel.innerHTML += 'Lat : ' +route.legs[i].start_location.lat() +'<br>';
summaryPanel.innerHTML += 'Long : ' +route.legs[i].start_location.lng() +'<br><br>';
}
summaryPanel.innerHTML += 'Lat : ' +route.legs[dset].end_location.lat() +'<br>';
summaryPanel.innerHTML += 'Long : ' +route.legs[dset].end_location.lng() +'<br><br>';
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initMap"
async defer></script>
<script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>

<script>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" id="waypoints_'+ x +'" onclick="call(this.id)" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
function call(id){
var mid =(document.getElementById(id));
var autocomplete = new google.maps.places.Autocomplete(mid);
}
</script>
</body>
</html>

for more details pls visit Google map directions waypoints

Please follow and like us:






About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts