First init as an backup of all the data. for the future use.

2017-07-18 11:33:10 +02:00
commit f0f07b7ae7
9 changed files with 538 additions and 0 deletions
--- a/templates/mapa.php
+++ b/templates/mapa.php
@@ -0,0 +1,110 @@
+<!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>