110 lines
3.6 KiB
PHP
110 lines
3.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Geo lokalizator</title>
|
|
<meta name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<?php include_once "style.php"; ?>
|
|
|
|
<script>
|
|
function initMap() {
|
|
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
zoom: 4,
|
|
});
|
|
|
|
var elements = document.getElementsByClassName('showplace');
|
|
for (var i = 0; i < elements.length; i++) {
|
|
elements[i].addEventListener('click', function () {
|
|
var lat = parseFloat(document.getElementsByClassName('showplace')[0].attributes.lat.value);
|
|
var lng = parseFloat(document.getElementsByClassName('showplace')[0].attributes.lng.value);
|
|
|
|
console.info({lat: lat, lng: lng});
|
|
map.setCenter({lat: lat, lng: lng});
|
|
});
|
|
}
|
|
|
|
|
|
var flightPlanCoordinates = [];
|
|
var markers = [];//some array
|
|
<?php foreach($rows as $row): ?>
|
|
|
|
var marker = new google.maps.Marker({
|
|
position: {lat: <?= $row['szer'] ?>, lng: <?= $row['dl'] ?>},
|
|
map: map,
|
|
name: <?= $row['id']; ?>
|
|
});
|
|
|
|
marker.info = new google.maps.InfoWindow({
|
|
content: <?= '"<h1>' . $row['title'] . '</h1><p>' . $row['description'] . '</p><span>Dodanie: ' . $row['cre_dt'] . '</span><br><span>Aktualizacja: ' . $row['up_dt'] . '</span>"'; ?>,
|
|
position: {lat: <?= $row['szer'] ?>, lng: <?= $row['dl'] ?>},
|
|
pixelOffset: new google.maps.Size(0, -40)
|
|
});
|
|
|
|
// marker.addListener('click', function () {
|
|
// infowindow.open(map, marker);
|
|
// });
|
|
markers.push(marker);
|
|
flightPlanCoordinates.push({lat: <?= $row['szer'] ?>, lng: <?= $row['dl'] ?>});
|
|
google.maps.event.addListener(marker, 'click', function (e, w) {
|
|
var marker_map = this.getMap();
|
|
this.info.open(marker_map);
|
|
});
|
|
i++;
|
|
|
|
<?php endforeach; ?>
|
|
|
|
var flightPath = new google.maps.Polyline({
|
|
path: flightPlanCoordinates,
|
|
geodesic: true,
|
|
strokeColor: '#1e90ff',
|
|
strokeOpacity: 1.0,
|
|
strokeWeight: 2
|
|
});
|
|
|
|
flightPath.setMap(map);
|
|
|
|
|
|
var bounds = new google.maps.LatLngBounds();
|
|
for (var i = 0; i < markers.length; i++) {
|
|
bounds.extend(markers[i].getPosition());
|
|
}
|
|
|
|
map.fitBounds(bounds);
|
|
|
|
|
|
}
|
|
</script>
|
|
<script async defer
|
|
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAEiRrGL_khDb-LRSQyQXwf5B_cuVndrGs&callback=initMap">
|
|
</script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<h1>Mapa</h1>
|
|
<div class="container">
|
|
<div id="map"></div>
|
|
<div class="stream">
|
|
<?php foreach ($rows as $row): ?>
|
|
<div class="location">
|
|
|
|
<h1><?= $row['title']; ?></h1>
|
|
<p><?= $row['description']; ?></p>
|
|
<span lat="<?= $row['szer']; ?>" lng="<?= $row['dl']; ?>"
|
|
class="showplace">Pokaż miejsce na mapie</span>
|
|
<div class="time">
|
|
Dodane: <span class="createtime"><?= $row['cre_dt']; ?></span> |
|
|
Zaktualizowano: <span class="updatetime"><?= $row['up_dt']; ?></span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<?php endforeach; ?>
|
|
|
|
</div>
|
|
</div>
|
|
<a href="/list">List</a>
|
|
</body>
|
|
</html>
|