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 ) 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.
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.
First you need to create a
<div> with a unique ID in the place where the map should appear:
<div id="map" style="width: 500px; height: 300px"></div>
Now you have to insert your API key between
</head> as follows:
<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:
<body onload="load()" onunload="GUnload()">
GUnload() belongs to the Google API and is useful to minimize memory problems. It is therefore advisable to implement it here.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
- 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:
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:
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.)
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.