Thursday, October 05, 2006

OMap 1.0 for Firefox

I am very happy to announce on my 44th birthday that the first release of OyajiMapper, OMap 1.0 for Firefox works on this site. To be honest, I didn't intend to write OMap only for Firefox. But it doesn't work by Internet Explorer at all. What I can say at this moment is just "I don't know why, please tell me what I should do for fixing the problem". I want to work hard to make it available for a lot of vistors using IE. If you would kindly look at my code, OyajiMapper.js, any advise or sugesstions are highly appreciated. If you visit this site by Firefox, you can enjoy how OMap serves you at my two posts, Walking in Ueno and Walking in Tokyo. On either post, you find pink colored links. If you click one of them, a map appears at the bottom of the post. If you are nice to know how this works, please browse the page source. But you can only find usual a tags whose hrefs are URLs of pages in Google Maps such as:
http://maps.google.com/maps?ll=35.686634,139.786273
One of OMap functions reads the whole page to find out those a tags. It changes the color and background color of them using the Document Object Model (DOM) methods. It also adds onlick attributes to them. Another OMap function is called at onclick event. It also uses some DOM methods and Google Maps API to display a map. If you want to use my JavaScript, please copy OyajiMapper.js to your blog site and link to your OyajiMapper.js by a script tag in html head like:
<script src='http://your blog site/OyajiMapper.js' type='text/javascript'></script>
You have to specify OMapInit function as a function executed at onload event by changing your HTML template. I did it myself by placing the following code immediately before body end tag:
<script type='text/javascript'> //<![CDATA[ OMapInit(); //]]> </script> </body>
In order to use OMap, you need to have your own Google Maps API key. If you are not familar with it, please read my post, Getting an API key. If you blog site is TypePad, you need change OMAP_TARGET_CLASS variable in OyajiMapper.js as:
var OMAP_TARGET_CLASS = "entry-body" ;
The default value of OMAP_TARGET_CLASS is "post-body", whichi is the class attribute value of a div tag containing a post of Blogger. If you have any question or if you kindly give me any feedback, please leave your comment on this post or send an e-mail to me. Tasuke Isshin / tasuke.isshin@gmail.com

1 comment:

Anonymous said...

Very Cool stuff!!