Schneller Tipp Einbetten neuer Google Maps

Das neue Google Maps wurde der Öffentlichkeit bereits im Juli öffentlich zugänglich gemacht. Es ist jedoch immer noch eine Vorschau auf das endgültige Produkt. Daher fehlen einige bekannte Funktionen.

Haben Sie beispielsweise versucht, eine neuere Google-Karte in eine Webseite einzubetten? Der zuverlässige alte "Link" -Button ist nirgends zu finden! Einige Leute schlagen vor, dass Sie zu den alten Google Maps zurückkehren, einen Iframe auf die ursprüngliche Weise einbetten und dann zur neueren Maps-Vorschau wechseln, wenn Sie fertig sind. Aber es gibt einen anderen Weg, und es ist ein Weg, wie Sie die neueren, hübscheren Google Maps wie folgt nutzen können:

Dies ist kein Bild ...

Maps Engine Lite

Maps Engine Lite (Beta) ist ein Tool, mit dem Sie Ihre eigenen benutzerdefinierten Karten entwerfen und speichern können. Um davon Gebrauch machen zu können, müssen Sie über ein Google-Konto verfügen und angemeldet sein.


Sie können Ihre Karten dann veröffentlichen und freigeben. Beginnen wir mit dem Klicken auf "Neue Karte":


Geben Sie die Envato-HQ-Adresse als Beispiel in das Suchfeld ein:


Nachdem Sie das Büro gefunden und eine Markierung hinzugefügt haben, können Sie unserer Karte jetzt einen Namen geben, indem Sie auf "Untitled map" klicken:


Wir können auch auf "Untitled Layer" klicken, um dem Namen einen Namen zu geben. Danach können wir alle Arten von Orten, Routen und Gebieten zu unserer Karte hinzufügen. Wir können auch über Datei-Uploads importieren, aber vorerst konzentrieren wir uns nur auf unseren einzelnen Marker. Stellen Sie sicher, dass Sie den gesuchten Ort zu Ihrer Karte hinzugefügt haben. Dann können Sie sich auf die Markierungsfunktionen konzentrieren.


Jetzt ist Envato HQ unter der Ebene "Standorte" aufgeführt. Wir können Farbe, Beschriftung und sogar das Symbol ändern. Google hat hier eine Fülle von Anpassungsmöglichkeiten bereitgestellt, also viel Spaß beim Erkunden! Ich habe HQ ein gelbes Bürosymbol gegeben.


Ein weiteres nettes Feature der neueren Google Maps sind die verschiedenen Themen. Klicken Sie auf "Basiskarte" und schlagen Sie sich raus. Ich habe "Wildwasser" gewählt:



Freigabeeinstellungen ändern

Nachdem Sie unsere Karte fertiggestellt haben, müssen wir nun die Freigabeeinstellungen ändern. Klicken Sie daher oben rechts auf die Schaltfläche "Teilen".

Daraufhin wird ein Dialogfeld angezeigt, in dem Sie die Sichtbarkeit Ihrer Karte von "Privat" auf "Öffentlich" ändern können. Dies ist notwendig, um Ihre Karte in eine Webseite einzubetten.


Klicken Sie anschließend auf das Symbol "Ordner" und wählen Sie "Auf meiner Website einbetten"..


Sie erhalten ein HTML-Snippet wie dieses:

zum Einbetten eines iframe in eine Webseite.


Machen Sie Ihre Karte flüssig

Eine letzte Sache ist, dass Ihre Karte im aktuellen Zustand nicht genau reagiert. Lassen Sie uns es in ein fließendes Element einwickeln (ähnlich wie das für flüssige Video-Einbettungen verwendete), damit wir es in ein responsives Layout integrieren können.

Zunächst wickeln wir ein zusätzliches Element um unseren iframe:

Dann passen wir die Größe des Wrappers mithilfe von Füllungen an (eine Eigenschaft für die Flüssigkeitshöhe funktioniert nicht) und positionieren den Iframe darin:

.Flüssigkeitsverpackung Position: relativ; Polsterboden: 56,25%; / * 16: 9 * / Höhe: 0;  .fluid-wrapper iframe position: absolut; oben: 0; links: 0; Breite: 100%; Höhe: 100%; Grenze: keine; 

Diese Auffüllung von 56,25% verleiht unserem Container ein Verhältnis von 16: 9, was bei Video eine Überlegung wert ist. Sie können jedoch Ihr Google Map-Rechteck so gestalten, wie Sie es wünschen.


Fazit

Das ist es! Ganz einfach, aber eine dieser nützlichen kleinen Aufgaben, die vorübergehend umständlich gemacht wurde, während Google den Übergang zu den neueren Maps vollzog.

ps) Haben Sie die letzte Google Maps Street View-Wanderung der Galápagos-Inseln gesehen? Eine Reise wert…

Weitere Informationen zu Google Maps in Tuts+

  • Hinzufügen von Markenstandorten zu Google Maps
  • Mit der Google Maps-API kreativ werden
  • Fügen Sie Ihren Google Maps einen Hauch Realismus hinzu
  • Responsive, retinafied Google Map Images