Monday, November 06, 2006

OMap 1.1

Download

Save the following files in your PC and upload them to your site:

Blogger BetaTypePad
JavaScript fileOMapInit.jsOMapInit.js
CSS fileOMap.cssOMap.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&amp;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".