スマホでも通用するGoogle Mapsで中心にCrosshairを配置する方法

Google Mapsで地図の中心にCrosshair（十字）を描こうとすると、ちょっと面倒ですよね。

google maps crosshairなどでググると、OverlayViewに配置して、地図の中心が変わるたびに再描画する、という以下のような方法が紹介されています。

PCオンリーな方法

function Crosshair() {
	this.setMap(map);
	this.div_ = document.createElement('div');
	this.div_.innerText = "+";
	this.div_.id = "crosshair";
};
Crosshair.prototype = new google.maps.OverlayView;
Crosshair.prototype.onAdd = function() {
	var pane = this.getPanes().overlayLayer;
	pane.appendChild(this.div_);
	var me = this;
	this.listeners_ = [
		google.maps.event.addListener(this.getMap(), 'center_changed',
			function() { me.draw(); })
	]
}
Crosshair.prototype.draw = function() {
	var projection = this.getProjection();
	var position = projection.fromLatLngToDivPixel(map.getCenter());
	var div = this.div_;
	div.style.left = position.x + 'px';
	div.style.top = position.y + 'px';
}
crosshair = new Crosshair();

これをスマホなどの非力な端末でやると、地図の中心を変更するたびに、Crosshairが中心点からずれてしまってみっともないことになります。

この方法よりももっと簡単でスマホにも優しいのは、地図とは別の（Google Maps管轄外の）DOM要素を配置して、それを地図上に重ねる方法です。
具体的には、HTMLタグで地図キャンバスとCrosshairのDIVを以下のように配置し、

HTML

<div id="wrap">
	<div id="map-canvas"></div>
	<div id="cross"></div>
</div>

CSSで地図の上にDIVを配置します。

CSS

#wrap{
	width: 300px;
	height: 300px;
	position: relative;
}
#map-canvas{
	width: 100%;
	height: 100%;
}
#cross{
	position: absolute;
	width: 2px;
	height: 20px;
	background: #000;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
#cross::before{
	content: "";
	position: absolute;
	width: 20px;
	height: 2px;
	background: #000;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

ポイントは、"pointer-events: none;" で、地図よりも手前（z-indexが上）にあるCrosshairのDIVをマウスやタッチ操作から無効化することです。

これでスマホにも優しいCrosshairの出来上がりです。
デモ