リーフレットのマーカーにつぶやく

Question

リーフレットマーカーのポップアップに埋め込みツイートを表示しようとしています。私は、IFRAMEにつぶやきをロードするためにtweetframeを使用しています：

var marker1 = L.marker(
    [52.3687433,4.8912132], 
    { 
     icon: new L.Icon.Default() 
    }).addTo(map); 

    var popup1 = L.popup({ 
    maxWidth: '2650' 
    }); 

    var html1 = $('<div id="html" style="width: 100.0%; height: 100.0%;"><iframe class="tweet" id=tweet_493851197649207296 border=0 frameborder=0 height=250 width=550 src=https://twitframe.com/show?url=https://twitter.com/gideontailleur/status/493851197649207296></iframe></div>')[0]; 

    popup1.setContent(html1); 
    marker1.bindPopup(popup1); 

はhere

残念ながら、これは非常に素晴らしい見ていない、と私は実際に埋め込まれたつぶやきを使用したいライブの例を参照してください。しかし、マーカーのコンテンツとしてこのコードをTwitterの例に追加することは機能していないようです。問題の1つは、エラーを出すhtmlの引用符をエスケープできないことです。

var marker2 = L.marker(
    [52.36,4.89], 
    { 
     icon: new L.Icon.Default() 
    }).addTo(map); 

    var popup2 = L.popup({ 
    maxWidth: '2650' 
    }); 

    var html2 = $("<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Hey <a href="https://twitter.com/hashtag/WindowsInsiders?src=hash">#WindowsInsiders</a>, we have released Build 15063.2 for Mobile to Fast ring - includes a single fix March 29, 2017</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>")[0]; 

    popup2.setContent(html2); 
    marker2.bindPopup(popup2); 

は、実際の例hereを参照してください。私はそれを解決したときに多くの問題がポップアップかもしれません

</script> 

これは早まっJavascriptのブロックを終了するようになります：

Answer 1

JSFiddle上の強調表示のコードでは、右端にあり、html2変数jQueryの関数呼び出しで問題が示されました。あなたは単にこれをエスケープする必要があります：

<\/script>