Forum PHP.pl > [JavaScript]mapa się nie wyświetla

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]mapa się nie wyświetla

Johnas

24.03.2023, 06:11:44

mam kod:

[HTML] pobierz, plaintext 
    <div class="map-container">
        <div id="map"></div>
    </div>
    <script type="text/javascript">
        // funkcja inicjująca mapę Google
        function initMap() {
            // koordynaty początkowe i końcowe trasy
            var start = new google.maps.LatLng(52.229676, 21.012229); // Warszawa
            var end = new google.maps.LatLng(50.0646501, 19.9449799); // Kraków
            // opcje mapy
            var mapOptions = {
                zoom: 7,
                center: start
            }
            // inicjalizacja mapy
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);
            // trasa samochodowa
            var directionsService = new google.maps.DirectionsService();
            var directionsRenderer = new google.maps.DirectionsRenderer();
            directionsRenderer.setMap(map);
            var request = {
                origin: start,
                destination: end,
                travelMode: 'DRIVING'
            };
            directionsService.route(request, function(result, status) {
                console.log(result)
                if (status == 'OK') {
                    directionsRenderer.setDirections(result);
                }
            });
        }
    </script>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmz8eu4pSPzahP_Il5xiXBQlfymeYAhHA&callback=initMap"></script>
</body>
</html>
[HTML] pobierz, plaintext

i on nie wyświetla mi mapy normalnie tylko jako overflow:hidden

@edit

Zrobiłem przez css #map

trueblue

24.03.2023, 08:53:57

Pokaż css dla #map i #map-container.

Johnas

25.03.2023, 18:26:40

nie mialem dlatego się nie wyświetlało, a dodałem takie coś

[CSS] pobierz, plaintext 
#map
{
    position: relative !important;
    height: 200px !important;
    width: 100%!important;
}
[CSS] pobierz, plaintext

Wytłumaczysz jeszcze dlaczego ta strona mi się w bok rozjeżdża ?

https://electroit.pl/search

trueblue

25.03.2023, 19:16:09

Nie widzę, aby coś się rozjeżdżało w bok.

Johnas

25.03.2023, 19:29:45

Na telefonie się rozjeżdża, albo w chrome jak masz telefon mode

uziom

4.04.2023, 17:18:38

Aby wyświetlić mapę Google na stronie internetowej za pomocą JavaScript, można użyć oficjalnego API Google Maps. Oto przykładowy kod, który utworzy mapę Google na stronie:

Najpierw musisz dodać link do biblioteki Google Maps w sekcji nagłówka HTML:

[HTML] pobierz, plaintext 
<head>
  <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
</head>
[HTML] pobierz, plaintext

Zauważ, że musisz zamienić API_KEY na swój własny klucz API Google Maps. Aby uzyskać klucz, musisz zarejestrować się w konsoli deweloperskiej Google i utworzyć projekt, a następnie wygenerować klucz API Google Maps.
Następnie, w sekcji ciała HTML, możesz utworzyć element <div> z unikalnym identyfikatorem, który będzie służył jako kontener mapy. Na przykład:

[HTML] pobierz, plaintext 
<body>
  <div id="map"></div>
</body>
[HTML] pobierz, plaintext

Na koniec, użyj JavaScript, aby utworzyć mapę Google i wyświetlić ją w kontenerze <div>. Oto przykładowy kod java script:

[HTML] pobierz, plaintext 
function initMap() {
  // Utwórz obiekt mapy i przypisz go do elementu <div> o identyfikatorze "map".
  const map = new google.maps.Map(document.getElementById("map"), {
    // Ustaw początkowe położenie i powiększenie mapy.
    center: { lat: 52.2297, lng: 21.0122 },
    zoom: 10,
  });
}
[HTML] pobierz, plaintext

Ten kod utworzy nową mapę Google z początkowym położeniem w Warszawie i powiększeniem 10. Następnie przypisze mapę do elementu <div> o identyfikatorze "map".

Aby wywołać funkcję initMap() i wyświetlić mapę Google, możesz dodać następujący kod do sekcji nagłówka HTML:

[HTML] pobierz, plaintext 
<head>
  <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
</head>
[HTML] pobierz, plaintext

Zauważ, że dodaliśmy parametr &callback=initMap do URL-a biblioteki Google Maps. Ten parametr oznacza, że po załadowaniu biblioteki, funkcja initMap() zostanie automatycznie wywołana.

Całościowy kod HTML i JavaScript do wyświetlenia mapy Google wyglądałby tak:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
  <head>
    <title>Mapa Google</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
    <script>
      function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: 52.2297, lng: 21.0122 },
          zoom: 10,
        });
      }
    </script>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </
[HTML] pobierz, plaintext

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.