HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Dieses Board ist für Anleitungen gedacht, wie man bestimmte (komplexe) Dinge mit CMSms erledigen kann - User-Beiträge herzlich willkommen!
NaN

HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by NaN »

Da schon öfter die Frage gestellt wurde wie man eine einfache Google-Map auf seine Seite zaubern kann, hier mal eine Stück-für-Stück-Anleitung:

1. Problem: Editor "verschandelt" HTML-Code

Genaugenommen verschandelt der Editor da nichts.
Wenn ich im Editor z.B. folgenden Google-Code eingebe:

Code: Select all

<__iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="http://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=&q=Dorfstra
%C3%9Fe+31,+13051+Berlin&sll=52.524316,13.45277&sspn=0.008577,0.027895&ie=UTF8&
amp;ll=52.587928,13.487091&spn=0.015644,0.025749&z=14&iwloc=A&output=embed"></__iframe><br 
/><small><a href="http://maps.google.de/maps?f=q&source=embed&hl=de&geocode=&q=Dorfstra
%C3%9Fe+31,+13051+Berlin&sll=52.524316,13.45277&sspn=0.008577,0.027895&ie=UTF8&
amp;ll=52.587928,13.487091&spn=0.015644,0.025749&z=14&iwloc=A" style="color:#0000FF;
text-align:left">Größere Kartenansicht</a></small>
Dann macht der WYSIWYG-Editor lediglich seine Arbeit und wandelt den kompletten Code so um, dass er genauso wie hier eingegeben auch auf der Internetseite angezeigt wird.
Als reiner Text.
Nicht als HTML.
(WYSIWYG eben)

Lösung:
HTML Code immer im HTML-Modus eingeben.


Aus dem 1. Problem folgt das 2. Problem: im WYSIWYG-Modus des Editors wird das iFrame nicht korrekt dargestellt.

Das ist wohl ein Problem das sich nicht so ohne weiteres Lösen lässt.
Es liegt vielleicht daran, dass der Editor ja selbst ein iFrame ist, dessen Inhalt mit massiven Einsatz von Javasrcipt gesteuert wird.
Und bei externen Inhalten in Iframes gelten für JavaScript gewisse Einschränkungen.

Außerdem würde beim Bearbeiten einer Seite mit einem iFrame im Inhalt der (beim Erstellen erfolgreich im HTML-Modus eingefügte) iFrame Code wieder "verschandelt" werden.


Lösung:
keinen HTML-Code für die Anzeige eines iFrames verwenden.
Stattdessen liefert CMSms bereits eine Funktion namens {embed}, mit deren Hilfe sich iFrames ganz ohne Verwendung von HTML sowohl im HTML-Modus als auch im WYSIWYG-Editor einfügen lassen.

Edit:
Dieser Tag fuktinioniert aber leider nicht immer wie erwartet.
(Hängt wie beim WYSIWYG-Editor mit JavaScript und externen Inhalten zusammen.)
Daher hab ich hier mal eine modifizierte Version angehängt: LINK
(nach dem Download die Endung .txt entfernen und die Datei in das Verzeichnis Plugins kopieren)


Kurz gesagt funktioniert der Tag folgendermaßen:

Code: Select all

{embed url="URL zur Google Map" width="..." height="..."}

Was ist die URL zur Google Map?

(Kleiner Tipp: Es ist nicht der komplette von Google angegebene Code.)

1. Man gebe bei Google-Map eine Adresse ein, die man auf seiner Seite anzeigen möchte.
2. Man wähle rechts oben über der Karte die Option "Link".
   Dort nichts kopieren!
   Statdessen besser auf den Link "Eingebettete Karte anpassen und Vorschau anzeigen" klicken.

3. Es erscheint ein neues Fenster mit einem Ausschnitt der Karte.
   Diesen Ausschnitt kann man hier in Größe und Position an seine Internetseite anpassen.

