Setzen Sie auf eine Schaltfläche auf einer Google-Karte

Question

Ich möchte eine Schaltfläche auf einer Google Map setzen neben der Karte, Sat-und Hybrid-Tasten.

Ich frage mich, wenn sie möglich und wie wäre der beste Weg, es zu tun?

So Ideen ich habe, sind ein Bild oben auf der Google-Karte überlagert, die klickbare ist aber nicht sicher, ob das alle Ereignisse von der Google-Karte nehmen.

Haben Sie Ideen, wie es getan werden könnte?

Answer 1

Es ist eine ziemlich gute Beschreibung, wie diese hier rel="nofollow .

Ich bin ziemlich sicher, dass Sie diese Leute wie die Standard-Tasten aussehen Stil und Sie können es auf jeden Fall nach rechts oben verankern. Wenn ich die Chance bekommen, ich werde es versuchen und Updates mit meinen Ergebnissen.

Update:

Ich hatte eine Chance, diese auszuprobieren und es funktioniert ok:

• Karte Beispiel mit Google Schaltflächen
• Javascript Quelle

Im Grunde beenden Sie mit den Tasten GControl Umsetzung tun sehr ähnliche Dinge oder einfach nur mit absoluter Positionierung eines DIV über die Karte (wie ChrisB vorgeschlagen). Also ich glaube nicht, gibt es einen richtigen (oder einfacher) Ansatz, es ist nur eine Frage des persönlichen Geschmacks. Viel Glück.

Answer 2

Die akzeptierte Antwort ist aus dem Jahr 2009 (vor 5 Jahren) und Links zu einer veralteten Version von Google Maps API.

für die gleiche Frage Während der Suche Ich habe dieses Beispiel gefunden: 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 3

Just Cannonade Antwort zu ergänzen, ist hier das HTML / CSS die eine Google-Map Kontrolle exzellent. Sie können den CSS replizieren, um es genau wie die reale Sache aussehen.

Sie können eine formelle GControl erstellen, oder man konnte sie nur Platz auf der Google Map mit absoluter Positionierung.

Aktiv-Taste:

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

Inaktiv-Taste:

<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: Es gibt auch eine Erweiterung in der Google Maps-Utility Library, dass dies erreicht werden kann - ExtMapTypeControl

Answer 4

Ich habe auch das gleiche Problem hatte, das ist, wie ich es geschafft habe, einen Knopf erstellen und es den unten Styling geben

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 5

mit jQuery sieht es wie folgt aus: Erstellen Sie zunächst eine Funktion, die Ihr Element zurück

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

und nach Karte erstellt wurde, müssen Sie Ihre Taste, um sie zu befestigen:

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