Google Maps V3: Loading infowindow content via AJAX

前端未结

关注

 4  1619

What is the best way to load content into my infowindow using ajax? Right now I am getting a similar effect using iframes but I am not that that happy with it. I thought thi

相关标签:

4条回答

借酒劲吻你

2020-12-24 07:05

You can call infowindow.setContent at any point after the info window has been shown. So you could initially set your info window content with a spinner, make the AJAX call (from the event handler) and then call infowindow.setContent again from the AJAX response with the appropriate data.

0 讨论(0)
发布评论:

提交评论
- 加载中...

温柔的废话

2020-12-24 07:10

for (var i = 0; i < markersClient.length; i++) {
            var location = new google.maps.LatLng(lats[i], longs[i]);
            var marker = new google.maps.Marker({
                position: location,
                map: map,
                lid: markersClient[i].t
            });
            var infowindow = new google.maps.InfoWindow({
                content: ""
            });
            //debugger;
            marker.setTitle(" - ");
            markers.push(marker);
            google.maps.event.addListener(marker, 'click', function (target, elem) {
                infowindow.open(map, marker);
                $.ajax({
                      success:function () {
                      infowindow.setContent(contentString);
                     }
               });

intitalize map , marker , infowindow(as no content) and on marker 's click handler make ajax request

0 讨论(0)

甜味超标

2020-12-24 07:10

Already the content to the infoWindow is loaded but there are possibility if you are uploading images of large size then we have to wait for the first time to load the image fully and then set the content of infowindow and then display that infowindow. The solutions to the above requirement is ok but for images it might not get loaded instantly so to do that you have to check whether the content of the infowindow is loaded or not then only you have to display the info window.

0 讨论(0)
发布评论:

提交评论
- 加载中...

长发绾君心

2020-12-24 07:25

10 years later... This loads pins via ajax and then each pin has an info window via ajax. Here is a working example: https://gmap.tarekadam.com and here is a repo https://github.com/tarekadam/gmap

This code will work when you add your google key and provide url(s) for pin json.

<html>
<head>
    <title>gmap</title>

    <script src="//maps.google.com/maps/api/js?key=YOUR-KEY-GOES-HERE"></script>
    <script src="//code.jquery.com/jquery-3.5.1.min.js"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
            crossorigin="anonymous"></script>

    <script>
        $().ready(function () {
            let pinsets = [
                '/one_source_of_pins.json',
                '/another_source_of_pins.json'
            ];

            var map = new google.maps.Map(document.getElementById("map"), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 2.5
            });

            var infowindow = new google.maps.InfoWindow({
                content: ""
            });

            for (let i = 0; i < pinsets.length; i++) {
                let pinset = pinsets[i];

                $.ajax({
                    type: "GET",
                    url: pinset,
                    success: function (data) {

                        for (let ii = 0; ii < data.length; ii++) {
                            let datum = data[ii];
                            let marker = new google.maps.Marker({
                                position: new google.maps.LatLng(datum.lat, datum.lng),
                                map: map,
                                icon: '//thebackoffice.github.io/pins/'
                                    .concat(datum.icon)
                                    .concat('.png')
                            });


                            google.maps.event.addListener(marker, 'click', function (target, elem) {
                                infowindow.open(map, marker);
                                infowindow.setContent('Loading...');
                                $.ajax({
                                    type: "GET",
                                    url: datum.info,
                                    success: function (response) {
                                        infowindow.setContent(response);
                                    }.bind(infowindow)
                                });
                            }.bind(datum)
                                .bind(marker));

                            ii++;
                        }

                    }
                        .bind(pinset)
                        .bind(infowindow)
                });

            }

        });


    </script>

</head>
<body>
<ul>
    <li>Ajax calls load groups of pins.</li>
    <li>onclick an ajax call fetches the info window.</li>
</ul>
<div id="map" style="width:100%; height: 750px;"></div>
</body>
</html>

0 讨论(0)