Google Maps JavaScript API V3の情報ウィンドウの使い方2

Google Maps APIの情報ウィンドウの使い方（flash&USTREAM編）

今日も前回の続きでオーバーレイについての３回目。

　前回、Javaアプレットを情報ウィンドウに追加してみたんだけど、flashやUSTREAMを追加したらどうなるのかやってみた！

　両国のポイントに関しては、第一ホテル両国のライブカメラ（flash）を、秋葉原のポイントに関してはUSTREAMの秋葉原駅ライブカメラ HD配信のライブカメラ（iframeタグ）をつかっています。


今回はうまくいったか！？
うーん。やっぱいnternet Explorer 8だとGoogle Mapsが表示されないな。

とりあえずソースは以下の通り
----

var map;
var image;
var shadow;

//座標一覧
var ryogoku = new google.maps.LatLng(35.698135, 139.796927);
var akiba = new google.maps.LatLng(35.700828, 139.773227);

function initialize9() {

  var myOptions = {
    zoom: 13,
    center: ryogoku,
    mapTypeControl: true,
    zoomControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
   
  };

  map = new google.maps.Map(document.getElementById("map_canvas9"),
      myOptions);

  image = new google.maps.MarkerImage("https://lh5.googleusercontent.com/-PGl4paWviPM/T-J3F3ebegI/AAAAAAAABTI/eAAxcZILP_I/s800/webcam.png",
      new google.maps.Size(32.0, 37.0),
      new google.maps.Point(0, 0),
      new google.maps.Point(16.0, 37.0)
  );
  shadow = new google.maps.MarkerImage("https://lh6.googleusercontent.com/-iHQVXemmSRk/T-J3FrZVGTI/AAAAAAAABTE/g7IOR9avsCI/s800/shadow-webcam.png",
      new google.maps.Size(51.0, 37.0),
      new google.maps.Point(0, 0),
      new google.maps.Point(16.0, 37.0)
  );

  infoMarker1();
  infoMarker2();
}

//独自マーカーの設定1（flash）
function infoMarker1() {

     var marker1 = new google.maps.Marker({
        position: ryogoku ,
        map: map,
        icon: image,
        shadow: shadow
    });
   //ライブカメラのflash
    var htmlStr1 =
'<figure class="flash">' +
'    <!--[if !IE]><-->' +
'    <object data="http://www.dh-ryogoku.com/flash/live.swf" width="230" height="150" type="application/x-shockwave-flash">' +
'    <!--><![endif]-->' +
'    <!--[if IE]>' +
'    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0" width="230" height="150" type="application/x-shockwave-flash">' +
'        <param name="movie" value="http://www.dh-ryogoku.com/flash/live.swf" />' +
'        <![endif]-->' +
'        <param name="src" value="http://www.dh-ryogoku.com/flash/live.swf" />' +
'        <param name="quality" value="best" />' +
'        <param name="pluginspage" value="http://www.adobe.com/go/getflashplayer" />' +
'        <param name="align" value="middle" />' +
'        <param name="play" value="true" />' +
'        <param name="loop" value="true" />' +
'        <param name="scale" value="showall" />' +
'        <param name="wmode" value="window" />' +
'        <param name="devicefont" value="false" />' +
'        <param name="id" value="live" />' +
'        <param name="bgcolor" value="#ffffff" />' +
'        <param name="name" value="live" />' +
'        <param name="menu" value="false" />' +
'        <param name="allowFullScreen" value="false" />' +
'        <param name="allowScriptAccess" value="sameDomain" />' +
'        <param name="salign" value="" />' +
'    </object>' +
'</figure>';


    var infowindow1 = new google.maps.InfoWindow({
      content: htmlStr1,
    });

    google.maps.event.addListener(marker1, 'click', function(event) {      
        infowindow1.open(map,marker1);
    });
}

//独自マーカーの設定2（USTREAM）
function infoMarker2() {

     var marker2 = new google.maps.Marker({
        position: akiba,
        map: map,
        icon: image,
        shadow: shadow
    });
   //ライブカメラのflash
    var htmlStr2 =
'<iframe src="http://www.ustream.tv/embed/9701836" width="300" height="195" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe>' +
'<br />' +
'<a href="http://www.ustream.tv/everywhere" style="padding: 2px 0px 4px; width: 400px; background: #ffffff; display: block; color: #000000; font-weight: normal; font-size: 10px; text-decoration: underline; text-align: center;" target="_blank">Live video from your iPhone using Ustream</a>';


    var infowindow2 = new google.maps.InfoWindow({
      content: htmlStr2,
    });

    google.maps.event.addListener(marker2, 'click', function(event) {      
        infowindow2.open(map,marker2);
    });
}


google.maps.event.addDomListener(window, 'load', initialize9);

----