Google Maps V3: Loading infowindow content via AJAX

user_130006 0
Viewed 29903

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);
  });
google-maps-api-3 google-maps jquery
4 Answers

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>
user_47409210
Related