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 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"
});
11 comments:
Thank you for releasing this wonderful tool but I am still having a few questions about OMap though. First, how to get a URL that contains my API code, specific zoom level, lat and lon from the "Link to this page" button at the top right of each page of Google Maps site? Second, how can I set "Hybrid" as my default type of maps.
Also, I have a question about how to create a box for html tags in a post.
Looking forward to seeing your new version of OMap!
hanjie, thanks for the comment. Let me try to answer your questions.
First, about a URL. Yes, you can get the URL from the "Link to this page" button at the top right of each page of Google Maps site. The URL contain information about the point (latitude and longitude) in ll=, the zoom level in z= and the map type in t=.
To your second question, my answer is that there is no way to specify default map type in the current OMap. OMap tries to use the map type specified in the URL (t=). However if a post contains multiple URLs, OMap uses G_NORMAL_MAP.
The third question is about a box. You don't need to add any html tags in your post for a box. OMap inserts a div tag in the top of the post. This div tag becomes a box containing a map.
Thank you for the reply, tasuke.
Can you tell me more about the information in a URL such as amp, spn=, and om=1.
Two more questions for you: how can I draw a polyline with a GPS tracking log and show it via OMap in a post, and how to get the URL refering a specific source of image from flickr?
Thank you for your time.
I asked the same question at Google Group. I learned that there is no official information about the URL's parameters and some unofficial information is provided by Google Map Parameters - Google Mapki.
I appreciate that you carefully look at one of the sample posts. Yes, OMap draws a polyline if your post includes an ordered list (ol tag) with class="OMapRoute". The list items (li tags) in the ordered list are the points generating a polyline. Such an ordered list looks like:
<ol class="OMapRoute">
<li>35.73181243063871,139.76773381233215</li>
<li>35.73074118770954,139.76744413375854</li>
<li>35.73072376900629,139.7672939300537</li>
</ol>
Each li tag has latitued and longitude of the point on the polyline. <li>35.73181243063871,139.76773381233215</li> means that the latitude is 35.73181243063871 and the longitude is 139.76773381233215.
The other question is about how to include Flickr photo in a map. If OMap finds img tags in the map links, which are a tags whose href= are Google Maps Links. If you specify in src= attribute of an img tag a URL of your Flickr photo square size (75px X 75px) image, OMap treats it as a marker on the map and prepares a mouse over event for the marker which shows a small size Flickr photo for the marker.
I want to thank you again for this great tool and your answers to my questions.
A few features I would like to suggest though. A controllable default map type setting for multiple URLs in a post; an adjustable map location in a post but not always on top of a post.
Take a look of my maps if you like, I can't wait to see your next version of OMap!
Hanjie, thank you for the feedback
I am glad to see you use OMap in your post. I understand why default map type has to be controlable. Your suggestions definitely improve OMap. I will update OMap in a few days to add default map type as a parameter of OMapInit function.
If you want to place a map where you like in your post, please insert div tag such as, <div class="OMapFramePH"></div>. When OMap finds a div tag with class="OMapFramePH", it treat it as a placeholder in the post. That is, OMap uses the OMapFramPH div for map area instead of inserting a div tag at the top of your post.
Besides if you specfy style attribute in the the OMapFramPH div, you can change the size of map like <div class="OMapFramePH" style="height:300px;width:100%;clear:both;"></div>.
Hanjie,
A controllable default map type setting for multiple URLs in a post is now available. Please download new OMapInit.js and replace your copy. And please replce
OMapInit("post-body");
in your html template by
OMapInit({
"postBodyClass":"post-body",
"defaultMapType":"k"
});
You are the man! tasuke.
Thank you so much for the effort.
Dear Tasuke, can I specify the zoom level in one single post by using "forceZoomLevel" arguement instead of the whole blog?
Hello dear hanjie,
No you can't. "forceZoomLevel" applies to the whole blog, not a single post.
Dear Tasuke,
OMap only displays maps on the first page of blogger (my setting: 7 posts/page). If You click on older posts, no map shows on my older posts; however, if you click on any specific post with OMap embeded, it works perfectly. Do you know what might be the cause?
Post a Comment