マーカーを表示する
シンプルな地図が表示できたので、次にマーカーを表示してみます。サンプル4がGoogleマップ、サンプル5がYahoo!マップでマーカーを表示するサンプルです。
どちらもマーカーオブジェクトを生成する点は同じです。Googleマップではnew google.maps.Marker()として表示に必要な引数を一括して指定できます。Yahoo!マップではnew Y.Marker()としてマーカーオブジェクトを作成し、その後、マーカーを表示するマップオブジェクトにaddFeature()メソッドを使って追加します。
■サンプル4[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>
■サンプル4[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 // 通常の地図を表示
}
);
// マーカーを表示する
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
}
■サンプル5[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>
■サンプル5[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),
12, // ズームレベルは12
Y.LayerSetId.NORMAL // 通常の地図を表示
);
// 地図の種類を切り換えるコントローラーを表示
map.addControl(new Y.LayerSetControl());
// ズームコントローラーを表示
map.addControl(new Y.SliderZoomControlVertical());
// マーカーを表示する
marker = new Y.Marker(
new Y.LatLng(lat, lng)
);
map.addFeature(marker);
}