<script type="text/javascript" src="https://map.yahooapis.jp/js/V1/jsapi?appid=アプリケーションID"></script>
<div id="map" style="width: ***px; height: ***px;"></div>
<script type="text/javascript">
window.onload() = function() {
var myMap = new Y.Map("map");
myMap.drawMap(
// 中心点緯度経度
new Y.LatLng(35.710139, 139.810833),
// ZOOMレベル
8,
// レイヤーセット(標準地図)
Y.LayerSetId.NORMAL
);
// 円の定義
var myCircle = new Y.Circle(
// 第1引数は中心点
new Y.LatLng(35.710139, 139.810833),
// 第2引数はY.Size(東西方向の半径,南北方向の半径)
new Y.Size(95.330, 95.330),
// 第3引数はJSONオプション
{
// unitを忘れると半径がpixel単位になるので注意!
unit: "km",
// 外周スタイル Y.Style(色, 太さ, 透過度)
strokeStyle: new Y.Style("ff0000", 1, 1),
// 塗りつぶしスタイル Y.Style(色, 太さ(不要), 透過度)
fillStyle: new Y.Style("ff0000", null, 0.5)
}
);
// 地図に描画
myMap.addFeature(myCircle);
}
</script>
OKWave系のq5546321でgoogle mapsのほうにリンクされている、「東京スカイツリーが見える範囲」を相変わらずサンプルにしています。中心点は (35.710139, 139.810833)、半径は95,330mにしています。(この範囲でスカイツリーが見えることを保障するわけではありません!念のため)
- 上のHTMLをコピーして、緯度・経度・大きさを変えれば好きな地図を表示できます。
- アプリケーションIDは取得してください。
- 大きさは、表示させる<div>タグで指定。
- ズームレベルは整数で指定。(小さいほど広域、大きいほど詳細)