Googleマップの背景図は標準では 「地図」 「航空写真」 「地図+写真」 の3種類がマップタイプコントロールで選択できるようになっている。
しかし2009年2月19日の日記にも書いたように GPS Visualizer では山岳地帯の表示に適した等高線を描いた 「地形図」も選択できるようになっていた。
せっかく Googleマップを表示するなら、この 「地形図」 が表示できなければ意味がないと思っていた。
GPS Cycling.net というサイクリングで日本各地を走ったGPS軌跡を公開しているサイトを見たら、地形図が表示されていた。
このサイトは「地図ソフト作者」という筆者が作ったサイトだから地図には詳しいに違いないが、地形図表示が急に身近に感じられ、「Google Maps API リファレンス」 を詳しく見てみた。
そして、どうやら G_PHYSICAL_MAP が地形図を表示するマップタイプらしいことが判った。
参考書 「GOOGLE MAPS HACKS」 にもマップタイプを自分流に変更する具体的な章があったが、単にマップタイプを一個削除して、代わりに「地形図」を追加するだけなら、先のGPS Cycling.net サイトのソースの方が簡便な方法で実行していたので、それに倣って実行した。
と、いうことで意外と簡単に「地形図」を表示することに成功した。
window.onload = function() {
var map = new GMap2(document.getElementById("gmap"));
var centerPoint = new GLatLng(36.226978, 137.586921);
map.removeMapType(G_SATELLITE_MAP); //航空写真を削除
map.addMapType(G_PHYSICAL_MAP); //地形図を追加
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(centerPoint,14);
var polylineEncoded = "ここにpolylineEncoded文字列";
var zoomLevelEncoded = "ここにzoomLevelEncoded文字列";
var encodedPolyline = new GPolyline.fromEncoded({
color: '#ff0000',
weight: 3,
opacity: 0.5,
points: polylineEncoded,
levels: zoomLevelEncoded,
zoomFactor: 2,
numLevels: 18
});
map.addOverlay(encodedPolyline);
}
windows.onunload = GUnload;
ところで、GPS Cycling.net サイトのソースを見ると、ブラウザの互換性をチェックする GBrowserIsCompatible をちゃんと書いてある。 2月21日のテストではこれを入れると Safari 3.2.1 では Googleマップが表示できなかった。
GPS Cycling.net サイトではどうだろうと Safari でアクセスしてみると、全く問題なく表示するではないか！
私の使い方に問題があるのかと、ソースを比較してみたが特に問題がありそうな個所はない。
そこで、もう一度 GBrowserIsCompatible のチェックを生かしてテストしてみると正常に表示した。
21日のテストは何だったのだろう？ いろいろ試してみたら、どうやら Safari の場合は Google Maps API Key がないURLから入ってきた場合は、他のブラウザと違って互換性チェックを生かすと表示できない判定になるらしい。
互換性チェックをしない場合は他のブラウザ同様一旦「キーが違います・・・・」のエラーメッセージが表示されるが、そのまま「OK」をクリックして強行すれば、表示できることが判った。
とにかく Google キーが有効でないことの方が問題だから、これを先に解決しなければならないようだ。
- 2009.02.24(火)