Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]mapa się nie wyświetla
Johnas
post 24.03.2023, 06:11:44
Post #1





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----


mam kod:

  1. <div class="map-container">
  2. <div id="map"></div>
  3. </div>
  4. <script type="text/javascript">
  5. // funkcja inicjująca mapę Google
  6. function initMap() {
  7. // koordynaty początkowe i końcowe trasy
  8. var start = new google.maps.LatLng(52.229676, 21.012229); // Warszawa
  9. var end = new google.maps.LatLng(50.0646501, 19.9449799); // Kraków
  10. // opcje mapy
  11. var mapOptions = {
  12. zoom: 7,
  13. center: start
  14. }
  15. // inicjalizacja mapy
  16. var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  17. // trasa samochodowa
  18. var directionsService = new google.maps.DirectionsService();
  19. var directionsRenderer = new google.maps.DirectionsRenderer();
  20. directionsRenderer.setMap(map);
  21. var request = {
  22. origin: start,
  23. destination: end,
  24. travelMode: 'DRIVING'
  25. };
  26. directionsService.route(request, function(result, status) {
  27. console.log(result)
  28. if (status == 'OK') {
  29. directionsRenderer.setDirections(result);
  30. }
  31. });
  32. }
  33. </script>
  34. </div>
  35. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmz8eu4pSPzahP_Il5xiXBQlfymeYAhHA&callback=initMap"></script>
  36. </body>
  37. </html>


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

@edit

Zrobiłem przez css #map


--------------------
Jak coś jest dobre, to nie znaczy że nie może być to lepsze - Ideały nie istnieją ;D
Strony internetowe Świnoujście
Go to the top of the page
+Quote Post
trueblue
post 24.03.2023, 08:53:57
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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


--------------------
Go to the top of the page
+Quote Post
Johnas
post 25.03.2023, 18:26:40
Post #3





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----


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

  1. #map
  2. {
  3. position: relative !important;
  4. height: 200px !important;
  5. width: 100%!important;
  6. }


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

https://electroit.pl/search

Ten post edytował Johnas 25.03.2023, 18:27:45


--------------------
Jak coś jest dobre, to nie znaczy że nie może być to lepsze - Ideały nie istnieją ;D
Strony internetowe Świnoujście
Go to the top of the page
+Quote Post
trueblue
post 25.03.2023, 19:16:09
Post #4





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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


--------------------
Go to the top of the page
+Quote Post
Johnas
post 25.03.2023, 19:29:45
Post #5





Grupa: Zarejestrowani
Postów: 650
Pomógł: 16
Dołączył: 5.07.2010
Skąd: Ściśle Tajne

Ostrzeżenie: (0%)
-----


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


--------------------
Jak coś jest dobre, to nie znaczy że nie może być to lepsze - Ideały nie istnieją ;D
Strony internetowe Świnoujście
Go to the top of the page
+Quote Post
uziom
post 4.04.2023, 17:18:38
Post #6





Grupa: Zarejestrowani
Postów: 8
Pomógł: 1
Dołączył: 4.04.2023

Ostrzeżenie: (10%)
X----


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:
  1. <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
  2. </head>


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:
  1. <div id="map"></div>
  2. </body>

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

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

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:
  1. <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
  2. </head>

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:
  1. <!DOCTYPE html>
  2. <head>
  3. <title>Mapa Google</title>
  4. <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
  5. function initMap() {
  6. const map = new google.maps.Map(document.getElementById("map"), {
  7. center: { lat: 52.2297, lng: 21.0122 },
  8. zoom: 10,
  9. });
  10. }
  11. </script>
  12. #map {
  13. height: 400px;
  14. width: 100%;
  15. }
  16. </style>
  17. </

Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 13:34