Наведите указатель мыши на карту google

Question

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

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

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

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

Answer 1

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

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

Update:

Я имел шанс попробовать это и он работает нормально:

• Map example with Google style buttons
• Javascript Source

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

Answer 2

Только для дополнения ответа 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> 

---

UPDATE: Существует также расширение в библиотеке Google Maps утилита, которая может выполнить эту - ExtMapTypeControl

Answer 3

У меня тоже была такая же проблема, вот как я это сделал, Crea те кнопку и дать ему НИЖЕ ДЛЯ УКЛАДКИ

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

Answer 4

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

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

Answer 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());