Umieść przycisk na górze mapy google

Question

Chciałbym umieścić przycisk na mapie Google obok przycisków Mapa, Satelita i Hybrid.

Zastanawiam się, czy to możliwe i jak najlepiej to zrobić?

Więc mam pomysły są nakładanie obrazu na górze mapy google, która jest klikalny, ale nie jestem pewien, czy weźmie wszystkie wydarzenia od mapie google.

Czy masz jakieś pomysły na to, jak można to zrobić?

Answer 1

Istnieje całkiem niezły opis tego, jak to zrobić here.

Jestem całkiem pewny, można projektować te chłopaki wyglądają jak standardowe przyciski i na pewno można zakotwiczyć go w prawym górnym rogu. Kiedy dostanę szansę, spróbuję i zaktualizuję wyniki.

Aktualizacja:

miałem okazję spróbować tego na zewnątrz i działa ok:

• Map example with Google style buttons
• Javascript Source

zasadzie skończyć się robi bardzo podobne rzeczy wykonawcze, przyciski za pomocą GControl lub po prostu używając bezwzględnego pozycjonowania DIV na mapie (jak sugeruje ChrisB). Więc nie sądzę, że istnieje poprawne (lub łatwiejsze) podejście, to tylko kwestia osobistych preferencji. Powodzenia.

Answer 2

Tylko w celu uzupełnienia odpowiedzi Cannonade, oto html/css używany przez kontrolkę Google Map. Możesz replikować css, aby wyglądał jak prawdziwy.

Można by stworzyć formalną GControl, czy można po prostu umieścić je na mapie Google z pozycjonowania bezwzględnego.

Aktywny przycisk:

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

Nieaktywny przycisk:

<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: Istnieje również rozszerzenie w Google Maps Utility Library, która może tego dokonać - ExtMapTypeControl

Answer 3

Też miałem ten sam problem, tak to zrobiłem, Crea Te przycisk i nadać mu poniższej Styling

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

Zaakceptowanych odpowiedź jest od roku 2009 (5 lat temu) i linki do nieaktualnych wersji Google Maps API.

Podczas poszukiwania tego samego pytania Znalazłem ten przykład: 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

użyciu jQuery to wygląda tak: najpierw utworzyć funkcję, która zwróci elementu

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

i po Mapa została stworzona trzeba podłączyć przycisk do niego:

map.controls[google.maps.ControlPosition.TOP_CENTER].push(myButton());