Google Maps V3: Loading infowindow content via AJAX

Question

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 this would be straight forward but its confusing me for some reason. This is how its working right now:

var markers = [];
  var infowindow = new google.maps.InfoWindow();
  $.each(JSON.parse(aulas), function(i, a){

    var latlng = new google.maps.LatLng(a.aula.lat, a.aula.lng);
    var marker = new google.maps.Marker({
      position : latlng,
      title: a.aula.title
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.close();
      infowindow.setContent("<div class='infowindow_content'><iframe src='aulas/show/" + a.aula.id + "'></iframe</div>");

      infowindow.open(map, marker);
    });
    markers.push(marker);
  });

It would be easy to grab the content via ajax just before the infowindow.setContent call, but I want to make the ajax call only when the infowindow opens. Any thoughts?

BTW: I am using jQuery.

As was suggested in the answer I decided to move the calls to setContent and open to a separate function. For those interested the code that solved this was:

function load_content(marker, id){
  $.ajax({
    url: 'aulas/show/' + id,
    success: function(data){
      infowindow.setContent(data);
      infowindow.open(map, marker);
    }
  });
}

Then change the listener:

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.close();
      load_content(marker, a.aula.id);
    });
    markers.push(marker);
  });

Nope, that was perfect. My thinking had become muddled and I just needed a gentle nudge in the right direction. Thank you! — mikewilliamson, Aug 02 '10 at 22:47

score 32 · Accepted Answer · answered Aug 01 '10 at 13:30

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.

score 2 · Answer 2 · answered Oct 18 '13 at 07:49

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

Which marker has been clicked, how to send params from market to ajax? — Marwan, Oct 22 '17 at 10:49
this is wrong approach as it ajax every time marker is clicked. try to load initially all content via ajax and render that. — ashish bansal, Nov 15 '17 at 09:42
@ashishbansal , you may conditionally load content via AJAX by setting some variable to that scope. — Vishal Sharma, Nov 20 '17 at 12:57

score 0 · Answer 3 · answered May 22 '15 at 05:05

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.

Tarek Adam · Answer 4 · 2020-11-12T13:24:31.593

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>

Google Maps V3: Loading infowindow content via AJAX

4 Answers4

Linked