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

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

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

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

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

<div id="map-canvas" class="map-canvas" style="width:640px;height:480px;"></div>
<script type="text/javascript">
  function initMap() {
    var myLatlng = {lat: 35.658620, lng: 139.745417};
    var map = new google.maps.Map(document.getElementById("map-canvas"), {
      zoom: 16,
      center: myLatlng,
    });
    
    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 = "rgb(0, 79, 74)";
    buttonUI.style.border = "1px solid #59fbea";
    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 = "#59fbea";
    buttonUI.style.fontFamily = "Coda, Arial,sans-serif";
    buttonUI.style.fontSize = "15px";
    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);
    });
  }
</script>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>