【特集】ゼロからはじめるYahoo! Maps API (7) デュアルマップ表示 | パソコン

【特集】

ゼロからはじめるYahoo! Maps API

7 デュアルマップ表示

古籏一浩　 [2007/06/15]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- ／7

少し応用してみよう(デュアルマップを表示)

最後にYahoo! Maps APIを使って地図と航空写真を同時に表示させてみましょう。ここでは地図と航空写真を同時に表示し、片方がドラッグされたら、もう片方の地図も同じように移動するようにします。最初にHTMLで<div>タグを2つ用意しておきます。片方が地図、もう片方が航空写真を表示する領域になります。それぞれ、異なるIDを割り当てておきます。地図を2つ表示するには単純にnew YahooMapsCtrl()で地図を生成するだけです。この時に異なるIDと表示する地図の種類を別々にします。これによりページ上に地図と航空写真の両方が表示されます。

次に地図がドラッグされたら、もう片方を移動させます。地図がドラッグされた場合の処理はaddEvent()で指定します。ドラッグの場合は最初のパラメータにYEventType.MAP_MOVINGを指定します。2番目のパラメータはドラッグされた場合の処理を指定しますが、今回の場合はもう片方の地図も同じ座標に移動させるのでmoveTo()を使って地図を移動させます。パラメータは現在の地図の中心座標を指定します。中心座標はgetCenter()で取得できますので、これをmoveTo()のパラメータに指定すればできあがりです。

プログラムを見れば、わずか4行でデュアルマップが実現できたことになります。Yahoo! Mapsの方がGoogle Mapsと比べてプログラムが短く済むこともあります。Google MapsだけでなくYahoo! Mapsも使い方によっては便利なサービスです。この機会に一度使ってみてはどうでしょうか。

「デュアルマップの表示」

【サンプル12】

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://api.map.yahoo.co.jp/MapsService/js/V1/?appid=●●●">
</script>
<script type="text/javascript"><!--
window.onload=function(){
        Ymap1 = new YahooMapsCtrl("YahooMap1", "36.6.42.653, 137.57.23.497", 3, YMapMode.MAP);
        Ymap2 = new YahooMapsCtrl("YahooMap2", "36.6.42.653, 137.57.23.497", 3, YMapMode.AERO);
        Ymap1.addEvent(YEventType.MAP_MOVING, function(){ Ymap2.moveTo(Ymap1.getCenter()); });
        Ymap2.addEvent(YEventType.MAP_MOVING, function(){ Ymap1.moveTo(Ymap2.getCenter()); });
}
// --></script>
</head>
<body>
<h1>Yahoo Maps サンプル</h1>
<div id="YahooMap1" style="width:640px;height:240px;"></div>
<div id="YahooMap2" style="width:640px;height:240px;"></div>
</body>
</html>