地図の上に落書きする

説明

地図の上に落書きするするにはグーグルマップと同じ標示範囲にcanvasを重ね合わせます。そのcanvasに対してマウスダウンイベントが発生したらcanvas上に描画を行います。するとcanvasに描かれた図形とグーグルマップが合成されて画面上に表示されます。

Google Maps API プログラミング入門。Google Maps API Expertである勝又雅史氏が最新のAPI ver3やGoogle Maps for Flashなどについて解説しています。
【アマゾンで購入する】

サンプルコード [実行]

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google Maps API ver 3 Sample/グーグルマップAPIサンプル/Google Maps API样品</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/draw.js"></script>
</head>
<body>
<div id="gmap"></div>
<canvas id="myCanvas" width="640" height="500"></canvas>
<div id="result">---</div>
<script type="text/javascript">
var map = new google.maps.Map(
document.getElementById("gmap"),{
zoom : 7,
center : new google.maps.LatLng(35.689160610317174, 139.70083951950073),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
);
var points = [], myPath = new google.maps.Polyline();
google.maps.event.addListener(map, "click", function(evt) {
var pos = evt.latLng;
var lat = pos.lat();
var lng = pos.lng();
document.getElementById("result").innerHTML = "緯度："+lat+"、経度："+lng;
points.push(new google.maps.LatLng(lat, lng));
myPath.setPath(points);
myPath.setMap(map);
});
// 地図の上でドラッグして描く
var drawFlag = false;
var oldX = 0;
var oldY = 0;
window.addEventListener("load", function(){
var can = document.getElementById("myCanvas");
can.addEventListener("mousemove", draw, true);
can.addEventListener("mousedown", function(e){
drawFlag = true;
oldX = e.clientX;
oldY = e.clientY;
}, false);
can.addEventListener("mouseup", function(){
drawFlag = false;
}, false);
}, true);
// 描画処理
function draw(e){
if (!drawFlag) return;
var x = e.clientX;
var y = e.clientY;
var can = document.getElementById("myCanvas");
var context = can.getContext("2d");
context.strokeStyle = "rgba(255,0,0,0.5)"; // 赤色
context.lineWidth = 10;
context.beginPath();
context.moveTo(oldX, oldY);
context.lineTo(x, y);
context.stroke();
context.closePath();
oldX = x;
oldY = y;
}
</script>
</body>
</html>