GoogleMapの指定した場所に、youtubeの動画を表示させてみた。

今回は、GoogleMapの住所や画像が表示される吹き出しに、youtubeを表示させるのをやってみました。

GoogleMapは、去年の春頃に挑戦して、一瞬で挫折したまんまで、もろもろすっ飛ばしてやってみました。

でも、出来た！

こんな感じです。

GoogleMapの吹き出しにyoutubeを表示

* 準備 *

GoogleMapsAPIのページの右部分にあるSign up for a Google Maps API key. のページで、GoogleMapsAPIのkeyを取得します。準備は、これだけです。

* 設置 *

まず、<head>～</head>タグ内に、

<script srchttp://maps.google.com/maps?file=api&v=2&key=yourkey" type="text/javascript" charset="utf-8"></script>

と書き加えてください。"yourkey"の部分には、取得したGoogleMapsAPIのkeyを入れてください。

次に、<body>～</body>タグ内に、

<div id="map" style="WIDTH: 800px; HEIGHT: 800px"></div>
<script type="text/javascript">
//<![CDATA[

    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(34.67212920782365
,135.4978984594345), 18);

      map.openInfoWindowHtml(map.getCenter(),
             "10/17 EXPLOSION画伯@三角公園・アメリカ村 <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/agfWaHVYB24&rel=1\"" "+
             "type="\"application/x-shockwave-flash\"" wmode="\"transparent\"" " +
             "width="\"425\"" height="\"355\""></embed></object>");
    }
    //]]>
    </script>

と書きます。

また、youtubeの動画を再生しているページの右にある"埋め込みタグ"内の<embed>内に書かれているURLを上のソースの<embed>タグ内のURL部分に貼り付けることで、自分の好きな動画を表示する事ができます。

* 参考サイト *

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

Ho-KAGO After School

GoogleMapの指定した場所に、youtubeの動画を表示させてみた。

タグ:

関連記事

このブログ記事と同じカテゴリのブログ

トラックバックURL

コメントする