地図上から引き出し線を引く

説明

地図上から線を引いて説明文を書く場合には、JavaScriptのグラフィックライブラリを利用します。グラフィックライブラリには、いくつかありますが、以下のライブラリを利用すると線や楕円、四角形など様々な図形を手軽に描画させることができます。続きは書籍で、どうぞ...
逆引きGoogle Maps APIリファレンス 　詳しい解説などは逆引きGoogle Maps APIリファレンス、またはGoogle Maps APIリファレンスを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Sample</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
map = new GMap2(document.getElementById("gmap"));
var x = 138.7311887741089;
var y = 35.36284101638963;
map.setCenter(new GLatLng(y, x), 10);
map.disableDragging();
var gObj = new jsGraphics("gmap"); // 描画先をマップにする
// 富士山の線
gObj.setColor("#ff0000"); // 赤色にする
gObj.setStroke(2); // 線の太さを2pxにする
gObj.drawLine(250, 200, 600, 55); // 線を描画する
gObj.paint(); // 線を表示する
// 本栖湖の線
gObj.setColor("#0000ff"); // 赤色にする
gObj.setStroke(2); // 線の太さを2pxにする
gObj.drawLine(146, 114, 600, 25); // 線を描画する
gObj.paint(); // 線を表示する
}
//]]>
</script>
</head>
<body>
<div id="gmap" style="width: 500px; height: 400px"></div>
<div style="position:absolute;top:53px;left:610px">富士山です</div>
<div style="position:absolute;top:25px;left:610px">本栖湖です</div>
</body>
</html>