Forum PHP.pl > [CSS][HTML][inne]Wykaz szczytów do krony w Google Maps

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML][inne]Wykaz szczytów do krony w Google Maps

martinstw78

9.04.2023, 20:41:17

Witam,

Chciałem prosić o poradę w jaki sposób zrobić w Google Maps umieścić punkty na szczytach do Małej Korony Beskidów, w których będzie po najechaniu widoczna nazwa szczytu i jego wysokość npm, a z boku mapy będzie legenda z ponumerowanymi szczytami od najwyższego do najniższego, z podaniem nazwy, wysokości npm i daty wejścia na niego.

Coś takiego jak tutaj: https://www.google.com/maps/d/viewer?mid=11...0000005&z=7

W jaki sposób potem umieścić ta mapę na swojej stronie www i określić jej wymiary?

MP

Johnas

10.04.2023, 03:10:34

[HTML] pobierz, plaintext 
 <!DOCTYPE html>
    <html>
    <head>
 
        <title>Mała Korona Beskidów</title>
        <script
            src="https://maps.googleapis.com/maps/api/js?key=Klucz_API&callback=initMap"
            async
            defer
        ></script>
    </head>
    <body>
    <div id="map" style="height: 500px; width: 100%;"></div>
    <div id="legend"></div>
 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function initMap() {
            var peaks = [
                { name: "Babia Góra", lat: 49.5736, lng: 19.3497, height: 1725 },
                { name: "Wielka Rycerzowa", lat: 49.4563, lng: 19.1666, height: 1257 },
                { name: "Wielka Racza", lat: 49.4264, lng: 18.8614, height: 1236 },
                // itd.
            ];
 
            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 10,
                center: { lat: 49.5, lng: 19.2 },
            });
 
            for (var i = 0; i < peaks.length; i++) {
                var peak = peaks[i];
                var marker = new google.maps.Marker({
                    position: { lat: peak.lat, lng: peak.lng },
                    map: map,
                    title: peak.name + " - " + peak.height + " m n.p.m.",
                });
 
                // Add click listener to display info window with peak details
                marker.addListener("click", function () {
                    var infoWindow = new google.maps.InfoWindow({
                        content: "<h3>" + this.title + "</h3>",
                    });
                    infoWindow.open(map, this);
                });
            }
 
            // Add legend to display peak names and heights
            var legend = document.getElementById("legend");
            var legendContent = "<h2>Szczyty Małej Korony Beskidów</h2>";
            peaks.sort(function (a, b) {
                return b.height - a.height;
            });
            for (var i = 0; i < peaks.length; i++) {
                var peak = peaks[i];
                legendContent +=
                    "<p>" +
                    (i + 1) +
                    ". " +
                    peak.name +
                    " - " +
                    peak.height +
                    " m n.p.m. (data wejścia: XX.XX.XXXX)" +
                    "</p>";
            }
            legend.innerHTML = legendContent;
        }
    </script>
    </body>
 </html>
[HTML] pobierz, plaintext

Demo

Dalej już chyba sobie poradzisz... klucz api znajdziesz na google console

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.