Download
Save the following files in your PC and upload them to your site:
| Blogger Beta | TypePad | |
|---|---|---|
| JavaScript file | OMapInit.js | OMapInit.js |
| CSS file | OMap.css | OMap.css |
Installation
Update your HTML templates to include the Google Maps API JavaScript file, the JavaScript file, and the CSS file as follows:
<html>
<head>
....
<script src='http://maps.google.com/maps?file=api&v=2.x&key=your API key' type='text/javascript'></script>
<script src='http://your site/OMapInit.js' type='text/javascript'></script>
<link href='http://your site/OMap.css' rel='stylesheet' type='text/css'/>
....
</head>
<body>
....
....
....
<script type='text/javascript'>
//<![CDATA[
window.onunload = GUnload ;
OMapInit();
//]]>
</script>
</body>
</html>
Options
There are two options about how maps are displayed in the page:
- TopMapDisplay
- In order to display a map whose markers point to posts containing maps, "TopMapDisplay = true" has to be specified. Because the default value is "false" and the map on the top of the page is not shown.
- PostMapFloat
- When "PostMapFloat = true" is specified, a map in the post is aligned to the left or right depend on CSS class specification, postMapFloat. By default, which is "false", the map is shown at the end of the post.
These options can be specfied immediately before calling OMapInt() like this:
<script type='text/javascript'>
//<![CDATA[
window.onunload = GUnload ;
// OMap option parameters:
TopMapDisplay = true;
// to display the big map on the top of page
PostMapFloat = true;
// to float a map in the post
OMapInit();
//]]>
</script>
</body>
</html>
Customizing CSS
In OMap.css there are several classes defined. The following classes are what you might want to customize to fit maps to your blog:
- topMap
- When you specify "TopMapDisplay = true", you can also modify this class by specfying width, height and so on.
- postMap
- By default ("PostMapFloat = false"), this class is used for the area (div tag) containing a map in the post. You can change width and height of that area.
- postMapFloat
- When you specify "PostMapFloat = true", you can also modify this class by specfying float:right or float:left as well as width and height
- postMapLarge
- When you specify "PostMapFloat = true", you can also modify this class by specfying float:right or float:left as well as width and height. This class is used when double clicking a floated map with "PostMapFloat = true".