4. Ist man zufrieden, kopiert man vom Google-iFrame-Code nur die URL, die im iFrame angezeigt werden soll.
   Bei Iframes ist das das src-Attribut.
   Das ist ein ewig langes Monstrum, bei dem man nicht genau erkennt wo es anfängt bzw. aufhört:
   (rot markiert)


...
5. Nun fügt man im Editor diese URL als Wert für den Parameter "url" ein.
   Für die Parameter "width" und "height" nimmt man am besten die gleichen Werte, die man beim Anpassen
   seiner Karte verwendet hat.

Hinweis 1:
Die Parameter "width" und "height" erwarten konkrete Einheiten.
Einfach nur die Zahl (z.B. width="300") reicht nicht aus.
Richtig wäre width="300px" (für Pixel) oder width="100%" (für realtive Größen).

Hinweis 2:
Google hat Sonderzeichen in der URL bereits mit HTML Entities maskiert (also aus "&" wurde bereits "&").
Wenn man die URL jetzt so wie sie ist im WYSIWYG-Modus im Editor einfügt, werden diese Zeichen doppelt konvertiert.
D.h. aus "&" wird "&".
Was zur Folge hat, dass die Karte auf der Internetseite nicht korrekt dargestellt werden kann.
Daher - wie bereits beim ersten Problem erwähnt - die URL immer im HTML-Modus einfügen.
Dies gilt nur fürs Einfügen der URL.
Nicht für das spätere Nachbearbeiten der Seite.
Beim späteren Bearbeiten gibt es keinerlei Probleme, da der Editor bereits konvertierte HTML Entities für die Anzeige im Editor nicht nocheinmal zu konvertieren braucht.
Attachments

[The extension txt has been deactivated and can no longer be displayed.]

Last edited by NaN on Mon Mar 22, 2010 8:32 pm, edited 1 time in total.
Wurst
Forum Members
Forum Members
Posts: 67
Joined: Wed Apr 22, 2009 2:40 pm

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by Wurst »

Danke!
Habe das jetzt probiert mit folgendem Code:

Code: Select all

{embed url="http://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=&q=Dorfstra
%C3%9Fe+31,+13051+Berlin&sll=52.524316,13.45277&sspn=0.008577,0.027895&ie=UTF8&
amp;ll=52.558403,13.448639&spn=0.125234,0.137329&z=11&output=embed"  width="200" height="300"}
Es erscheint: Nichts.
Wo ist der Fehler?
NaN

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by NaN »

Ach menno!
Dieser blöde {embed}-Tag!
An und für sich eine gute Idee.
Allerdings mit viel zu viel Zeugs beladen was am Ende eh keiner so richtig nutzen kann.
Füge mal

Code: Select all

{embed header=true}
im Head Deines Templates ein.
Wurst
Forum Members
Forum Members
Posts: 67
Joined: Wed Apr 22, 2009 2:40 pm

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by Wurst »

Ach richtig, hatte das in der TAG-Hilfe gelesen. Werde es ausprobieren.
Danke! :)
Wurst
Forum Members
Forum Members
Posts: 67
Joined: Wed Apr 22, 2009 2:40 pm

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by Wurst »

Ok, die Karte wird nun angezeigt. Aber leider nicht richtig. Egal was ich bei width oder height eintrage, der Kartenausschnitt verändert sich nicht.

Hier der Code:
{embed url="http://maps.google.de/maps?f=q&source=s ... q=Dorfstra
%C3%9Fe+31,+13051+Berlin&sll=52.524316,13.45277&sspn=0.008577,0.027895&ie=UTF8&
amp;ll=52.556734,13.439026&spn=0.166986,0.137329&z=11&output=embed" width="200" height="400"}


Größere Kartenansicht}
Hier der Link:
http://www.henra-anhaenger.de/index.php?page=kontakt

