Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Ajax + Google Maps API 3

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Ajax + Google Maps API 3

Post 13.09.2017, 14:56:52

Witam

Próbuje zrobić taki efekt w google maps api 3. Mianowicie, po otwarciu mapy ma się otworzyć "InfoWindow" dla jednej współrzędnej (obiektu - dane są dostępne odrazu), a inne współrzędne chcę pobrać przez ajax i te dane z json maja być pokazane jako markery, a dopiero po kliknięciu w marker ma pokazać się InfoWindow.

w Jquery 3.2.1, a ajax jest asynchroniczny i nie wiem jak przekazać współrzędne json do skryptu.
A nie chciał był zmieniać w ajax 'async': false bo przeglądarki plują błędami. Wie może jak to obejść? Bardzo był bym wdzięczny.

Ten mój skrypt teoretycznie to realizuje, ale przez ajax mi to nie działa:

Kod: Zaznacz cały
function initialize(latLng) {
   
    var data;
    var marker;
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };
    map = new google.maps.Map(document.getElementById("google-map"), mapOptions);
    map.setTilt(45);


    var infoWindow = new google.maps.InfoWindow({
        disableAutoPan: false,
        maxWidth: 300
    });
   
         
      /* Wyświetlenie infowindow dla pierszego obiektu */
            latLngg = latLng.split(",");

            var position = new google.maps.LatLng((latLngg[0], latLngg[1]));
            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                center: position,
                map: map,
                title: latLngg[2],
                url: 'url',
                icon: '/static/icon_map.png'
            });


            var contentStringCity = ' bedzie infowindow :)';

            var infoWindowCity = new google.maps.InfoWindow({
                content: contentStringCity,
                maxWidth: 300
            });


            infoWindowCity.open(map, marker);


 /* Wczytanie pozostałych obiketów z json */

    $.ajax({
        type: "POST",
        url: '/Coordinates.php',
        dataType: 'json',
        data: {
            id_city: id,
            id_lang: lang,
        },
        success: function (data) {
             

            for (i in data) {

                var position = new google.maps.LatLng((data[i].hot_lati, data[i].hot_long));
                bounds.extend(position);
                marker = new google.maps.Marker({
                    position: position,
                    center: position,
                    map: map,
                    title: data[i].nazwa_hot,
                    url: 'url',
                    icon: '/static/icon.png'
                });

                var windowWidth = $(window).width();
                if (windowWidth < 1000) {
                    var clickormouseover = 'click';
                } else {
                    var clickormouseover = 'mouseover';

                    google.maps.event.addListener(marker, 'mouseout', function () {
                        infoWindow.close();
                    });
                }

                google.maps.event.addListener(marker, clickormouseover, (function (marker, i) {
                    return function () {
                        infoWindow.setContent('bedzie infowindow :)');
                        infoWindow.open(map, marker);

                        google.maps.event.addListener(marker, 'click', function () {
                            window.location.href = marker.url;
                        });

                    }
                })(marker, i));

            map.fitBounds(bounds);
           
            }
       

            var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
                this.setZoom(12);
                google.maps.event.removeListener(boundsListener);
                google.maps.event.trigger(map, 'resize');
                map.setCenter(marker.getPosition());
            });

 
        }

    });

}
M@k
Posty: 7
Dołączył(a): 28.04.2005

Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Bing [Bot] i 12 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50301 zarejestrowanych użytkowników.
Najnowszy użytkownik: jenniferletty


Nasi użytkownicy napisali:

  • 935424 wiadomości
  • w 246466 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)