About OyajiMapper.js

OyajiMapper.js is a single JavaScript file which contains a set of functions to display maps using Google Maps API. I would like to call OyajiMapper as OMap for saving transmitted data in the Internet. This single JavaScript file takes care of everything OMap can do. So if you like OMap you can use it by saving the file and copying it to your website where you want to use functions of OMap. At the point of writing this entry, there are no OMap functions implemented. OyajiMapper.js is an almost empty file with only a few comments. My objective of this entry is to explain why I want to write OMap and what OMap functions will be implemented. This is an overview of OMap. I have posted entries using Google Maps API to include maps in my entries. One of such entries is this entry in TypePad. Since I don't like to see any logic or code in an blog entry which should contain only data, I implemented some functions that read position information in the HTML document and call Google Maps API to display the map. If you browse the HTML source of that entry, you will find out a div tag having id="map-35.701915,139.75498". One of my functions checks all div tags in the page using DOM. If any div tags whose IDs contains "map-", the function treat them as the places replaced by maps. The latter part of the ID is the latitude and the longitude of the place. Another function of mine calls Google Maps API to display the map. I was successfull in a sense that I could remove any JavaScript code in a blog entry. But I am not satisfied about IDs. My brief is that IDs or keys are only for machine or computer and they are never for human beings. If a program needs an ID, it should take care of itself and a blogger has not to help it. As a matter of fact, it is difficult to assign an ID to her blog entry. Because the ID should be unique in all the possible pages which contains her entry such an index page, an archive page, category pages and an individual page. And if you want two maps in your entry, you need two different IDs. Another thing I don't like is that it is not semantic. Why should part of the ID be latitude or longitude? No one can imagine the meaning of ID or a fragment of his blog entry without knowledge of the JavaScript functions implemented. Those are the reasons why I want to write another set of JavaScript functions, OMap. Let me summarize them as follows:

1. Any JavaScript codes should be separated from a blog entry.
2. IDs for identifying the div elements for maps should be taken care by outside JavaScript functions which need IDs. So a blogger doesn't have to write IDs in his blog entries.
3. Only things a blogger write in her entries are place information such as latitude, longitude, name of the place and its description. And the data written in a blog entry should be written semantically.

I have written too much in a single entry. So I would like to write in another entry about what what functions will be implemented in OyajiMapper.js.

Getting an API key

This site is the official site of OyajiMapper. At the same time this site is where I am going to test my OyajiMapper. In order to do so, I need a Google Maps API key for this site. It is simple to get an API key from the Google Maps API site. It takes only a few clicks from its home page to get your own API key. Your key can be used only by your site, whose URL will be asked by the Google Maps API site before Google giving you a key. If you try to use a key of someone else, the Google Maps API doesn't work and prompts an error message such as:

The Google Maps API key used on this web site was registered for a different website. You can generate a new key for this web site at http://www.google.com/apis/map/ .

The next thing to do is to add a HTML link element in the HTML head in your pages. As I am going to test here, so what I have to do is to edit my blogger template. How the link element should be coded is documented at the Google Maps API site and you can copy and paste it to your pages or blog template(s). The last thing to do is to verify the configuration. The Google Maps API site's page provide a whole HTML document sample which includes a sample JavaScript to use Google Maps API, as well as the HTML link element in the head which is to read a JavaScript file from Google with the API key as one of its parameters. I made a slight different verification because I don't like the sample JavaScript to be executed by body tag's onload attribute. So instead of executing the sample when a HTML page load is completed, I write a HTML a element (anchor), such that the provided function, load() is called to display a Google Map bellow by clicking here.

It was such an easy task. Partly because I had done the same things three times for the other sites. But even at the first time it was that easy. So now this site is ready for testing my JavaScipt, OyajiMapper.js, but it has no data or function definitions at all when I write this post. I will be back when I start writing some codes.

Starting OMap

Hello, my name is Tasuke Isshin. I am working at support desk of the Oyaji Gyagu 2.0 web site. I am going to write entries about the development of OyajiMapper or OMap, which helps bloggers post entries with maps.