How to write a blog post with OMap
OMap searchs links to Google Maps pages in your blog post. So you can simple give a link to your words in your blog post.
OMap: Nishinippori, Yanaka, Ueno is a sample blog post.
<p>After taking a rest at
<a href="http://maps.google.com/maps?key=ABQIAAAAkS41J6-HBoJpLyLJXqmzTxTqk2QfI72xHMsR7rgFOegqpKgRnxQMU-pwEWbFdN96JlccciIb1p9Xzw&ie=UTF8&z=18&ll=35.732244,139.76746&spn=0.00219,0.003433&om=1">a cafe</a>
in Nishinippori, we climbed up
<a href="http://maps.google.com/maps?key=ABQIAAAAkS41J6-HBoJpLyLJXqmzTxTqk2QfI72xHMsR7rgFOegqpKgRnxQMU-pwEWbFdN96JlccciIb1p9Xzw&amp;amp;ie=UTF8&z=19&ll=35.730807,139.767447&spn=0.001095,0.001717&amp;amp;amp;amp;amp;amp;amp;om=1">a slope</a>,
to
<a href="http://maps.google.com/maps?key=ABQIAAAAkS41J6-HBoJpLyLJXqmzTxTqk2QfI72xHMsR7rgFOegqpKgRnxQMU-pwEWbFdN96JlccciIb1p9Xzw&ie=UTF8&z=19&ll=35.730837,139.76709&spn=0.001095,0.001717&om=1">Suwa Jinja Shrine</a>,
where Kokontei Shinsho was training his Rakugo in secret. After praying there, we came up to the top of
<a href="http://maps.google.com/maps?key=ABQIAAAAkS41J6-HBoJpLyLJXqmzTxTqk2QfI72xHMsR7rgFOegqpKgRnxQMU-pwEWbFdN96JlccciIb1p9Xzw&amp;amp;ie=UTF8&z=19&ll=35.72984,139.767254&spn=0.001095,0.001717&amp;amp;amp;amp;amp;amp;amp;om=1">Fujimizaka</a>.</p>
The above is part of HTML source of the sample blog post. You can see long long URLs as specfied by href. But you cannot find any JavaScript code for Google Maps API. Because OMap takes care of these URLs and call Google Maps APIs to display a map in the post.
For advanced use of OMap, please read OMap: New Functions by OMap 1.3.
Download
OMap 1.3 consists of the following two files:
- OMapInit.js
- OMap.css
OMapInit.js is a JavaScript file which define OMapInit function, which is executed at onload event of html page. OMap.css is a sample CSS definition file. You can change the layouts of a map created by OMapInit.
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[
OMapInit("post-body");
//]]>
</script>
</body>
</html>
If you want to draw polylines in a map, you need to change your html template to add xmlns:v='urn:schemas-microsoft-com:vml' to html tag.
This is a sample about how this site's html tag is modified.
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:v='urn:schemas-microsoft-com:vml'>
Please read this about how to draw a polyline by OMap.
Options
You can specify three arguments to OMapInit function as
OMapInit({
"postBodyClass":postBodyClass,
"flickrUserId":flickrUserId,
"deferMap":deferMap,
"forceZoomLevel":forceZoomLevel,
"defaultMapType":defaultMapType
});
- postBodyClass
- The name of class used for blog post container, which varies by blog sites such as "post-body" for Blogger.com, "entry-body" for Typepad and so on.
- flickrUserId
- An optional parameter. If you want to let OMap create a link to your Flickr photo page from the photo in the post, please specify your Flickr userid. If you are not sure about your userid, you can make sure by flickr.activity.userPhotos.
- deferMap
- An optional parameter. If you want to defer OMap process until clicking links, specfiy boolean value, true.
- forceZoomLevel
- An optional parameter. If you want to set zoom level of all maps in your blog, specfify the number of zoom level.
- defaultMapType
- An optional parameter. If you want to set default map type other than normal map, specify "k" for satellite, "h" for hybrid..
Here are samples about how to specify parameters of OMapInit:
OMapInit({"postBodyClass":"post-body"});
OMapInit({
"postBodyClass":"post-body",
"defaultMapType":"k"
});
The first sample specfies only postBody. The second one spefies also an optional parameter, defalutMapType.
The following example specifies all parameters.
OMapInit({
"postBodyClass":"post-body",
"flickrUserId":"71295300@N00",
"deferMap":false,
"forceZoomLevel":15,
"defaultMapType":"h"
});
