web-dev-qa-db-ja.com

Google Maps V3：AJAX

Ajaxを使用してコンテンツを情報ウィンドウにロードする最良の方法は何ですか？現在、iframeを使用して同様の効果を得ていますが、それほど満足していません。これは簡単だと思いましたが、何らかの理由で混乱しました。これが現在の動作方法です。

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

Infowindow.setContent呼び出しの直前にajaxを介してコンテンツを取得するのは簡単ですが、infowindowが開いているときにのみajax呼び出しを行いたいと思います。何かご意見は？

ところで：私はjQueryを使用しています。

回答で示唆されているように、setContentへの呼び出しを移動し、別の関数を開くことにしました。これを解決したコードに興味がある人のために：

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

次に、リスナーを変更します。

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.close();
      load_content(marker, a.aula.id);
    });
    markers.Push(marker);
  });
jquerygoogle-mapsgoogle-maps-api-3
38
mikewilliamson

情報ウィンドウが表示された後はいつでもinfowindow.setContentを呼び出すことができます。したがって、最初にスピナーを使用して情報ウィンドウのコンテンツを設定し、AJAX呼び出し（イベントハンドラーから）を行ってから、AJAX応答からinfowindow.setContentを再度呼び出します。適切なデータ。

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

map、marker、infowindow（コンテンツなし）を初期化し、markerのクリックハンドラーでajaxリクエストを行います

1
Vishal Sharma

InfoWindowのコンテンツは既に読み込まれていますが、大きなサイズの画像をアップロードする場合は、最初に画像を完全に読み込んでから、infowindowのコンテンツを設定してから、そのinfowindowを表示する必要があります。上記の要件の解決策は問題ありませんが、画像の場合は即座に読み込まれない可能性があるため、情報ウィンドウのコンテンツが読み込まれているかどうかを確認する必要がある場合は、情報ウィンドウを表示するだけで済みます。

0
bikashphp