{"id":856,"date":"2008-12-20T15:47:17","date_gmt":"2008-12-20T14:47:17","guid":{"rendered":"http:\/\/blog.ginchen.de\/?p=856"},"modified":"2012-05-06T15:07:00","modified_gmt":"2012-05-06T13:07:00","slug":"google-maps-xhtml-konform-einbinden","status":"publish","type":"post","link":"http:\/\/blog.ginchen.de\/en\/2008\/12\/20\/google-maps-xhtml-konform-einbinden\/","title":{"rendered":"Embedding Google Maps XHTML conform"},"content":{"rendered":"

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<\/a>. (Only the visitors page has not been adapted yet - I still have to figure out how this can be done.)<\/del><\/p>\r\n\r\n

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.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

First of all, you will need a Google account<\/a> and a Google API key<\/a>. 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.<\/p>\r\n\r\n

Step 1<\/h3>\r\n\r\n

First you need to create a <div><\/code> with a unique ID in the place where the map should appear:<\/p>\r\n\r\n

\r\n
<\/div>\r\n<\/pre>\r\n\r\n
Step 2<\/h3>\r\n\r\n
Now you have to insert your API key between <head><\/code> and <\/head><\/code> as follows:<\/p>\r\n\r\n
\r\n