Google Maps V3 : chargement du contenu des infowindow via AJAX

Question

Google Maps V3 : chargement du contenu des infowindow via AJAX

Demandé el 1 de Août, 2010: Quand la question a-t-elle été
17849 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Quelle est la meilleure façon de charger du contenu dans ma fenêtre d'information en utilisant Ajax ? Pour l'instant, j'obtiens un effet similaire en utilisant des iframes, mais je n'en suis pas si satisfait. Je pensais que ce serait simple, mais je ne comprends pas pourquoi. Voici comment cela fonctionne actuellement :

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);
  });

Il serait facile de récupérer le contenu par ajax juste avant l'appel infowindow.setContent, mais je veux que l'appel ajax ne soit effectué qu'à l'ouverture de l'infowindow. Avez-vous des idées ?

BTW : J'utilise jQuery.

Comme il a été suggéré dans la réponse, j'ai décidé de déplacer les appels à setContent et open vers une fonction distincte. Pour ceux qui sont intéressés, le code qui a résolu ce problème est le suivant :

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

Alors changez l'auditeur :

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

Demandé el 1 de Août, 2010 par Mike Williamson

0 votes

Faites-moi savoir si je dois clarifier quelque chose dans ma réponse :)

Commenté el 2 de Août, 2010 par RedBlueThing

1 votes

Non, c'était parfait. Ma pensée s'était embrouillée et j'avais juste besoin d'un petit coup de pouce dans la bonne direction. Merci !

Commenté el 3 de Août, 2010 par Mike Williamson

0 votes

Pas de problème :) Content que ça ait aidé.

Commenté el 3 de Août, 2010 par RedBlueThing

Answer 1

4 Réponses

Answer 2

32voto

RedBlueThing Points 21332

Vous pouvez appeler infowindow.setContent à tout moment après l'affichage de la fenêtre d'information. Ainsi, vous pouvez d'abord définir le contenu de votre fenêtre d'information à l'aide d'une roue, effectuer l'appel AJAX (à partir du gestionnaire d'événements), puis appeler le bouton infowindow.setContent à partir de la réponse AJAX avec les données appropriées.

Répondu el 1 de Août, 2010 par RedBlueThing (21332 Points )

Answer 3

2voto

vishal sharma Points 820

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

Répondu el 18 de Octobre, 2013 par vishal sharma (820 Points )

0 votes

Quel marqueur a été cliqué, comment envoyer les paramètres du marché à ajax ?

Commenté el 22 de Octobre, 2017 par Marwan

0 votes

C'est une mauvaise approche car elle ajaxe chaque fois que le marqueur est cliqué. Essayez de charger initialement tout le contenu via ajax et rendez-le.

Commenté el 15 de Novembre, 2017 par ashish bansal

0 votes

@ashishbansal , vous pouvez charger le contenu de manière conditionnelle via AJAX en définissant une variable pour cette portée.

Commenté el 20 de Novembre, 2017 par vishal sharma

Answer 4

0voto

bikashphp Points 139

Le contenu de l'infoWindow est déjà chargé, mais il est possible que si vous téléchargez des images de grande taille, nous devions attendre la première fois pour charger complètement l'image, puis définir le contenu de l'infoWindow et enfin afficher cette infoWindow. Les solutions aux exigences ci-dessus sont correctes mais pour les images, il se peut qu'elles ne soient pas chargées instantanément. Pour ce faire, vous devez vérifier si le contenu de la fenêtre d'information est chargé ou non, puis afficher la fenêtre d'information.

Répondu el 22 de Mai, 2015 par bikashphp (139 Points )

Answer 5

0voto

Tarek Adam Points 823

10 ans plus tard... Cela charge les pins via ajax et ensuite chaque pin a une fenêtre d'information via ajax. Voici un exemple fonctionnel : https://gmap.tarekadam.com et voici un repo https://github.com/tarekadam/gmap

Ce code fonctionnera si vous ajoutez votre clé google et si vous fournissez les url(s) pour les 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>

Répondu el 12 de Novembre, 2020 par Tarek Adam (823 Points )

Google Maps V3 : chargement du contenu des infowindow via AJAX

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Google Maps V3 : chargement du contenu des infowindow via AJAX

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: