Ginchens Blog

[:de]Google-Maps XHTML-konform einbinden[:en]Embedding Google Maps XHTML conform[:]

[:de]

Ich bin ganz froh, diesen Post schreiben zu können, denn er erlaubt mir, beiläufig eine News einzustreuen, die eines eigenen Posts nicht unbedingt würdig gewesen wäre: Die letzten drei Tage habe ich damit verbracht, diese Seite XHTML-valide zu machen. Zuerst hatte ich mit der Transitional-Variante begonnen, weil sonst verschiedene Dinge, die ich gerne beibehalten wollte, nicht mehr so ohne weiteres funktioniert hätten. Aber dann traf es mich plötzlich wie der Blitz, und ich dachte: „Was zum Teufel tust du hier eigentlich?!“ – Und getreu meinem Motto „Ganz oder gar nicht“ machte ich mich daran, die Seite in XHTML Strict umzuschreiben. Wer sich vom Erfolg meiner Arbeit überzeugen möchte, kann gerne mal hier klicken. (Einzig die Besucherseite ist noch nicht angepaßt – da muß ich erst noch austüfteln, wie das geht.)

Ein großes Problem, dessen Lösung (einschließlich der vorangegangenen Suche nach selbiger:“Google Maps über API einbinden(webmasterpro.de)“:http://www.webmasterpro.de/coding/article/javascript-google-maps-ueber-api-einbinden.html :“Google Maps API benutzen(drweb.de)“:http://www.drweb.de/magazin/google-maps-api-benutzen/ ) mich fast einen ganzen Tag gekostet hat, waren die Google Maps, die ich hier und da verwende. Google selbst bietet zum schnellen Einbau einer Karte in eine Homepage einen kurzen, einzeiligen Code an, welcher die Karte per IFrame in die Seite einbettet. Tja, dumm nur, daß IFrames in XHTML Strict nicht erlaubt sind. Auch meine Versuche, die URL der Karte aus dem Code zu nehmen und irgendwie als Objekt einzubinden, scheiterten kläglich. Also blieb mir nur noch eine Möglichkeit: die Google-Maps-API. Wie das geht, will ich im folgenden erläutern. Eines jedoch gleich vorweg: Es ist ein wenig umständlicher und erfordert ein kleines bißchen mehr Arbeit als nur mal eben einen Code-Schnipsel zu kopieren und irgendwo einzufügen.

[:en]

I’m quite glad I can write this post, for it allows me to parenthetically intersperse the news that I did not deem worthy of an own post: I have spent the last three days making this site XHTML valid. First I had started with the Transitional version, because otherwise several things which I wanted to keep wouldn’t have worked anymore. But then suddenly, I was struck by thunder and thought: „What the hell are you doing?!“ – And true to my motto „Completely or not at all“, I began rewriting this site to XHTML Strict. If anybody wants to convince himself of the success of my work, you are welcome to click here. (Only the visitors page has not been adapted yet – I still have to figure out how this can be done.)

A great problem that took me almost a whole day to solve (including search for solutions:“Google Maps über API einbinden(webmasterpro.de)“:http://www.webmasterpro.de/coding/article/javascript-google-maps-ueber-api-einbinden.html :“Google Maps API benutzen(drweb.de)“:http://www.drweb.de/magazin/google-maps-api-benutzen/ ) were the Google Maps I use here and there. Google itself offers a short, single-line code for quick integration of maps on a website, which embeds the map into the page by means of an IFrame. Well, what a pity that IFrames aren’t allowed in XHTML Strict. My attempts to take the map URL from the code and somehow embed it as an object failed miserably as well. So there was only one way left: the Google Maps API. In the following, I will try to explain how that works. But one thing beforehand: It is a little more laborious and requires a bit more work than just copying a code snippet and inserting it somewhere.

[:][:de]

Zuallererst benötigt man ein Google-Konto und einen Google-API-Key. Das kostet nichts, und man muß auch keine privaten Daten preisgeben. Lediglich die Domain, auf der der Key genutzt werden soll, muß angegeben werden. Dann kann es auch schon losgehen.

Schritt 1

Zuerst legt man da, wo die Karte erscheinen soll, ein <div> mit einer eindeutigen ID an:

Schritt 2

Nun muß man seinen API-Key wie folgt zwischen <head> und </head> einfügen:

Schritt 3

Gleich in Schritt 4 werden wir eine Javascript-Funktion schreiben, welche unsere Karte erstellt und in dem dafür vorgesehenen <div> anzeigt. Diese Funktion werden wir load() nennen. Damit sie dann beim Laden der Seite auch aufgerufen wird, muß man den <body>-Tag wie folgt erweitern:

Die Funktion GUnload() gehört zur Google-API und dient der Verminderung von Speicherproblemen. Es ist daher empfehlenswert, sie an dieser Stelle ebenfalls einzubauen.

Schritt 4

Jetzt kommt das Herzstück des Codes, die load()-Funktion, die letztendlich unsere Karte erstellen wird. Man kann sie ebenfalls in den <head>-Bereich einbauen; das ist aber nicht zwingend erforderlich – man kann sie auch erst an späterer Stelle einfügen. Wenn man vorhat, eine sehr umfangreiche Karte mit vielen Ortsmarken zu erstellen, dann kann man das Script der Ordnung halber natürlich auch in eine eigene .js-Datei schreiben und diese dann so einbinden:

Was nun die Karte betrifft, ist es, glaube ich, am einfachsten und verständlichsten, wenn ich ein fertiges Beispiel poste und erläutere:
  • Zeilen 2 und 26:
    Das Script wird als CDATA-Block definiert. Das erlaubt es uns, innerhalb des Scripts Zeichen wie <, > usw. zu verwenden, ohne daß der Browser sie als HTML interpretiert und die Seite zerschießt.
  • Zeile 4:
    Die Karte wird erstellt und im Element mit der ID „map“ dargestellt. Und das ist ja unser eben erstelltes <div>, in das die Karte rein soll.
  • Zeile 5:
    Die Art der Darstellung wird gewählt. Hier gibt es drei Optionen:
    • G_NORMAL_MAP – normale vektorisierte Landkarte
    • G_SATELLITE_MAP – Satellitenfotos
    • G_HYBRID_MAP – eine Mischung aus den beiden vorangegangenen: Satellitenfotos, die von der Vektorkarte überlagert werden
  • Zeile 8:
    Die Knöpfe zum Zoomen und Navigieren auf der Karte werden erstellt. Auch hier gibt es wieder drei Optionen:
    • GSmallZoomControl() – nur zwei kleine Plus- und Minus-Buttons zum Zoomen
    • GSmallMapControl() – Plus- und Minus-Buttons sowie vier Richtungspfeile
    • GLargeMapControl() – vier Richtungspfeile und eine Zoom-Skala
  • Zeile 11:
    Die Buttons oben rechts, die dem User das Umschalten zwischen Vektor-, Satelliten- und Hybridansicht erlauben, werden eingebaut.
  • Zeile 14:
    Der Mittelpunkt, also das Zentrum der Karte, wird definiert. Dazu macht man eine genaue Angabe in Breiten- und Längengraden. Wie man an diese Daten kommt, erkläre ich weiter unten noch.
  • Zeile 15:
    Die Karte wird nun auf den zuvor definierten Mittelpunkt zentriert. Außerdem wird hier der Zoomfaktor bestimmt: Je höher der Wert ist, desto weiter ist man von der Erde entfernt. Je kleiner der Faktor, desto näher und detaillierter ist die Ansicht.
  • Zeilen 18-20 sowie 22-24:
    Hier habe ich nun beispielhaft zwei Ortsmarken erstellt. Nach genau diesem Muster kann man so viele weitere Ortsmarken einfügen wie man will. In der ersten Zeile gibt man den gewünschten Ort wieder in Breiten- und Längengraden an, und in der zweiten Zeile kann man das Popup, das bei Klick auf die Marke erscheint, noch beliebig mit HTML gestalten. Bitte beim Copy & Paste nicht vergessen, daß die Bezeichner wie „ortsmarke1“, „ortsmarke2“ in jedem Abschnitt jeweils viermal vorkommen und dementsprechend angepaßt werden müssen.

Wo bekomme ich die Breiten- und Längengrade her?

Was die Koordinaten angeht, gibt es Anbieter, die sich genau darauf spezialisiert haben, z. B. itouchmap.com. Dort kann man eine Adresse eingeben oder auch einfach den Marker auf der Karte an die gewünschte Position schieben und dann sofort Latitude (Breite) und Longitude (Länge) ablesen.

Das Ergebnis all dieser Mühen kann dann beispielsweise so aussehen:

Update (12. Oktober 2009)

Auch wenn es jetzt schon ein Weilchen her ist: Ich habe immer wieder mal über die Diskussion mit Kommentator „Peter“ nachgedacht und denke, daß ich noch einmal genauer darauf eingehen sollte:
Wenn es einem lediglich darum geht, dem Kunden ein „This document was successfully checked as XHTML 1.0 Strict!“ präsentieren zu können, man sich aber in Wirklichkeit gar nicht dafür interessiert, welchen Code der Browser am Ende tatsächlich darstellen muß, dann kann man natürlich den Trick anwenden, die invaliden Abschnitte einfach in ein Javascript zu packen. So werden sie zwar vom Validator überlesen, der Browser wird aber später trotzdem gezwungen, sie per document.write() einzubetten und darzustellen. Man sollte sich nur überlegen, ob das dann wirklich der Sinn der Sache war.

Das endgültige HTML, das der Browser bei meiner Methode am Ende darstellen muß, besteht fast ausschließlich aus Containern und Bildern und ist somit so gut wie valide. Man kann ihn sich hier anschauen. (Einzig die alt-Attribute bei den Bildern fehlen – daran hat man bei Google leider nicht gedacht.)
Baut man jedoch den direkt von Google gelieferten, „schlechten“ Code mittels Javascript ein, muß der Browser anschließend das hier darstellen. Also doch wieder einen I-Frame. Und die entsprechen nun mal einfach nicht der XHTML-Spezifikation.

Es ist also natürlich ein Leichtes, schlechten/falschen/invaliden Code vor dem tollen W3C-Validator zu verstecken, aber das war ja hier nicht mein Anliegen. Mir ging es darum, eine Google-Map so einzubauen, daß das, was am Ende beim Browser ankommt, auch tatsächlich valider Code ist und nicht invalider, der nur geschickt reingeschmuggelt wurde.

[:en]

First of all, you will need a Google account and a Google API key. That doesn’t cost anything, and you don’t have to reveal private data either. You only have to specify the domain on which the key shall be used. Then we’re ready to go.

Step 1

First you need to create a <div> with a unique ID in the place where the map should appear:

Step 2

Now you have to insert your API key between <head> and </head> as follows:

Step 3

In step 4, we will write a javascript function which creates our map and displays it inside of our <div>. We shall call that function load(). In order to activate it when loading the page, you have to extend the <body> tag as follows:

The function GUnload() belongs to the Google API and is useful to minimize memory problems. It is therefore advisable to implement it here.

Step 4

Now for the heart of our code, the load() function, which will finally create our map. You can put it in the <head> section as well; that’s not necessarily needed though – you can also insert it at a later point. If you plan to create a very extensive map with many location markers, you can of course write the script into an own .js file for order’s sake, and then integrate it like this:

Now, as for the map, I think it’s easiest and most comprehensible if I post a complete example and then explain it:
  • Lines 2 and 26:
    The script is defined as a CDATA section. That allows us to use characters like <, > etc. inside of the script without the browser interpreting them as HTML and destroying the layout.
  • Line 4:
    The map is being created and displayed inside the element with the ID „map“. And that is our <div> which we created earlier and which shall contain the map.
  • Line 5:
    The display type is chosen. There are three options:
    • G_NORMAL_MAP – ordinary vectorized map
    • G_SATELLITE_MAP – satellite photos
    • G_HYBRID_MAP – a mixture of the former two: satellite photos which are overlaid with the vector map
  • Line 8:
    The buttons for zooming and navigation on the map are created. Again, there are three options:
    • GSmallZoomControl() – only two small plus and minus buttons for zooming
    • GSmallMapControl() – plus and minus buttons as well as four arrows
    • GLargeMapControl() – four arrows and a zoom scale
  • Line 11:
    The buttons in the upper right, which allow the user to switch between vector, satellite and hybrid view, are being implemented.
  • Line 14:
    The center point, i. e. the centering of the map, is defined. For this purpose, you need to specify an exact location in degrees of longitude and latitude. I will explain below how to obtain these data.
  • Line 15:
    The map is now centered to the previously defined point. Also, the zoom factor is specified here: The higher the value, the further away you are from earth. The smaller the factor, the closer and more detailed is the view.
  • Lines 18-20 and 22-24:
    Here I have created two exemplary location markers. Based on this pattern, you can insert as many additional markers as you like. In the first line, you specify the desired location in degrees of latitude and longitude again, and in the second line you can design the popup, which appears after a click on the marker, with HTML as you wish. When copy & pasting, please don’t forget that the identifiers like „location1“, „location2“ etc. always appear four times in every section and must be adapted accordingly.

Where do I get the latitudes and longitudes?

As for the coordinates, there are providers who have specialized in this very subject, e. g itouchmap.com. There you can enter an address or just move the marker to the desired position on the map and then immediately read off latitude and longitude.

The result of all these efforts can for example look like this:

Update (12. October 2009)

Although it’s been quite a while now: I remembered the discussion with commentator „Peter“ every now and then and think that I should elaborate on that again in a more detailed manner:
If you only want to present the customer a „This document was successfully checked as XHTML 1.0 Strict!“, but actually don’t really care what code the browser has to display in the end, you can of course use the trick and just put the invalid parts inside a Javascript. This way they will be ignored by the validator, the browser, however, will later be forced to embed and display them via document.write() anyway. You should just ask yourself if that really was the point of it.

The final HTML that the browser has to display using my method consists almost exclusively of containers and images and is thereby as good as valid. You can have a look at it here. (Only the alt attributes of the images are missing – unfortunately, Google didn’t think of that.)
If, however, you insert the „bad“ code delivered by Google itself with the help of Javascript, the browser has to display this afterwards. So, it’s an I-Frame again after all. And those simply don’t meet the XHTML specifications.

So, it is of course easy to hide bad/wrong/invalid code from the W3C validator, but that was not my concern here. I wanted to show how to implement a Google Map in a way so that the code that finally arrives at the browser is indeed valid code and not an invalid one that has just been cleverly smuggled in.

[:]

Ginchen

,
, , , ,

10 Antworten zu “[:de]Google-Maps XHTML-konform einbinden[:en]Embedding Google Maps XHTML conform[:]”

  2. you are not serving your page with Content-Type: application/xhtml+xml

  4. Ach Ginchen!
    Du bist mir vielleicht ein Bienchen!
    Ist nicht bös‘ gemeint… ;-)

    Probier‘ mal folgendes (XHTML 1.0 strict valides) script :

    <script type="text/javascript">
/* <![CDATA[ */

document.write('<iframe width="425" height="350" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="http://maps.google.de/maps?f=q&source=s_q&hl=de&
geocode=&q=Pariser+Platz+1,+10117+Berlin&sll=52.52301,13.381948&
sspn=0.035929,0.077248&ie=UTF8&z=14&iwloc=A&ll=52.522854,13.381948&output=embed">
</iframe><br /><small><a href="http://maps.google.de/maps?f=q&source=embed&hl=de&
geocode=&q=Pariser+Platz+1,+10117+Berlin&sll=52.52301,13.381948&sspn=0.035929,0.077248&
ie=UTF8&z=14&iwloc=A&ll=52.522854,13.381948" style="color:#0000FF;text-align:left">
Größere Kartenansicht</a></small>');

/* ]]> */
</script>

    dann funzt es XHTML 1.0 Strict valide, weil scriptbasierte funktion…

    Deine Google-API Sache ist ja auch nur deswegen valide weil sie auf Javascript basiert!

    Viel Spass!

  5. Deine Google-API Sache ist ja auch nur deswegen valide weil sie auf Javascript basiert!

    Hmm, das ist irgendwie nicht ganz richtig. Da ist doch nur ein div, in das per Script verschiedene Bilder reingeladen werden. Kein iframe oder sowas, der nur durch Javascript vor dem Validator „getarnt“ wird.
    Also, wenn man es auf echtes XHTML anlegt, würde ich bei meiner Methode bleiben, während bei Deiner der Browser am Ende ja doch wieder gezwungen wird, nicht-validen Code darzustellen.

    Trotzdem finde ich Deine Variante super, wenn man nicht ganz so ein Korinthenkacker ist wie ich! ;)
    Ich füge das später mal noch in den Post ein.

    P.S.: Das mit den Sonderzeichen in Kommentaren muß ich echt mal ändern… :D

  6. Naja,

    mit dem div-Container für das Ajax hast du vielleicht recht, der ist in der Tat XHTML-konform (wie alle Container).

    Aber Javascript ist es per se eigentlich nicht!
    Du maskierst ja auch das Javascript mit dem CDATA vor dem Validator – oder nicht? Da macht es qualitativ kaum einen Unterschied auch noch einen iframe zu maskieren…

    Cool wird es erst, wenn Du Googlemaps via php einbindest – nämlich ganz ohne Javascript.

    Dann ist es immer schön valide und es ist (großes Plus!) zudem auch völlig gleich ob jemand Javascript clientseitig abgestellt hat.

    Wie das geht?

    Schau hier!

  7. Naja, das Maskieren mache ich ja nur, damit ich unkompliziert HTML-Tags im Javascript notieren kann und nicht, um dort nicht-valides HTML notieren zu können. ;) Was der Browser in meinem Beispiel am Ende mittels Javascript erzeugt, ist reines, valides HTML in Form von etlichen Containern und Bildern. Bei Deiner Methode dagegen erzeugt er einen (nicht validen) I-Frame.

    Dennoch bist Du ein wahrer Quell der Weisheit – auf die Idee mit PHP kam ich irgendwie auch noch nicht. ;)
    … leider geht aber Dein Link schon wieder nicht… :D

  8. “ … leider geht aber Dein Link schon wieder nicht… „

    Deshalb hab‘ ich ihn auch gleich ein zweites mal geposted, der geht hoffentlich. ;-)

    Den ersten Eintrag darfst Du also getrost wieder löschen falls er zu arg stört!

    Und der „Quell der Weisheit“ ist geschenkt, denn der Titel gebührt wohl eher Google…:-)

  9. So lange die Seite nicht als application/xhtml+xml ausgeliefert wird, ist sie nicht zu 100% XHTML und kein Browser profitiert davon da immer noch der langsame HTML-Parser verwendet werden muss!

  10. Jor – das war damals eigentlich nur ein „Unfall“. Hatte da beim Erstellen meines neuen Themes noch den alten Wert drin gehabt. Dennoch ändert das ja nix an dem hier vorgestellten Code, darum hatte ich diesen „Einwand“ damals nicht ganz verstanden. ;)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.