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".
4 comments:
Great Job (Again)
I do have some questions :
Is there any way to desactivate the big map at the top of the page ?
Is it possible to easaly choose where we want to display the map in the post (I prefer it like in the old version at the end of the post)?
Thx for your work it's great, I mean it !
Thank you for your comment on OMap 1.1. I will try to add options to disable the big map at the top and to put a map at the end of the post.
Nice work you have done and thank you for sharing.
I hyperlinked your work to my blog althrough I didn't use your script for the Google Map.
There are two problems I would like to seek solutions from you thought: can I resize the infoWindow to whatever size I want it to be; can the copyright messages that is attached to terms of use be
splitted into two lines if the messages overflow the designated size of the map.
Thank for your suggestion. Althgouh my work is premature, I am very happy to have such a thoughtful comment from you.
I am not either satisfied with infoWiddow of Google Maps API. I've tried several things to get more beautiful infoWindow such as wrapping div tags with CSS definition or specifying {"maxWidth":100} at openInfoWindowHtm API. I have not yet reached any solutions for this.
Another thing is the copyright message. You have good eyes. Yes, it annoys me too.
I think there should be a good solution for infoWindow, because these days I found Google Maps site itself shows better windows. I don't think they have not provided open APIs for them yet.
I also want to study CSS more as well as JavaScript. I think there should be the best solutions using several open standards with the best balance.
Again thank you very much for your comment. It encourages me so much.
Post a Comment