ホームページを制作していると、グーグルマップを利用する機会が多くあります。
大抵は単に地図として埋め込んでいるだけですが、たまには違う使い方をする事もあります。
下図をご覧ください。
これはグーグルマップに４つの三角形を重ねたものです。
もちろん、マップをコピーしてフォトショで加工した…という話ではありません。
以前にも紹介しましたが、グーグルマップのAPIを使うと出来ます。
今回はソースも示しましょう。
[html]
<div id=”map”></div>
ここにマップを表示します
[style]
#map {
width:600px;
height:500px;
}
マップのサイズを縦500ピクセル横600ピクセルにします。
[script]
var originLat = 43.0901767; //中心位置 緯度
var originLng = 141.2751628; //中心位置 経度
function initialize(){
var center = new google.maps.LatLng(originLat, originLng);
var myOptions = {
zoom: 11, //拡大率
center: center,
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
//三角形を描く
//緯度±0.06度、経度±0.1度の範囲に４つの三角形で四角を描いてみます
draw(map,"#ff0000",0.07,-0.1,0.07,0.1);
draw(map,"#00ff00",0.07,0.1,-0.07,0.1);
draw(map,"#ff00ff",-0.07,-0.1,-0.07,0.1);
draw(map,"#ffff00",-0.07,-0.1,0.07,-0.1);
}
//三角形描画
function draw(map,col,lat1,lng1,lat2,lng2) {
//三角形なので３点を指定
var triangleCoords = [
new google.maps.LatLng(originLat, originLng),
new google.maps.LatLng(originLat + lat1, originLng + lng1),
new google.maps.LatLng(originLat + lat2, originLng + lng2),
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#222",
strokeOpacity: 0.8,
strokeWeight: 1.25,
fillColor: col, //塗りつぶし色
fillOpacity: 0.3 //塗りつぶし透明度
});
bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, "ready", initialize()); //実行
このくらいの簡単な内容で描画できます。
ちなみに中心位置は弊社のある場所辺りです。
なお、APIを使うにはAPIキーというものが必要です。
Google Maps APIのサイトで入手できます。