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

Google Maps APIの情報ウィンドウの使い方（Java applet編）

前回に続いて、オーバーレイについての２回目。
今回はマーカーなどに追加できる独自マーカーと情報ウィンドウとについて作ってみる。
（うーん。ガイドの順番が情報ウィンドウとグラウンドオーバーレイがインデックスと本文で逆だなぁ）

独自マーカー

ガイドを読むと「複雑な図形（クリック可能な領域を示す）の指定、影のイメージの追加、他のオーバーレイ図形との表示上の関係を示す「積み上げ順序」などを指定できます。」とある。

影の作成に関しては

「影の画像は通常、主の画像の右上方向に 45 度の角度で作成する必要があり、影の画像の左下角はアイコン画像の左下角と揃っている必要があります。影の画像は、画像の境界が地図上に正しく表示されるように、アルファ透明度の 24 ビット PNG 画像にする必要があります。」

とあるけども、簡単にWeb上で作成できるところもあるのでそちらを使います。

Shadowmaker（http://www.cycloloco.com/shadowmaker/）

今回使うのはコレ

WebCam

影

ちなみに、ガイドの中のソースに
----
var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
----
とあるけど、これはクリックできる範囲を指定していて、
coord: [1, 1(左上の座標), 1, 20(左下の座標), 18, 20(右上の座標), 18 , 1(右下の座標)]


って意味になってます。




ガイドを読むと「InfoWindow のコンテンツとしては、テキスト文字列、HTML のスニペット、または DOM 要素そのものが可能です。」ってあるので、かなり自由な表現ができるのかも。

で、思ったのが情報ウィンドウにWebカメラの映像（Javaアプレット）が入れらるんじゃないかと思いチャレンジしてみた。

一応成功か？！
うーん？？？
あれ？？
環境によって見えない！！！！！

Google Chromeだとマーカ内でJavaアプレットを表示すると上半分が表示されない。。。
Firefox ver13.0.1だと表示される。
opera ver 12.00だとアプレット表示で固まるときがある。
Internet Explorer 8だとGoogle Mapが表示されない。。。


Webカメラの場所は福井県三方郡美浜町の竹波海水浴場からのライブ映像を使いました。
ちなみにここのライブカメラ、関西電力美浜発電所がみえるよ！

以下ソース
----


var map;

//座標一覧
var takenami = new google.maps.LatLng(35.695591, 135.976506);


//icon
var iconimage1 = 'http://maps.google.com/mapfiles/kml/pal2/icon4.png';

function initialize8() {

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

  map = new google.maps.Map(document.getElementById("map_canvas8"),
      myOptions);
  infoMarker();
}

//独自マーカーの設定
function infoMarker() {
    var 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, 18.0)
    );
    var 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, 18.0)
    );
    var marker = new google.maps.Marker({
        position: takenami,
        map: map,
        icon: image,
        shadow: shadow
    });
    //ライブカメラのアプレット
    var htmlStr=
'<applet archive="LiveApplet.zip" codebase="http://mihamalive.aa2.netvolante.jp:8080/-wvdoc-01-/LiveApplet/" code="LiveApplet.class" width="450" height="380">' +
'<param NAME="cabbase" VALUE="LiveApplet.cab">' +
'<param NAME="video_width" VALUE="320">' +
'<param NAME="url" VALUE="http://mihamalive.aa2.netvolante.jp:8080/">' +
'<param NAME="locale" VALUE="japanese">' +
'</applet>';

    var infowindow = new google.maps.InfoWindow({
      content: htmlStr,
    });

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

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

----