http://rnk.mitelog.jp/oyaji/2011/05/googlemap-api-v-37bb.html
view plaincopy to clipboardprint?
<head>
<title>Google Map API v3-7</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8"></script>
<script type="text/javascript">
function initialize() {
// Google Mapで利用する初期設定用の変数
var latlng = new google.maps.LatLng(36.062092, 136.223323);
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
};
// GoogleMapの生成
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// ５個の座標(値は特に意味は無い)
var latlngData = [
{ lat:"35.6937103543", lng:"139.7192966822 " },
{ lat:"36.065487", lng:"136.230723" },
{ lat:"36.062456", lng:"136.230704" },
{ lat:"36.061456", lng:"136.220904" },
{ lat:"36.063794", lng:"136.210064" }
];
// ５個の座標2(値は特に意味は無い)
var latlngData2 = [
{ lat:"36.057258", lng:"136.220604" },
{ lat:"36.055487", lng:"136.230723" },
{ lat:"36.052456", lng:"136.230704" },
{ lat:"36.051456", lng:"136.220904" },
{ lat:"36.053794", lng:"136.210064" }
];
var arrCoords = new Array();
for (i = 0;i < latlngData.length;i++) {
// 座標地をlatlng値に変換
var latlng = new google.maps.LatLng(latlngData[i].lat, latlngData[i].lng);
// latlng値を配列に退避
arrCoords.push(latlng);
}
var arrCoords2 = new Array();
for (i = 0;i < latlngData2.length;i++) {
// 座標地をlatlng値に変換
var latlng2 = new google.maps.LatLng(latlngData2[i].lat, latlngData2[i].lng);
// latlng値を配列に退避
arrCoords2.push(latlng2);
}
// ポリライン(折れ線)を生成し、マップに表示
var poly = new google.maps.Polyline({
map: map, //マップ
path: arrCoords, //ポリラインの座標の列
strokeWeight: 5, //ストローク幅(ピクセル単位)
strokeColor: "#f01010",//16進数形式のストロークの色
strokeOpacity: 0.5 //ストロークの不透明度(0.0～1.0)
});
// ポリゴン(多角形)を生成し、マップに表示
var poly2 = new google.maps.Polygon({
map: map, //マップ
paths: arrCoords2, //閉ループを示す座標列
strokeWeight: 5, //ストローク幅(ピクセル単位)
strokeColor: "#f01010",//ストロークの色(16進数形式)
strokeOpacity: 0.5, //ストロークの不透明度
fillColor: "#fc4040", //塗りつぶしの色(16進数形式)
fillOpacity: 0.1 //塗りつぶしの不透明度(0.0～1.0)
});
}
</script>
</head>
<body onload="initialize();">
<div id="map" style="width: 400px; height: 400px;"></div>
</body>
</html>
0 件のコメント:
コメントを投稿