<?php
/*!
* Copyright Anucha Puangpaka
* Contacts anucha.ppk@icloud.com 062-479-9836
*/
error_reporting(E_ALL);
ini_set("display_errors", 0);
include('../../head.php');
$xsites = "$ap_site$ap_folder"."ap/maps/";
?>
<div class="container theme-showcase body-main-row-body" role="main">
<div class="breadcrumbx">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<ul class="breadcrumb" itemscope="" itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="<?php echo $_SERVER['SERVER_SCRIPT'] ?>?lang=<?php echo $_GET['lang'] ?>" itemprop="item">
<span itemprop="name"><?php echo $ap_home; ?></span>
</a>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="<?php echo $xsites; ?>" itemprop="item">
<span itemprop="name">แผนที่</span>
</a>
<meta itemprop="position" content="2">
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<h4 align="center"><?php $_GET['text'] = "แผนที่ ตำแหน่ง พิกัด และสภาพการจราจร"; echo "<i class=\"fas fa-map-marker-alt\" style=\"color:red\"></i> ".$_GET['text']; ?></h4>
<hr>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 pt-4">
<?php
if(!empty($_COOKIE['lat'])){
?>
<div id="map" style="width: 100%; height: 800px;"></div>
<p></p>
<hr class="bg-danger">
<?php
}
$sql = "select * from ap_maps where id='$_GET[id]' ";
$query = mysqli_query($conn,$sql);
$rows = mysqli_fetch_array($query);
$query2 = mysqli_query($conn,$sql);
while($rows2 = mysqli_fetch_array($query2)){
$lat_lng .= "{location: '$rows2[lat],$rows2[lng]'},";
}
$lat_lng = substr($lat_lng,0,-1);
?>
<script>
var customLabel = {
You: {
label: 'A'
}
};
function displayRoute(origin, destination, service, display) {
service.route({
origin: origin,
destination: destination,
waypoints: [<?php echo $lat_lng;?>],
travelMode: 'DRIVING',
avoidTolls: true
}, function(response, status) {
if (status === 'OK') {
display.setDirections(response);
} else {
//alert('Could not display directions due to: ' + status);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById('total').innerHTML = total + ' km';
}
var map;
var directionsService;
var directionsDisplay;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(<?php echo $_COOKIE['lat']?>,<?php echo $_COOKIE['lng']?>),
mapTypeId: google.maps.MapTypeId.HYBRID, <?php /* mapTypeId:google.maps.MapTypeId.[ROADMAP/SATELLITE/HYBRID/TERRAIN] */ ?>
labels: true,
zoom: 8
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
map.setTilt(45);
directionsService = new google.maps.DirectionsService;
directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
suppressMarkers : true,
map: map,
});
directionsDisplay.addListener('directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
});
displayRoute('<?php echo $_COOKIE['lat']?>, <?php echo $_COOKIE['lng']?>', '<?php echo $rows['lat']; ?>, <?php echo $rows['lng']; ?>', directionsService, directionsDisplay);
var infoWindow = new google.maps.InfoWindow;
downloadUrl('<?php echo $xsites; ?>markers.php?nu=&id=<?php echo $_GET[id]?>', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var image = markerElem.getAttribute('image');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var url = markerElem.getAttribute('url');
var website = markerElem.getAttribute('website');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng'))
);
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('hr'));
if (image === "") { }else{
var img = document.createElement('img');
img.src = image;
img.width = '400';
// img.height = '';
img.alt = name;
infowincontent.appendChild(img);
infowincontent.appendChild(document.createElement('br'));
infowincontent.appendChild(document.createElement('br'));
}
if (address !== "") {
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
infowincontent.appendChild(document.createElement('br'));
}
if (website === "") { } else {
var textTitle = document.createElement('text');
textTitle.textContent = "Website :";
infowincontent.appendChild(textTitle);
infowincontent.appendChild(document.createElement('br'));
var link = document.createElement("a");
link.setAttribute('href', website);
link.setAttribute("target", "_blank");
var text = document.createTextNode(website);
link.appendChild(text);
infowincontent.appendChild(link);
infowincontent.appendChild(document.createElement('br'));
infowincontent.appendChild(document.createElement('br'));
}
if (url === "") { } else {
var textTitle = document.createElement('text');
textTitle.textContent = "แผนที่ :";
infowincontent.appendChild(textTitle);
infowincontent.appendChild(document.createElement('br'));
var link = document.createElement("a");
link.setAttribute('href', url);
var textNode = document.createTextNode(url);
link.appendChild(textNode);
infowincontent.appendChild(link);
}
infowincontent.appendChild(document.createElement('hr'));
var text = document.createElement('text');
text.textContent = "<?php echo $title; ?>"
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFfrtIXXeUtabOdKthKxVy6R5pl7IXRQ0&libraries=places&callback=initMap"></script>
<?php if(!empty($_GET['id'])){ ?>
<p>จากตำแหน่งของคุณ (A) ถึง <?php echo $rows['name']; ?> ระยะทาง <span id="total"></span></p>
<p>Lat : <?php echo $rows['lat']; ?>, Lng : <?php echo $rows['lng']; ?></p>
<?php } ?>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 pt-4">
<?php
$sql2 = "select id,code,name,CONVERT(code,UNSIGNED INTEGER) as code2 from ap_maps order by code2 asc";
$query2 = mysqli_query($conn,$sql2);
$i = 0;
while($rows2 = mysqli_fetch_array($query2)){
$i++;
// echo "$i) <a href='?nu=map&id=$rows2[id]'>$rows2[name]</a><br>";
if($rows2['id']=="$_GET[id]"){
echo "<i class=\"fas fa-map-marker-alt\" style=\"color:red\"></i> $rows2[code]) <a href='$xsites?id=$rows2[id]' alt='$rows2[name]' title='$rows2[name]'>$rows2[name]</a><br>";
}else{
echo "<i class=\"fas fa-map-marker-alt\"></i> $rows2[code]) <a href='$xsites?id=$rows2[id]' alt='$rows2[name]' title='$rows2[name]'>$rows2[name]</a><br>";
}
}
?>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 pt-4">
<hr>
<?php echo social(); ?>
<p></p>
</div>
</div>
</div>
</div>
<?php
include ('../../footText.php');
include ('../../foot.php');
?>
