Поместите кнопку поверх карты google

Я хотел бы поставить кнопку поверх Карты Google рядом с кнопками Map, Satelite и Hybrid.

Мне было интересно, возможно ли это, и как это будет лучшим способом?

Итак, идеи, которые у меня есть, накладываются на изображение поверх карты google, которое можно щелкнуть, но не уверен, что это приведет к удалению всех событий с карты google.

Есть ли у вас идеи о том, как это можно сделать?

Ответ 1

Существует довольно хорошее описание того, как это сделать здесь.

Я уверен, что вы можете подстроить этих парней, чтобы они выглядели как стандартные кнопки, и вы можете определенно привязать их к верхнему праву. Когда я получу шанс, я дам ему попробовать и обновить свои результаты.

Update:

У меня был шанс попробовать это, и он работает нормально:

В основном вы делаете очень похожие вещи, реализуя кнопки с помощью GControl или просто используя абсолютное позиционирование DIV над картой (как предлагал ChrisB). Поэтому я не думаю, что есть правильный (или более простой) подход, это просто вопрос личных предпочтений. Удачи.

Ответ 2

Принятый ответ с 2009 года (5 лет назад) и ссылки на устаревшую версию API Карт Google.

При поиске того же вопроса я нашел этот пример: 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);

Ответ 3

Только для дополнения ответа Cannonade, здесь используется html/css, который использует элемент управления Google Map. Вы можете реплицировать css, чтобы он выглядел так же, как реальная вещь.

Вы можете создать официальный GControl или просто разместить их по карте Google с абсолютным позиционированием.

Активная кнопка:

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 15.3em;" title="Show street map">
    <div style="border-style: solid; border-color: rgb(52, 86, 132) rgb(108, 157, 223) rgb(108, 157, 223) rgb(52, 86, 132); border-width: 1px; font-size: 12px; font-weight: bold;">
        Map
    </div>
</div>

Неактивная кнопка:

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 5.1em;" title="Show imagery with street names">
    <div style="border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px;">
        Hybrid
    </div>
</div>

ОБНОВЛЕНИЕ: В библиотеке служебных программ Google Maps есть расширение, которое может выполнить это: ExtMapTypeControl p >

Ответ 4

У меня также была та же проблема, вот как я это сделал, создайте кнопку и дайте ей стиль ниже

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;}

Ответ 5

используя 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());