地図上にポリゴンを表示する
最後に、地図上にポリゴン（多角形）を表示してみましょう。サンプル15がGoogleマップの場合、サンプル16がYahoo!マップの場合です。
Googleマップはnew google.maps.Polygon()、Yahoo!マップはnew Y.Polygon()でポリゴンを描画します。いずれも、ポリゴンを描画する位置（緯度・経度）を示すオブジェクトを配列として指定します。
Googleマップの場合、線の色や太さ、不透明度は個別の引数で指定しますが、Yahoo!マップの場合はY.Style()を使って一括して指定できます。また、Googleマップでは線や塗りの色にHTML/CSSのカラーネームを指定できますが、Yahoo!マップではrrggbb形式のみ指定できます。
ポリゴンの設定ができたら、GoogleマップではsetMap()メソッドで、Yahoo!マップはaddFeature()メソッドで地図上にポリゴンを描画します。
Googleマップでポリゴンを表示
Yahoo!マップでポリゴンを表示
■サンプル15[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>
■サンプル15[sample.js]
window.onload = function(){
var lat = 35.692507; // 新宿駅の緯度
var lng = 139.700346; // 新宿駅の経度
map = new google.maps.Map(
document.getElementById("myMap"),{
zoom : 13, // ズームレベルは13
center : new google.maps.LatLng(lat, lng),
mapTypeId : google.maps.MapTypeId.ROADMAP // 通常の地図を表示
}
);
// ポリゴンを表示
var myPolygon = new google.maps.Polygon({
path: [
new google.maps.LatLng(35.692507, 139.700346),
new google.maps.LatLng(35.670197,139.702663),
new google.maps.LatLng(35.679888,139.72043),
new google.maps.LatLng(35.692507, 139.700346)
],
strokeColor: "ff0000", // 赤色の線
strokeWeight: 5, // 5pxの太さ
strokeOpacity: 0.5, // 線の不透明度50%
fillColor: "0000ff", // 青色の塗り色
fillOpacity: 0.8 // 不透明度80%
});
myPolygon.setMap(map);
}■サンプル16[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>
■サンプル16[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 // 通常の地図を表示
);
// 地図の種類を切り換えるコントローラーを表示
map.addControl(new Y.LayerSetControl());
// ズームコントローラーを表示
map.addControl(new Y.SliderZoomControlVertical());
// ポリゴンを表示
var myPolygon = new Y.Polygon(
[
new Y.LatLng(35.692507, 139.700346),
new Y.LatLng(35.670197,139.702663),
new Y.LatLng(35.679888,139.72043),
new Y.LatLng(35.692507, 139.700346)
],{
strokeStyle: new Y.Style("ff0000", 5, 0.5),
fillStyle: new Y.Style("0000ff", null, 0.8)
}
);
map.addFeature(myPolygon);
}◆
Yahoo! JAPANではほかにもいろいろなサービスが提供されています。Googleだけでなく、Yahoo!のAPIも上手に組み合わせることでさまざまなWebサービスを作成できるでしょう。