Weiß nicht weiter. Kann es daran liegen, dass irgendwo Bildbegrenzungen eingestellt sind?
Wurst
Forum Members
Forum Members
Posts: 67
Joined: Wed Apr 22, 2009 2:40 pm

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by Wurst »

Ich noch mal. Der Firebug zeigt an, dass das Bild auf 256x256 begrenzt ist. Nur weiß ich nicht warum?

Ich hänge mal einen Screenshot an.
Attachments
google.png
NaN

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by NaN »

Sorry, verwende schon seit einer Weile eine modifizierte Version des Embed Tags.
Geistert hier schon irgendwo im Forum rum.
Die Parameter "width" und "height" gibt es von Werk aus ja (immernoch!) nicht.

Versuchs mal mit dem Plugin im Anhang.
(siehe ersten Beitrag)
Dieses

Code: Select all

{embed header=true}
kannst Du dann wieder löschen.
(wird in Deinem Fall ja eh nicht benötigt)

Hat irgendwie immer noch keiner kapiert, dass das JavaScript nur dann funktioniert, wenn der Inhalt des iFrames vom selben Server aus geladen wird.
Last edited by NaN on Sat May 23, 2009 9:09 pm, edited 1 time in total.
Wurst
Forum Members
Forum Members
Posts: 67
Joined: Wed Apr 22, 2009 2:40 pm

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by Wurst »

Danke! Nun funktioniert es.
cyberman

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by cyberman »

Danke übrigens für das schöne HowTo - habs gleich mal Sticky gemacht :) ... wär doch schade drum.

Um den Tag werd ich mich auch kümmern ...
Last edited by cyberman on Mon Aug 10, 2009 11:07 am, edited 1 time in total.
NaN

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by NaN »

Soweit ich weiß erlaubt Google diese Art der Einbindung auch für Unternehmensseiten.
Und das schon seit etwa Juli 2006.
Einzige Bedingung ist, dass die Seite für alle frei zugänglich ist.
Erst wenn man einen kostenpflichtigen Dienst mit Hilfe der Google Maps anbietet, muss man die API verwenden.
Dazu muss aber die Map Bestandteil der kostenpflichtigen Dienstleistung sein.
Solange die entsprechende Seite frei verfügbar ist, sollte es da keine Probleme geben.

Das eigentliche Problem ist nicht die API, sondern das Kartenmaterial.
Das kommt nicht von Google, sondern von einem Drittanbieter.
Dieser hat Copyright und Urheberechte an dem Material.
Ich darf es also nur in bestimmten Rahmen nurtzen.
Solange ich die Kartendaten über Google nutze, ist alles Paletti, weil es einen ganz klaren Vertrag zwischen dem Urheber des Kartenmaterials und Google gibt, der die Nutzung ganz konkret beschreibt.
Erst wenn ich Screenshots anfertige, wird's kritisch, da hier nicht mehr genau verfolgt werden kann, in welchem Rahmen das Bild genutzt wird.

Ich muss hier mal jemanden zitieren, der sich damit auskennt:
Mattias Schlenker wrote:Die Nutzungsrechte sind ziemlich eindeutig: Google Maps erhält die Bilder für den recht eng abgegrenzten Zweck, sie als zoom- und scrollbare Karten in Webseiten einzubinden. Google darf diese Funktion dann auch weiter lizenzieren — was sie derzeit ja kostenlos machen.

Deshalb ist man auf der sicheren Seite, wenn man Google Maps per Iframe oder JavaScript einbindet, das ist sogar auf kommerziellen Seiten zulässig, wenn diese allgemein zugänglich sind.
NaN

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by NaN »

Hier zeigt sich juristisches Halbwissen ;)
Denn mit Deinem Fazit bist Du leider auf dem Holzweg.

Mir sind die Nutzungsbedingungen von Google bekannt.
Und ab wann eine Webseite gewerblich genutzt wird ist generell keine Auslegungssache.
Das lässt sich sehr leicht und sehr eindeutig feststellen.

Aber:

