ふきだし内のメッセージにYouTubeを入れる

(注意!)この記事は、旧APIであるGoogle Maps API version 2を解説したものです。version 2の利用は推奨されていないので、意図的に旧バージョンの情報を探していない場合は、新しいバージョンの解説をご覧下さい。


ここでは、地図上に表示するふきだしの中にYouTubeの映像を貼り付ける方法を説明したいと思います。 ふきだしの中身をHTMLで書く事により、ふきだしの中にYouTube映像を貼り付ける事ができます。

サンプル

以下のサンプルはGoogle MAPS APIを使ったページのソースです。 openInfoWindowHtmlを使ってふきだし内に画像を表示している点にご注意下さい。 HTMLでYouTubeのEMBEDを指定している部分を変更してご利用下さい。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
        type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="map" style="width:500px; height:600px"></div>
    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(8.787,-63.621), 3);


      map.openInfoWindowHtml(map.getCenter(),
             "pleco<br>" +
             "<object width=\"425\" height=\"355\">" +
             "<param name=\"movie\" " +
             "value=\"http://www.youtube.com/v/AkRwMuq3h80&rel=1\">" +
             "</param><param name=\"wmode\" value=\"transparent\">" +
             "</param>" +
             "<embed src=\"http://www.youtube.com/v/AkRwMuq3h80&rel=1\" "+
             "type=\"application/x-shockwave-flash\" wmode=\"transparent\" " +
             "width=\"425\" height=\"355\"></embed></object>");
    }

    }
    //]]>
    </script>
  </body>

</html>

ふきだしで表示する部分にHTMLを使っています。 HTMLの中身をYouTubeにしています。

表示例

表示例です。