I have this Javascript. It is finding and showing user the shorter path between two cities.
<?php
include 'includes/connection.php'; //database connection
?>
<!--////// \\\\\\\-->
<style>
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#map { width: 600px; height: 400px; border: 0px; padding: 0px; }
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initMap() {
directionsDisplay = new google.maps.DirectionsRenderer();
var slovakia = new google.maps.LatLng(48.850033, 21.6500523);
var mapOptions = {
zoom: 8,
center: slovakia
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start_position').value;
var end = document.getElementById('end_position').value;
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected == true) {
waypts.push({
location:checkboxArray[i].value,
stopover:true});
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, 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.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += '<b>Časť trasy: ' + 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><br>';
}
}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
And I have simple form to get start and end position. And button to draw a path on the map.:
</head>
<!--////// BODY \\\\\\\-->
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<form action="" method="GET">
<label for="start_position"><span>You travel from: <span class="required"></span></span><input name="start_position" type="text" maxlength="512" id="start_position" class="searchField"/></label>
<label for="end_position"><span>To: <span class="required"></span></span><input name="end_position" type="text" maxlength="512" id="end_position" class="searchField"/></label>
</form>
<input type="submit" value="Show map" onclick="calcRoute();">
<br><br>
<div id="map" style="float:left;"></div>
It show a map with selected path (without red circles):
I need to select atractions for example in area 20 km from path (red circles) from my database. In database every row has latitude,longitude GPS position.
This select i use to get atractions ONLY from city in start and end position. I need all atractions around path in area for example 20 km.:
if(!empty($end_position) || !empty($start_position)){
if($result = $conn->query("SELECT * FROM atractions where City = '$end_position' OR City = '$start_position'"));{
if($result->num_rows){
while ($atraction = $result->fetch_array()){
?>
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;float:left;}
.tg th{text-align:center; font-size: 12px; padding:0px 5px;border-style:solid; color:#777700 ;border-width:0px;overflow:hidden;word-break:normal;}
.tg td{text-align:center; padding:0px 0px; border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
.tg .tg-s6z2{text-align:center}
.tg input{float:center;}
</style>
<table width = 200 class="tg">
<tr><th><?php echo "<br> <b>" . $atraction['Name']; ?></th></tr>
<tr><td><?php echo "<h4>" . $atraction['City']; ?></td></tr>
<tr><td><?php echo $atraction['Kategory']; ?></td></tr>
</table>
<br><br>
<?php
}
}$result->free();
}
}
?>
