web-dev-qa-db-ja.com

グーグルマップの上にボタンを置く

Googleマップの上に、[地図]、[衛星]、[ハイブリッド]ボタンの横にボタンを配置したいと思います。

私はそれが可能かどうか、そしてそれを行うための最良の方法はどのようになるのだろうかと思っていました。

だから私が持っているアイデアは、クリック可能なグーグルマップの上に画像をオーバーレイしていますが、それがグーグルマップからすべてのイベントを取り除くかどうかはわかりません。

それをどのように行うことができるかについて何かアイデアはありますか？

google-mapsbuttonoverlay
13
Mark Ellul

これを行う方法のかなり良い説明があります ここ 。

私はあなたがこれらの人を標準のボタンのように見えるようにスタイリングすることができ、そしてあなたは間違いなくそれを右上に固定することができると確信しています。機会があれば試してみて、結果を更新します。

更新：

私はこれを試す機会がありました、そしてそれはうまくいきます：

基本的に、GControlを使用するか、マップ上でのDIVの絶対配置を使用してボタンを実装するのと非常によく似た処理を行うことになります（ ChrisB が提案したように）。したがって、正しい（またはより簡単な）アプローチはないと思います。それは個人的な好みの問題です。幸運を。

3
RedBlueThing

受け入れられた回答は2009年（5年前）のものであり、非推奨バージョンのGoogle MapsAPIにリンクしています。

まったく同じ質問を検索しているときに、この例を見つけました： https://developers.google.com/maps/documentation/javascript/examples/control-custom

// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);

homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].Push(homeControlDiv);
6
Mars Robertson

私も同じ問題を抱えていました、これは私がそれをした方法です、ボタンを作成してそれに以下のスタイルを与えます

id = "my_button"

 #my_button{
          position:absolute;
          bottom:2%;
          color: #fff;
          background-color: #4d90fe;
          padding: 11px;

          border: 1px solid transparent;
          border-radius: 2px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;

          outline: none;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
          alignment-baseline:central;
          width:90%;
          left:5%;
          text-align:center;
          text-decoration:none;


          margin:0px auto;}


         #my_button:hover{
             background-color:#3B6EC2;}
0
Evanson Biwott

jQueryを使用すると、次のようになります。まず、要素を返す関数を作成します。

function myButton(){
    var btn = $('<div class="my-button"></div>');
    btn.bind('click', function(){
        // logic here...
        alert('button clicked!');
    });
    return btn[0];
}

マップが作成されたら、ボタンをマップにアタッチする必要があります。

map.controls[google.maps.ControlPosition.TOP_CENTER].Push(myButton());
0
Sevalad