• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z mapą google

VPS Starter Arubacloud
0 głosów
149 wizyt
pytanie zadane 28 kwietnia 2018 w JavaScript przez imfree Nowicjusz (120 p.)

Witajcie, jest strona http://imfree.h2g.pl/maps/ i w zasadzie wszystko było by dobrze gdyby nie to że mapa się nie pojawia : ) Czy ktoś nakieruje mnie na rozwiązanie problemu ?

Pytanie moje jest takie. Gdzie powinienem zamieścić 

initMap()

żeby zadziałało ? 

Wielkie dzięki. 

2 odpowiedzi

0 głosów
odpowiedź 28 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)
Kiedy załaduje się googleMapsSDK czyli na document.addEventListener('DOMContentLoaded');
0 głosów
odpowiedź 28 kwietnia 2018 przez ooggii86 Użytkownik (660 p.)

Mapa musi mieć zadeklarowaną wysokość bo inaczej się nie wyświetli. Jeżeli chodzi o initMap to w callbacku nigdy mi to nie działało prawidłowo. Zawszę wrzucałem to w funkcję którą odpalałem w <body onload="nazwaFunkcji();"> np.:

<!DOCTYPE html>
<html lang="pl">
    <head>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD0wwRPciyS5YgoRKeuQl18ojvQef0_rck"></script>
    <script>
    var wysrodkuj = new google.maps.LatLng(50.0206861, 22);
    function myMap() {
        var mapCanvas = document.getElementById("map");
        var mapOptions = {
            center: wysrodkuj,
            zoom: 8,
        };
        var map = new google.maps.Map(mapCanvas, mapOptions);
    }
    </script>
    <style type="text/css">
        div#map { height: 600px; }
    </style>
</head>
<body onload="myMap();">       
    <div id="map">Mapa</div>  
</body>
</html>

 

komentarz 29 kwietnia 2018 przez imfree Nowicjusz (120 p.)

Słuchajcie jest lepiej :) Motyla noga a takie to proste niby się wydaje :) Zrobiłem to tak : 

 

     <script type='text/javascript'>

            jQuery(document).ready(
             
               function myMap($) {

                var geocoder;
                var map;
                var markersArray = [];
                var infos = [];

                geocoder = new google.maps.Geocoder();
                var myOptions = {
                zoom: 9,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                
        
        
        }



                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                // map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


                var bounds = new google.maps.LatLngBounds();
                var encodedString;
                var stringArray = [];
                encodedString = document.getElementById("encodedString").value;
                stringArray = encodedString.split("****");
                var x;
                for (x = 0; x < stringArray.length; x = x + 1)
                {
                    var addressDetails = [];
                    var marker;
                    addressDetails = stringArray[x].split("&&&");
                    var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
                    marker = new google.maps.Marker({
                        map: map,
                        position: lat,
                        content: addressDetails[0]
                    });
                    markersArray.push(marker);
                    google.maps.event.addListener(marker, 'click', function () {
                        closeInfos();
                        var info = new google.maps.InfoWindow({content: this.content});
                        info.open(map, this);
                        infos[0] = info;
                    });
                    bounds.extend(lat);
                }
                map.fitBounds(bounds);
                function closeInfos() {
                    if (infos.length > 0) {
                        infos[0].set("marker", null);
                        infos[0].close();
                        infos.length = 0;
                    }
                }

            });
        </script>

 

.. i pojawia się szare pole zamiast mapy :D Eh.. dalej robię coś źle, tylko co ? No przecież to jest niemożliwe ! Powinna załadować się mapa i na niej markery z sql - tyle. Wszystko się przecież ładuje z wyjątkiem mapy. 

Hęę  ? http://imfree.h2g.pl/maps/

Podobne pytania

0 głosów
0 odpowiedzi 127 wizyt
0 głosów
0 odpowiedzi 135 wizyt
0 głosów
0 odpowiedzi 1,233 wizyt
pytanie zadane 2 lipca 2019 w JavaScript przez cyrus33 Użytkownik (680 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...