Gewerbliche Nutzung einer Webseite ist nicht gleichzusetzen mit gewerblicher Verbreitung von Kartenmaterial und schon garnicht mit "Unternehmenswebsite".

Gewerbliche Verbreitung von Google Maps ist selbst mit dem kostenlosen Google Maps API nicht erlaubt.
Für solche Fälle oder Intranet-Anwendungen (also nicht öffentlich) gibt es spezielle kostenpflichtige Lizenzen.

Wenn Dein Gewerbe also nicht auf Google Maps aufbaut, dann kann Google völlig egal sein, was Du sonst noch mit Deiner Webseite machst. Wenn man z.B. einfach nur den Firmenstandort auf seiner wie auch immer genutzten Webseite anzeigen will, dann muss diese Seite mit diesem Standort öffentlich und kostenfrei zugänglich sein.*

Die Anzeige der Map (oder eine andere Funktion aus Google Maps Service) darf nicht Bestandteil eines kommerziellen Angebots sein.*

Kommerziell bedeutet in diesem Falle*:

Ich müsste für die Ansicht eines bestimmten Kartenausschnitts von Google Maps auf Deiner Webseite bezahlen.
D.h. diese Google Maps Anwendung wäre
    a) nicht für jedermann frei zugänglich (wer nicht zahlt, bekommt nichts zu sehen) und
    b) würde ich mit diesem Service (der ja eigentlich nicht von mir kommt) auch noch Geld verdienen.

Und das ist nicht erlaubt. (Logisch, oder?)
Egal, ob es eine Unternehmensseite oder private Homepage ist.
Ich darf also nicht an Google Maps verdienen.
Ob ich darüber hinaus sonst noch irgendwie mit meiner Seite Geld verdiene, geht Google einen feuchten Kericht an und interessiert die Jungs deshalb auch überhaupt nicht.
Und ob ich dazu nun den von Google sebst bereitgestellten iFrame Code oder Google Maps API verwende, ist am Ende vollkommen wurscht. Denn Goolge Maps API macht am Ende auch nichts weiter als via Javascript ein iFrame zu generieren.
jadix Internet Media Agentur wrote: Ich gehe bei meinem Projekten immer auf Nummer sicher und binde die Maps per API ein.
Damit bist Du nicht sicherer als mit dem iFrame Code.
Denn eine gewerbliche Nutzung des von Google kostenlos bereitgestellten Google Maps API ist generell nicht erlaubt.
Es kommt dabei nicht darauf an, wie Du Deine Seite nutzt, sondern darauf, wie Du den Service von Google Nutzt.
Und diesen darfst Du einfach nicht weiter vermarkten, da es ja nicht Dein Produkt ist.
(Es sei denn Du hast eine entsprechende Lizenz von Google erworben.)

Es gibt generell keinen Unterschied zwischen kostenloser Google Maps API und iFrame Code.
Beide unterliegen den gleichen Lizenzbestimmungen.

Madiken (Google Mitarbeiter) wrote:
[...] ich hüpf hier nochmal in die Diskussion um zu sagen, dass, sofern ihr euch ansonsten an die AGBs haltet, die Funktion des iFrame und die API den gleichen Regeln unterliegen. Ihr könnt also auch in eine gewerbliche Seite einen iFrame einbinden oder eine API, wenn die Seiten frei für jedermann zugänglich sind.
Nachzulesen unter: Google Support Forum

oder:

IT-Rechtskanzlei München:
http://www.it-recht-kanzlei.de/googlemaps-homepage.html
http://www.it-recht-kanzlei.de/index.ph ... &comid=509
http://www.it-recht-kanzlei.de/index.ph ... &comid=503

Ich hoffe, damit etwas Klarheit verschaffen zu können.

