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);
----
