Google Maps InfoWindowでjQueryまたはJavaScriptを使用するにはどうすればよいですか？

Question

問題： Google Map InfoWindowにTwitterの共有ボタンを入れたいと思います。

私はgoogle.maps.event.addListener(infowindow, 'domready' function() { ...code...}を使用してInfoWindowをDOMに追加するのを聞きましたが、最初に起動したInfoWindowでのみ動作します。クラスに対して

​​

：

Twitter Share Button Examplesは、次のスクリプトを適用

"twitter-share-button"

仮定： 今問題私が見るようにそれはその情報ウィンドウとマーカーは$ .each（）ループで作成され、jQueryをどのようなイベントで監視するのかわかりません。

例としてjsfiddleを作成しようとしましたが、ライブサイトのように$ .each（）を使用するとマップを読み込むことができませんが、答えを示すのに役立つ場合はここにリンクします：

私の機能しないJSFiddle。

私のlive development site which shows the problem。

その他のスタックオーバーフローに関する質問：類似しているが異なる。

Calling a JavaScript function within an InfoWindow (Google Maps)

Tweet button and infoWindow

私はjQuery-ui-mapプラグインを見てきました。私はストレートJavaScriptではできないことは何もしません。

Map.js：またはPastebin link to code below but with syntax highlighting

$('.page-map').live("pageshow", function() { 

    $.getJSON("/rest/Pub", function(data) { 

     var latlng = new google.maps.LatLng(59.920, 10.750); 
     var map = new google.maps.Map(document.getElementById("map-canvas"), { 
       // zoom is good on iphone @ 13 but better on desktop @ 14 
       zoom: 12, 
       center: latlng, 
       backgroundColor: 'black', 
       mapTypeControlOptions: { 
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
       }, 
       mapTypeId: google.maps.MapTypeId.HYBRID 
     }); 
     var bubble = new google.maps.InfoWindow(); 
     var pubs = data.list.Pub; 

     $.each(pubs, function(i, pub) { 

      var beer; 
      var pubaddress = encodeURI(pub.pub_address); 
      var pubname = encodeURI(pub.pub_name); 
      var posi = new google.maps.LatLng(pub.pub_lat, pub.pub_long); 
      var marker = new google.maps.Marker({ 
       animation: (pub.pub_bounce =='true') ? google.maps.Animation.BOUNCE : null, 
       map: map, 
       icon: "/static/images/" + pub.beer_price + ".png", 
       shadow: 'static/images/shadow.png', 
       position: posi, 
       title: pub.pub_name 
      }); 

      if (pub.beer_price == 99) { 
       marker.setZIndex(1); 
      } else { 
       marker.setZIndex(100); 
      } 

      google.maps.event.addListener(marker, 'click', function() { 
       // http://mapki.com/wiki/Google_Map_Parameters 
        if (pub.beer_price == 99) { 
         beer = '?'; 
        } else { 
         beer = pub.beer_price; 
        } 

       tweet = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://oslogigs.com" data-text="' + pub.pub_name + '" data-lang="en" data-via="OsloGigs" data-hashtags="oslo, oslogigs, norway">Tweet</a>'; 

       content_string = '<h1>'+ pub.pub_name + '</h1>'+ 
       '<p><a href="http://maps.google.com/?saddr=Current%20Location&daddr=' + 
       pubaddress + '+(' + pubname + ')&dirflg=w&t=h">Google Maps Directions</a></p>' + 
       '<p>Phone:<a href="tel:' + pub.pub_phone + '">' + pub.pub_phone + '</a></p>' + 
       '<p>Halvliterpris: NOK <b>' + beer + '</b></p><p>' + tweet + '</p>'; 


      bubble.setContent(content_string); 
      console.log(bubble.getContent()); 
      bubble.open(map, this); 
      }); 

      google.maps.event.addListener(bubble, 'domready', function() { 
      //$('.twitter-share-button').on('domready', function(event) { 
       console.log("Iteration:"+ i + " Twitter javascript loaded " + pub.pub_name); 
       !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); 
      }); 
     }); 
    }); 
}); 

乾杯。

Answer 1

トリックを行う必要があります

bubble.open(map, this); 

後

twttr.widgets.load(); 

を呼び出します。

TwitterウィジェットのJavaScriptを非同期に読み込んでいるので、twttrが既に定義されているかどうかを確認してから呼び出してください。