カスタムコントロール(ボタン)を追加する

LR賃貸ブログというサイトでの、2015年のエイプリルフールネタ。 これそのものはウソネタだったんですが、あまりにバズってしまったため、後日本当にIngressに対応しました

そこにあったのは、Google Mapsに追加された「Ingress」というボタン。 オリジナルでボタンを作って、それを無理やりマップ上に置いたのかなぁと思ったら、Google Maps API自体にカスタムコントロールを配置する体制が整っていたようです。

んで、実際にやってみたのがこちら。


機能的にはLR賃貸のパク……、似たようなもので、やり方はGoogle Developersのドキュメントからのほぼコピペ。 ソースは以下のとおり。

function mapInitialize(lat, lng, mapBox, draggable) {
	var myLatlng = new google.maps.LatLng(lat, lng);
	var myOptions = {
		zoom: 16,
		center: myLatlng,
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById(mapBox), myOptions);
	
	//カスタムのボタンの枠を準備して、そこにボタンのスタイル、動作をしていする
	var ingressButtonDiv = document.createElement('div');
	var ingressButton = new ingressControl(ingressButtonDiv, map);
	
	//設定したカスタムコントロールをマップに打ち込む
	ingressButtonDiv.index = 1;
	map.controls[google.maps.ControlPosition.TOP_RIGHT].push(ingressButtonDiv);
}

//カスタムコントロール作成
function ingressControl(buttonDiv, map) {

	//ボタン内部のスタイル設定
	var buttonUI = document.createElement('div');

	buttonUI.style.backgroundColor = '#001E22';
	buttonUI.style.border = '1px solid #41FCE5';
	buttonUI.style.boxShadow = 'rgba(0, 0, 0, 0.3) 0px 1px 4px -1px';
	buttonUI.style.cursor = 'pointer';
	buttonUI.style.padding = '1px 6px';
	
	buttonUI.style.color = '#41FCE5';
	buttonUI.style.fontFamily = 'Roboto, Arial,sans-serif';
	buttonUI.style.fontSize = '11px';
	buttonUI.style.textAlign = 'center';

	buttonUI.title = 'Dive into Ingress';
	buttonUI.innerHTML = 'Dive into Ingress';

	buttonDiv.style.padding = '5px';
	buttonDiv.appendChild(buttonUI);
	
	//クリックイベントの追加
	google.maps.event.addDomListener(buttonUI, 'click', function() {
		var center = map.getCenter();
		var zoom = map.getZoom();
		window.open('https://www.ingress.com/intel?ll=' + center.lat() + ',' + center.lng() + '&z=' + zoom);
	});
}

//マップ初期化
jQuery(document).ready(function() {
	mapInitialize(33.5839857,130.38645, 'map-canvas');
});