* Edit:
Aus gegebenem Anlass noch eine kleine Ergänzung hierzu. Ein Werbebanner oder Google Adsense oder irgendetwas anderes, woran man als Webseitenbetreiber durch den bloßen Aufruf dieser Seite Geld verdient, könnte allerdings wieder zu einem Problem werden, da hier wieder eine gewerbliche Nutzung einer Seite vorliegt, die unter anderem einen Service von Google Maps beinhaltet. Also immer darauf achten, ob mit der Seite auf der die Google Map angezeigt wird in irgendeiner Form Geld verdient wird.


jadix Internet Media Agentur wrote:Ist auch kein Akt und man hat vielmehr Gestaltungsmöglichkeiten
Ja, aber was meinst Du warum dieses Thema "... die einfache Variante ..." heißt ;)
Für Google Maps API muss man einen Schlüssel anfordern.
Und Javascript ist nicht jedermanns Sache.
Last edited by NaN on Mon Aug 02, 2010 2:10 pm, edited 1 time in total.
delueks
Forum Members
Forum Members
Posts: 11
Joined: Tue Dec 29, 2009 1:22 pm

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by delueks »

habe zwar keine Google Map eingebunden, trotzdem funktioniert dieser Hinweis..

…allerdings nur im Firefox!  ???  :(
Im Explorer verschiebt sich der ganze Frame unter das Menü, weshalb sich die gesamte Darstellung verschiebt.
Auch wird der Scrollbalken im Explorer nicht angezeigt, im Firefox schon..

Kann mir da jemand helfen?  :-\

So sieht meine Seite momentan aus (bitte einmal mit Explorer und einmal mitm Firefox öffnen - weiß einfach nicht woran das liegt): http://www.immobilien.bz.it/index.php?page=real

Danke für Eure Hinweise!
NaN

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by NaN »

Öffne mal die Datei function.embed.php und mach mal in Zeile 135 (bei der modifizierten Version) aus dem "overflow:visible" einfach "overflow:auto".
Dann ist auch im IE der Scrollbalken zu sehen.

Code: Select all


return   "<__iframe id='".$iframe_id."' src='$url' scrolling='no' marginwidth='0' marginheight='0' frameborder='0' vspace='0' hspace='0' style='overflow:auto; ".$width."; ".($hide_iframe=="yes"?'display:none;':'').($height!=''?$height.';':'').$style."'></__iframe>";

Der Rest ist eine Frage Deines Stylesheets und des Markups.
Solange Deine Seite nicht valide ist, würde ich auch nicht erwarten, dass sie von allen Browsern korrekt angezeigt wird.
Aber dazu dann bitte in Layout und Design weitermachen ;)
delueks
Forum Members
Forum Members
Posts: 11
Joined: Tue Dec 29, 2009 1:22 pm

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by delueks »

vielen Dank für den Hinweis, hat echt vielversprechend ausgeschaut, leider aber hats nicht gefruchtet!
Habs auch mit "overflow-y:visible" versucht, aber auch mit "auto" wars nicht zielführend!  :-\

Hast du/hat jemand noch einen Tip?
Wegen dem Design poste ich gleich in der anderen Rubrik - Danke!
NaN

Re: HowTo: Google-Maps einbinden (die einfache Variante mit {embed})

Post by NaN »

Dann mach mal in derselben Zeile aus dem scrolling="no" einfach scrolling="auto".
Und dann würde ich das iFrame für den IE ein wenig schmaler machen, dann dürfte es auch nicht mehr nach unten rutschen.
Und dann beseitige mal die Markupfehler.
Da werden einige Divs nicht geschlossen.

So siehts jetzt bei mir im IE aus:

Image


Edit:

Aber wozu brauchst Du dazu ein iFrame?
Um die Immobilien so darzustellen, kannst Du z.B. auch einfach das News-Modul verwenden.
Dann sparst Du Dir das iFrame und kannst die Immobilien bequem mit CMSms verwalten.
Last edited by NaN on Wed Dec 30, 2009 1:58 pm, edited 1 time in total.
Post Reply

Return to “HowTo's”