地図を表示する
最初に、単純に地図を表示するプログラムから試してみましょう。Googleマップでの表示がサンプル1、Yahoo!マップでの表示がサンプル2です。
Googleマップでは以下のようにライブラリーを読み込みます。
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Yahoo!マップの場合は以下のようにライブラリーを読み込みます。
<script type="text/javascript" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=●●●"></script>
地図を表示するためのコンテナをdiv要素で用意します。コンテナはGoogleマップもYahoo!マップも同じdiv要素が使えます。
<div id="myMap" style="width:600px;height:400px;"></div>
次に、地図を表示する部分です。Googleマップ、Yahoo!マップともJavaScriptで地図を扱うオブジェクトを生成します。Googleマップではオブジェクトを生成するときに緯度経度、表示先のコンテナを指定するだけで地図が表示されます。
Yahoo!マップではオブジェクトを生成した後にdrawMap()メソッドを使って表示します。どちらも基本的な引数は同じであり、書き方が少し違うだけです。
Googleマップの表示
Yahoo!マップの表示
■サンプル1[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>グーグルマップで新宿駅の地図を表示する</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>新宿駅の地図</h1>
<div id="myMap" style="width:600px;height:400px;"></div>
</body>
</html>
■サンプル1[sample.js]
window.onload = function(){
var lat = 35.692507; // 新宿駅の緯度
var lng = 139.700346; // 新宿駅の経度
var map = new google.maps.Map(
document.getElementById("myMap"),{
zoom : 12, // ズームレベルは12
center : new google.maps.LatLng(lat, lng),
mapTypeId : google.maps.MapTypeId.ROADMAP // 通常の地図を表示
}
);
}
■サンプル2[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ヤフーマップで新宿駅の地図を表示する</title>
<script type="text/javascript" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=●●●"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>新宿駅の地図</h1>
<div id="myMap" style="width:600px;height:400px;"></div>
</body>
</html>
■サンプル2[sample.js]
window.onload = function(){
var lat = 35.692507; // 新宿駅の緯度
var lng = 139.700346; // 新宿駅の経度
var map = new Y.Map("myMap");
map.drawMap(
new Y.LatLng(lat, lng),
14, // ズームレベルは14
Y.LayerSetId.NORMAL // 通常の地図を表示
);
}Googleマップでは地図切り替えボタンとコントローラーが自動的に表示されますが、Yahoo!マップではコントローラーは表示されません。Yahoo!マップではaddControl()メソッドを使って、表示したいコントローラーを指定する必要があります。コントローラーの種類は以下の表のとおり、実際のプログラムはサンプル3です。
コントローラー付き地図の表示
| Y.CenterMarkControl | センターマーク |
| Y.HomeControl | 初期位置にホームアイコンを表示 |
| Y.LayerSetControl | 地図の種類を切り換えるボタン |
| Y.ScaleControl | 地図の縮尺を示すスケールバー |
| Y.ZoomControl | シンプルなズームコントロール（+-ボタン） |
| Y.SliderZoomControlHorizontal | 横向きのズームコントロール（スライダー） |
| Y.SliderZoomControlVertical | 縦向きのズームコントロール（スライダー） |
| Y.SearchControl | 地図検索ボックス |
■サンプル3[sample.js] ※HTML部分はサンプル2と同じ
window.onload = function(){
var lat = 35.692507; // 新宿駅の緯度
var lng = 139.700346; // 新宿駅の経度
var map = new Y.Map("myMap");
map.drawMap(
new Y.LatLng(lat, lng),
14, // ズームレベルは14
Y.LayerSetId.NORMAL // 通常の地図を表示
);
// 地図の種類を切り換えるコントローラーを表示
map.addControl(new Y.LayerSetControl());
// ズームコントローラーを表示
map.addControl(new Y.SliderZoomControlVertical());
}
サンプル3では標準の地図を表示していますが、地図の種類は以下の3種類を選択できます。
| Y.LayerSetId.NORMAL | 標準の地図 |
| Y.LayerSetId.PHOTO | 航空写真 |
| Y.LayerSetId.B1 | 地下街 |
また、Yahoo!マップにはこのほかにも地形図や水域図などが用意されています。詳細は以下のページを参照してください。
