HowTo: work around GoogleAPI single directory limit
The GoogleAPI, when publicly released as version 1, required the use of an API key that is assigned to a user on a per directory basis. What this means is that the particular GoogleMap API key can only be used in that particularly directory on a website and not any other directory. For example, a key generated for highearthorbit.com/maps/ would not work for
highearthorbit.com/highearthorbit.com/projects/locationwww.highearthorbit.com/www.highearthorbit.com/maps/
This is particularly a problem when your website uses rewrites to make per-tee urls for posts instead of the ?p=141. Each post looks like a separate directory and therefore the sidebar with map you see to your right (if you’re not viewing the RSS feed) doesn’t work.
The work around for this is to place the GoogleMap in an iframe, which is an inline frame and acts as a window to another webpage. That webpage is just a GoogleMap that sits at the base directory of your website. Any other page can now include that GoogleMap by using a single API-key.
To illustrate, your webpage would include the following html where appropriate:
<iframe src="http://highearthorbit.com/googleMapFrame.php?lat=42
&lon=-120" height="200px" width="200px" frameborder="No" scrolling="No"></iframe>
The corresponding googleMapFrame.php is just a wrapper around the GoogleMap call and code. This file needs to reside in the directory where you generated your API-key:
<html>
<head>
<script src=”http://maps.google.com/maps?file=api&v=1&
key=YourKeyHere” type=”text/javascript”></script>^M
<body>
<div id=”googlemap” style=”width:200px;height:200px;”>
<script type=”text/javascript”>
// Create a map with small controls
myMap = new GMap ( document.getElementById ( “googlemap” ) ) ;
myMap.centerAndZoom ( new GPoint ( <?=$_GET['lon']?>, <?=$_GET['lat']?> ) , 4 ) ;
myMap.addControl ( new GSmallMapControl ( ) ) ;
// Add the location marker passed in via the url
var point = new GPoint ( <?=$_GET['lon']?>, <?=$_GET['lat']?> ) ;
var marker = new GMarker ( point ) ;
myMap.addOverlay ( marker ) ;
</script>
</head>
</body>
</html>
That’s all you have to do. This work around actually has the nice effect of making adding a GoogleMap to the website very easy. I don’t have to worry about including the initial GMap javascript include, or creating a div container and then calling the javascript code. I just put the iframe whereever I want it on the page and *poof!*, there it is.
It would also be a good idea to add the ability to set the size of the GoogleMap (and iframe) on a per page basis, and do multiple waypoints, tracks etc. Essentially a fully functional mini-api wrapper around the larger GoogleMap API.
My name is 
August 2nd, 2005 at 2:22 pm (#)
Well, you could just have the iframe source pass the width and height as a part of the parameters and output them in the iframe document. That would be a simple and elegant solution.
August 3rd, 2005 at 12:19 pm (#)
I’m not sure I know exactly what you mean. I could do:
<iframe src='page.php?height=200&width=200' height='200px' width='200px'/>
Which is what I’ve actually done on my pages, but this still does repeat the height & width. Is there a slicker way?