A simple tool for drawing a polyline

The bottom of the page of this log, you will find "Let's play with Google Map". This is a "HTML/JavaScript" page element with source as follows:

<div style="border-style:none;" class="post-body">
   <div style="height:450px;" class="OMapFramePH"></div>
   <p style="display:none;">Start by clicking
   <a href="http://maps.google.com/maps?ll=25.101747,121.548840">here</a>.</p>
   <div class="OMapMarkerWorkArea"></div>
</div>

If you click on the map, a marker appears. If you click again at another place, you will see a line on the map. And you can see the ordered list bellow the map. If you are using Firefox, please select this ordered list, make a right click to select "view selection source", you will see the html source for the line you draw by clicking on the map.

If you want to undo the last click, click the marker.

Testing fixed html source

This entry is also for the problem determination.

1. 22.986401,120.20004
2. 22.986402,120.199989
3. 22.986394,120.199911
4. 22.987431,120.197523
5. 22.987576,120.197076
6. 22.987516,120.197327
7. 22.987511,120.197362
8. 22.987511,120.19738
9. 22.987518,120.197392
10. 22.987519,120.197402
11. 22.98723,120.197443
12. 22.987217,120.197549
13. 22.987214,120.197602
14. 22.98716,120.197617
15. 22.987184,120.197614
16. 22.987221,120.197597
17. 22.987255,120.197584
18. 22.987286,120.197578
19. 22.987311,120.197573
20. 22.987331,120.197563
21. 22.987344,120.197558
22. 22.987355,120.197559
23. 22.987388,120.19757
24. 22.987959,120.19784
25. 22.987978,120.197893
26. 22.98797,120.19793
27. 22.987952,120.19796
28. 22.987416,120.198118
29. 22.987308,120.198171
30. 22.987409,120.198142
31. 22.987437,120.19811
32. 22.987493,120.198079
33. 22.987573,120.198073
34. 22.987635,120.19806
35. 22.987685,120.198058
36. 22.987716,120.198065
37. 22.987735,120.198063
38. 22.987748,120.198055
39. 22.987752,120.198044
40. 22.987753,120.198042
41. 22.987755,120.198043
42. 22.987762,120.198043
43. 22.98777,120.198045
44. 22.987776,120.19804
45. 22.987781,120.198038
46. 22.987794,120.198032
47. 22.987817,120.198023
48. 22.988435,120.197652
49. 22.988458,120.197624
50. 22.988459,120.197637
51. 22.988441,120.197694
52. 22.988422,120.197767
53. 22.988396,120.197845
54. 22.988372,120.197924
55. 22.988133,120.198657
56. 22.988133,120.19877
57. 22.988118,120.19879
58. 22.988118,120.198802
59. 22.988117,120.198806
60. 22.988129,120.198804
61. 22.988139,120.198793
62. 22.988148,120.198787
63. 22.988147,120.198803
64. 22.988146,120.198838
65. 22.98814,120.198885
66. 22.98812,120.198928
67. 22.988094,120.198954
68. 22.988074,120.198964
69. 22.988057,120.198974
70. 22.988043,120.198982
71. 22.988028,120.198991
72. 22.988015,120.199
73. 22.988006,120.199008
74. 22.987998,120.199014
75. 22.987992,120.199018
76. 22.987985,120.199024
77. 22.987979,120.199028
78. 22.987972,120.199032
79. 22.987968,120.199036
80. 22.987964,120.19904
81. 22.98796,120.199041
82. 22.987957,120.199043
83. 22.987953,120.199045
84. 22.987949,120.199048
85. 22.987948,120.199055
86. 22.987951,120.199067
87. 22.987959,120.19908
88. 22.988326,120.199697
89. 22.98832,120.199808
90. 22.988314,120.199913
91. 22.98828,120.199997
92. 22.988215,120.200042
93. 22.988141,120.20007
94. 22.988059,120.200084
95. 22.987978,120.200094
96. 22.987259,120.20025
97. 22.987224,120.200267
98. 22.98724,120.200243
99. 22.987232,120.20019
100. 22.987194,120.200139
101. 22.987169,120.200101
102. 22.987134,120.200087
103. 22.987092,120.200072
104. 22.987055,120.200058

1. 22.9866217,120.2001333
2. 22.9866067,120.20015
3. 22.9867117,120.2001617
4. 22.9866733,120.2001683
5. 22.9866567,120.2001983
6. 22.9866633,120.2001867
7. 22.9866167,120.20009
8. 22.9866667,120.20009
9. 22.9867967,120.20006
10. 22.9868067,120.2000183
11. 22.9866983,120.2000317
12. 22.9866183,120.1999483
13. 22.9867883,120.1998633
14. 22.9868383,120.2000267
15. 22.9866467,120.1999833
16. 22.9866217,120.2000067
17. 22.98673,120.2001733
18. 22.9866617,120.2001483
19. 22.9864533,120.2001583
20. 22.9864833,120.1999933
21. 22.98638,120.2002133
22. 22.986335,120.2002
23. 22.9862533,120.199285
24. 22.986365,120.20003
25. 22.9863767,120.1998633
26. 22.9863917,120.1996817
27. 22.986275,120.1995917
28. 22.9863217,120.1994683
29. 22.9863067,120.19939
30. 22.9862967,120.1993133
31. 22.986295,120.199245
32. 22.9863667,120.1990683
33. 22.9861117,120.1989183
34. 22.9862117,120.198735
35. 22.9860467,120.198565
36. 22.9860233,120.1985017
37. 22.9862,120.19819
38. 22.9860217,120.1978233
39. 22.98756,120.1978483
40. 22.9875217,120.1981733
41. 22.9874667,120.1977567
42. 22.98756,120.1976433
43. 22.98768,120.1971367
44. 22.98747,120.197395
45. 22.9873983,120.19748
46. 22.987365,120.19767
47. 22.9874467,120.197625
48. 22.9874033,120.1976283
49. 22.9874217,120.19758
50. 22.9873717,120.1976233
51. 22.98722,120.19769
52. 22.987435,120.1974033
53. 22.98722,120.19774
54. 22.9873933,120.19753
55. 22.9874283,120.1975
56. 22.9873367,120.19751
57. 22.9873983,120.1975133
58. 22.9874183,120.197475
59. 22.98739,120.1974383
60. 22.98729,120.197965
61. 22.9877067,120.198075
62. 22.9886267,120.1969667
63. 22.9883933,120.1975367
64. 22.9888233,120.1962267
65. 22.9883633,120.1973483
66. 22.98854,120.1977367
67. 22.9881817,120.19803
68. 22.9893917,120.1962033
69. 22.9887267,120.1976233
70. 22.9891617,120.1968517
71. 22.9894233,120.196525
72. 22.9895017,120.1961233
73. 22.9884717,120.197015
74. 22.9884783,120.197055
75. 22.9885183,120.1970867
76. 22.988565,120.1974967
77. 22.98856,120.197615
78. 22.988715,120.197525
79. 22.9887233,120.1975933
80. 22.98855,120.1973883
81. 22.988765,120.19726
82. 22.9884,120.19757
83. 22.98812,120.1979167
84. 22.9881233,120.198145
85. 22.9880367,120.198325
86. 22.987905,120.1984933
87. 22.9881067,120.1988117
88. 22.9880667,120.198755
89. 22.9880367,120.1987617
90. 22.9880233,120.1987567
91. 22.9880217,120.198755
92. 22.9880083,120.19875
93. 22.9880117,120.1987433
94. 22.987945,120.198855
95. 22.98796,120.1990367
96. 22.987885,120.19922
97. 22.98773,120.1993283
98. 22.9876583,120.1992017
99. 22.9877067,120.19907
100. 22.98768,120.199185
101. 22.9877033,120.19918
102. 22.987705,120.19918
103. 22.9876667,120.1991483
104. 22.9876917,120.1991183
105. 22.98767,120.199125
106. 22.9876667,120.1991033
107. 22.987695,120.1991267
108. 22.987695,120.1991183
109. 22.9876967,120.199095
110. 22.987685,120.1990683
111. 22.9876917,120.1990467
112. 22.987715,120.19906
113. 22.9877267,120.19905
114. 22.98774,120.19905
115. 22.9877133,120.1990483
116. 22.9877233,120.1991683
117. 22.9877883,120.199235
118. 22.987945,120.199385
119. 22.9881133,120.19958
120. 22.9881133,120.199785
121. 22.988205,120.200035
122. 22.9880517,120.2001467
123. 22.9878683,120.2001733
124. 22.987685,120.2002
125. 22.9875,120.2001817
126. 22.9873233,120.2001233
127. 22.987275,120.2002517
128. 22.9872883,120.2001617
129. 22.98732,120.2001283
130. 22.98715,120.20004
131. 22.9871867,120.1998467
132. 22.986975,120.199975
133. 22.987265,120.1999067
134. 22.9868317,120.199745
135. 22.98669,120.1996783

Recreating the problem

This entry is only for the problem determination.

1. 22.986401,120.20004


2. 22.986402,120.199989


3. 22.986394,120.199911


4. 22.987431,120.197523


5. 22.987576,120.197076


6. 22.987516,120.197327


7. 22.987511,120.197362


8. 22.987511,120.19738


9. 22.987518,120.197392


10. 22.987519,120.197402


11. 22.98723,120.197443


12. 22.987217,120.197549


13. 22.987214,120.197602


14. 22.98716,120.197617


15. 22.987184,120.197614


16. 22.987221,120.197597


17. 22.987255,120.197584


18. 22.987286,120.197578


19. 22.987311,120.197573


20. 22.987331,120.197563


21. 22.987344,120.197558


22. 22.987355,120.197559


23. 22.987388,120.19757


24. 22.987959,120.19784


25. 22.987978,120.197893


26. 22.98797,120.19793


27. 22.987952,120.19796


28. 22.987416,120.198118


29. 22.987308,120.198171


30. 22.987409,120.198142


31. 22.987437,120.19811


32. 22.987493,120.198079


33. 22.987573,120.198073


34. 22.987635,120.19806


35. 22.987685,120.198058


36. 22.987716,120.198065


37. 22.987735,120.198063


38. 22.987748,120.198055


39. 22.987752,120.198044


40. 22.987753,120.198042


41. 22.987755,120.198043


42. 22.987762,120.198043


43. 22.98777,120.198045


44. 22.987776,120.19804


45. 22.987781,120.198038


46. 22.987794,120.198032


47. 22.987817,120.198023


48. 22.988435,120.197652


49. 22.988458,120.197624


50. 22.988459,120.197637


51. 22.988441,120.197694


52. 22.988422,120.197767


53. 22.988396,120.197845


54. 22.988372,120.197924


55. 22.988133,120.198657


56. 22.988133,120.19877


57. 22.988118,120.19879


58. 22.988118,120.198802


59. 22.988117,120.198806


60. 22.988129,120.198804


61. 22.988139,120.198793


62. 22.988148,120.198787


63. 22.988147,120.198803


64. 22.988146,120.198838


65. 22.98814,120.198885


66. 22.98812,120.198928


67. 22.988094,120.198954


68. 22.988074,120.198964


69. 22.988057,120.198974


70. 22.988043,120.198982


71. 22.988028,120.198991


72. 22.988015,120.199


73. 22.988006,120.199008


74. 22.987998,120.199014


75. 22.987992,120.199018


76. 22.987985,120.199024


77. 22.987979,120.199028


78. 22.987972,120.199032


79. 22.987968,120.199036


80. 22.987964,120.19904


81. 22.98796,120.199041


82. 22.987957,120.199043


83. 22.987953,120.199045


84. 22.987949,120.199048


85. 22.987948,120.199055


86. 22.987951,120.199067


87. 22.987959,120.19908


88. 22.988326,120.199697


89. 22.98832,120.199808


90. 22.988314,120.199913


91. 22.98828,120.199997


92. 22.988215,120.200042


93. 22.988141,120.20007


94. 22.988059,120.200084


95. 22.987978,120.200094


96. 22.987259,120.20025


97. 22.987224,120.200267


98. 22.98724,120.200243


99. 22.987232,120.20019


100. 22.987194,120.200139


101. 22.987169,120.200101


102. 22.987134,120.200087


103. 22.987092,120.200072


104. 22.987055,120.200058

1. 22.9866217,120.2001333


2. 22.9866067,120.20015


3. 22.9867117,120.2001617


4. 22.9866733,120.2001683


5. 22.9866567,120.2001983


6. 22.9866633,120.2001867


7. 22.9866167,120.20009


8. 22.9866667,120.20009


9. 22.9867967,120.20006


10. 22.9868067,120.2000183


11. 22.9866983,120.2000317


12. 22.9866183,120.1999483


13. 22.9867883,120.1998633


14. 22.9868383,120.2000267


15. 22.9866467,120.1999833


16. 22.9866217,120.2000067


17. 22.98673,120.2001733


18. 22.9866617,120.2001483


19. 22.9864533,120.2001583


20. 22.9864833,120.1999933


21. 22.98638,120.2002133


22. 22.986335,120.2002


23. 22.9862533,120.199285


24. 22.986365,120.20003


25. 22.9863767,120.1998633


26. 22.9863917,120.1996817


27. 22.986275,120.1995917


28. 22.9863217,120.1994683


29. 22.9863067,120.19939


30. 22.9862967,120.1993133


31. 22.986295,120.199245


32. 22.9863667,120.1990683


33. 22.9861117,120.1989183


34. 22.9862117,120.198735


35. 22.9860467,120.198565


36. 22.9860233,120.1985017


37. 22.9862,120.19819


38. 22.9860217,120.1978233


39. 22.98756,120.1978483


40. 22.9875217,120.1981733


41. 22.9874667,120.1977567


42. 22.98756,120.1976433


43. 22.98768,120.1971367


44. 22.98747,120.197395


45. 22.9873983,120.19748


46. 22.987365,120.19767


47. 22.9874467,120.197625


48. 22.9874033,120.1976283


49. 22.9874217,120.19758


50. 22.9873717,120.1976233


51. 22.98722,120.19769


52. 22.987435,120.1974033


53. 22.98722,120.19774


54. 22.9873933,120.19753


55. 22.9874283,120.1975


56. 22.9873367,120.19751


57. 22.9873983,120.1975133


58. 22.9874183,120.197475


59. 22.98739,120.1974383


60. 22.98729,120.197965


61. 22.9877067,120.198075


62. 22.9886267,120.1969667


63. 22.9883933,120.1975367


64. 22.9888233,120.1962267


65. 22.9883633,120.1973483


66. 22.98854,120.1977367


67. 22.9881817,120.19803


68. 22.9893917,120.1962033


69. 22.9887267,120.1976233


70. 22.9891617,120.1968517


71. 22.9894233,120.196525


72. 22.9895017,120.1961233


73. 22.9884717,120.197015


74. 22.9884783,120.197055


75. 22.9885183,120.1970867


76. 22.988565,120.1974967


77. 22.98856,120.197615


78. 22.988715,120.197525


79. 22.9887233,120.1975933


80. 22.98855,120.1973883


81. 22.988765,120.19726


82. 22.9884,120.19757


83. 22.98812,120.1979167


84. 22.9881233,120.198145


85. 22.9880367,120.198325


86. 22.987905,120.1984933


87. 22.9881067,120.1988117


88. 22.9880667,120.198755


89. 22.9880367,120.1987617


90. 22.9880233,120.1987567


91. 22.9880217,120.198755


92. 22.9880083,120.19875


93. 22.9880117,120.1987433


94. 22.987945,120.198855


95. 22.98796,120.1990367


96. 22.987885,120.19922


97. 22.98773,120.1993283


98. 22.9876583,120.1992017


99. 22.9877067,120.19907


100. 22.98768,120.199185


101. 22.9877033,120.19918


102. 22.987705,120.19918


103. 22.9876667,120.1991483


104. 22.9876917,120.1991183


105. 22.98767,120.199125


106. 22.9876667,120.1991033


107. 22.987695,120.1991267


108. 22.987695,120.1991183


109. 22.9876967,120.199095


110. 22.987685,120.1990683


111. 22.9876917,120.1990467


112. 22.987715,120.19906


113. 22.9877267,120.19905


114. 22.98774,120.19905


115. 22.9877133,120.1990483


116. 22.9877233,120.1991683


117. 22.9877883,120.199235


118. 22.987945,120.199385


119. 22.9881133,120.19958


120. 22.9881133,120.199785


121. 22.988205,120.200035


122. 22.9880517,120.2001467


123. 22.9878683,120.2001733


124. 22.987685,120.2002


125. 22.9875,120.2001817


126. 22.9873233,120.2001233


127. 22.987275,120.2002517


128. 22.9872883,120.2001617


129. 22.98732,120.2001283


130. 22.98715,120.20004


131. 22.9871867,120.1998467


132. 22.986975,120.199975


133. 22.987265,120.1999067


134. 22.9868317,120.199745


135. 22.98669,120.1996783

OMap 1.3

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;amp;ie=UTF8&z=19&amp;ll=35.730807,139.767447&spn=0.001095,0.001717&amp;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;amp;ie=UTF8&z=19&amp;ll=35.72984,139.767254&spn=0.001095,0.001717&amp;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:

1. OMapInit.js
2. 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&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[
  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"
   });

Yanaka Ginza

• 
• 
• 
• 
• 
• 
• 
• 

New Functions by OMap 1.3

OMap 1.3 introduces new functions for blogging. Let me summarize them as follow:

Photo marker

Your Flickr Photo can be used a marker in the map by including animg tag in a map link like

After taking a rest at <a href="http://maps.google.com/maps?key=ABQIAAAAkS41J6-HBoJpLyLJXqmzTxTqk2QfI72xHMsR7rgFOegqpKgRnxQMU-pwEWbFdN96JlccciIb1p9Xzw&ie=UTF8&amp;amp;amp;z=18&ll=35.732244,139.76746&amp;spn=0.00219,0.003433&om=1">a cafe
<img src="http://farm1.static.flickr.com/143/330883828_a772e1c6da_s.jpg" />
</a> in Nishinippori, 

The source image must be a 75px square photo whose filename ends widh "_s.jpg". OMap: Nishinippori, Yanaka, Ueno (OMapPhotoMarker) is a sample post using photo marker.

Polyline

Sample: OMap: Nishinippori, Yanaka, Ueno (OMapRoute)

Photo list

Sample: OMap: Nishinippori, Yanaka, Ueno (OMapPhotoList)

Place holders

Sample: OMap: Nishinippori, Yanaka, Ueno (OMapPhotoList, OMapFramePH, OMapPhotoPH)

Tool

Sample: OMap: Nishinippori, Yanaka, Ueno (OMapMarkerWorkArea)

Nishinippori, Yanaka, Ueno

After taking a rest at a cafe in Nishinippori, we climbed up a slope, to Suwa Jinja Shrine, where Kokontei Shinsho was training his Rakugo in secret. After praying there, we came up to the top of Fujimizaka.

At Yuyeke Dan Dan, we met four cats enjoying the sunlight.

There are holes, which are told to be by bullets during a civil war ending the Edo era.

Passing an antic cafe and a building of Tokyo Geidai, we reached Ueno.

Nishinippori, Yanaka, Ueno (OMapPhotoMarker)

After taking a rest at a cafe in Nishinippori, we climbed up a slope, to Suwa Jinja Shrine, where Kokontei Shinsho was training his Rakugo in secret. After praying there, we came up to the top of Fujimizaka.

At Yuyeke Dan Dan, we met four cats enjoying the sunlight.

There are holes, which are told to be by one of bullets during a civil war ending the Edo era.

Passing an antic cafe and a building of Tokyo Geidai, we reached Ueno.

Nishinippori, Yanaka, Ueno (OMapRoute)

1. 35.73181243063871,139.76773381233215
2. 35.73159469950271,139.76796984672546
3. 35.73110697959805,139.76728320121765
4. 35.73105472371683,139.76728320121765
5. 35.7309589211789,139.76736903190613
6. 35.73074118770954,139.76744413375854
7. 35.73072376900629,139.7672939300537
8. 35.730654094155135,139.76715445518494
9. 35.73061054734222,139.76714372634888
10. 35.73047990676059,139.76713299751282
11. 35.73003572718027,139.76725101470947
12. 35.729887666769706,139.76730465888977
13. 35.72968299457243,139.7666609287262
14. 35.729543642988254,139.7660332918167
15. 35.72952622402308,139.7660118341446
16. 35.72961331881083,139.76596891880035
17. 35.72977444391705,139.76588308811188
18. 35.729900730934645,139.76580262184143
19. 35.73008798373007,139.76567924022675
20. 35.73030136428586,139.76555049419403
21. 35.73044071454433,139.76542174816132
22. 35.730270881384314,139.7650784254074
23. 35.7300836290189,139.76470828056335
24. 35.72986153843338,139.7643381357193
25. 35.7295958998609,139.76386070251465
26. 35.72930413188329,139.76402163505554
27. 35.72905155575603,139.7642308473587
28. 35.728759785784426,139.7643917798996
29. 35.72852462711903,139.7644829750061
30. 35.72820672633805,139.76458489894867
31. 35.727880114625265,139.76474583148956
32. 35.72764930820728,139.76482629776
33. 35.72769721148111,139.76527154445648
34. 35.727714630846265,139.765545129776
35. 35.727714630846265,139.76577579975128
36. 35.72771898568695,139.76614594459534
37. 35.72769721148111,139.76644098758698
38. 35.72768850179709,139.7667896747589
39. 35.72764930820728,139.76735830307007
40. 35.72763624367306,139.76781964302063
41. 35.72765801789557,139.76829171180725
42. 35.727745114726126,139.7683882713318
43. 35.727858340463435,139.768425822258
44. 35.72820672633805,139.76850628852844
45. 35.728202371524034,139.76872086524963
46. 35.72819801670976,139.76849555969238
47. 35.72784963079705,139.768425822258
48. 35.727723340527405,139.76840436458588
49. 35.72758834036257,139.76833999156952
50. 35.72755785642272,139.76832389831543
51. 35.72744027540257,139.7683024406433
52. 35.72711366054701,139.7683024406433
53. 35.72676091499879,139.76828634738922
54. 35.72638639332434,139.76827561855316
55. 35.72614687272565,139.76830780506134
56. 35.72582025256678,139.7684097290039
57. 35.72519313810766,139.76863503456116
58. 35.725280237633314,139.76942896842957
59. 35.72515829827074,139.77050185203552
60. 35.723886633795125,139.7702980041504
61. 35.72343370729855,139.7702443599701
62. 35.72284141491769,139.77016925811768
63. 35.72234493114705,139.77036237716675
64. 35.72139550619839,139.77070569992065
65. 35.7206638315463,139.7709846496582
66. 35.71996699229742,139.77116703987122
67. 35.719871176424085,139.77115631103516
68. 35.71901753901206,139.77254033088684
69. 35.71859942755517,139.77324843406677
70. 35.71792870251043,139.77257251739502
71. 35.71769351187206,139.77247595787048
72. 35.71691824892649,139.77229356765747
73. 35.716508837361346,139.77301239967346
74. 35.71620395504214,139.77328062057495
75. 35.71582938373882,139.77306604385376
76. 35.715602897910564,139.7727334499359
77. 35.71548094373643,139.7727334499359
78. 35.71519347958753,139.77291584014893
79. 35.714792770255876,139.77313041687012
80. 35.714540148119966,139.77333426475525
81. 35.71413072433697,139.77318406105042
82. 35.71369516481194,139.77307677268982
83. 35.71341640546667,139.77304458618164
84. 35.71299826462054,139.77304458618164
85. 35.712423317374984,139.77314114570618
86. 35.71199645991899,139.7732377052307
87. 35.711465062748665,139.7733771800995
88. 35.711412793983136,139.7736668586731
89. 35.711412793983136,139.77407455444336
90. 35.71153475438269,139.77428913116455
91. 35.71169156033647,139.7745680809021
92. 35.71185707739743,139.7748899459839

Nishinippori, Yanaka, Ueno (OMapPhotoList)

• 
• 
• 
• 
• 
• 
• 
• 
• 

Nishinippori, Yanaka, Ueno (OMapPhotoList, OMapFramePH, OMapPhotoPH)

• 
• 
• 
• 
• 
• 
• 
• 
• 

Nishinippori, Yanaka, Ueno (OMapMarkerWorkArea)

After taking a rest at a cafe in Nishinippori, we climbed up a slope, to Suwa Jinja Shrine, where Kokontei Shinsho was training his Rakugo in secret. After praying there, we came up to the top of Fujimizaka.

At Yuyeke Dan Dan, we met four cats enjoying the sunlight.

There are holes, which are told to be by bullets during a civil war ending the Edo era.

Passing an antic cafe and a building of Tokyo Geidai, we reached Ueno.

OMap 1.1

Download

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

	Blogger Beta	TypePad
JavaScript file	OMapInit.js	OMapInit.js
CSS file	OMap.css	OMap.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".

Beyond OMap 1.x, the rise of OMap 2.0

I am still working to clean up code of OMap 1.1. However I think it is time to see the horizon OMap 1.x can reach and what are there beyond it. If OMap 1.x can be defined as challenges about what DOM scripting using Google Maps API can help bloggers, I can also say that it has its own limitations by what only JavaScipt programs on web browser can do. It is because OMap 1.x can work only with data in the web page where OMap is called. If OMap is going to work with external information outside the web page, collaboration with server side programs will be required for the following processes:

1. Collecting information in the Web, such as photos on Flickr having place information and taken in the map area OMap shows
2. Storing information in files or database, in order to enable asynchronous collecting process by server side programs
3. Publishing information, which OMap subscribes and receives to put markers on the map

The biggest challenge among above items is 3 if OMap makes use of Comet's style of communication with server side programs. Besides if Comet can be exploited by OMap, it can provide a sort of chat on the map, though it might be beyond OMap just as a set of helper functions to blogging. But it must be fun. Lastly I summarize what I mus accomplish by OMap 1.x, because OMap 1.x should be the base for any enhancements by OMap 2.0. The following items will be implemented by OMap 1.x:

1. Writing a post from the map
2. Using of Geocoding API to locate a place in the map by keywords
3. Using of GPlolyline to connect selected markers on the map
4. Standardizing info windows on the marker with multiple tabs
5. Refining code base for OMap 2.x extensions

It is also important before ending this post to summarize what OMap 1.1 has accomplished so far.

1. Basic use of Google Maps API services, such as showing maps and putting markers and info windows there
2. Map based navigation to blog posts as the map on the top of page, an example of this can be seen at OMap: Walking.
3. Separation of layout information from JavaScript code to an external CSS file

Why DID NOT OMap work by IE?

I found today the reason why my old OMap DID NOT work at Internet Explore. The reason was so simple that I fixed it and now OMap works by IE too. OMap finds out div tags containing blog posts by searching all div tags in the page and checking their class attributes. OMap did it by getAttribute("class"). This works at Firefox, but it doesn't at IE. The solution is getting class attributes by node.className. This works for both Firefox and IE. I found this during testing OMap 1.1. I will announce OMap 1.1 in another post. But before that I have to clean up the new code.

walkTheDOM

I have just learned an interesting recursive function, called walkTheDOM. It is explained by Douglas Crockford in the video. After about 28 minutes, this function is explained.This simple recursive function shows what hierarchic structure is. He gave in the video, another function, getElementsByClassName using the walkTheDOM. I would like use this smart function for OMap to find out div elements which contain blog post. I found by Google the .ppt file used by him and the link Google gave me is here. His video can be seen at Yahoo! Video. I learned this from Video Presentation: Douglas Crockford on the “Theory of the DOM”.

Another SPE to OMap 1.0

I couldn't stop adding another function to OMap 1.0 even after having posted, Small programming enhancements to OMap 1.0ff. It is a navigation map which can be seen at the top of page, if the page contains at least two posts and at least one post which has a map link. You can click on a marker on the navigation map and you will see an infoWindow which contains the title of the post and the link to it. With this extension, I have to say goodbye to blog neutrality. In other words, this new extension works only Blogger.com. This is because the structure of document of Blogger.com is different from other blogs, such as TypePad. If you want to use this extension, you have to link three JavaScript files in header in your blog HTML template:

<script src='http://... /OyajiMapper.js' type='text/javascript'></script> <script src='http://... /OyajiMapperExtensions.js' type='text/javascript'></script> <script src='http://... /OyajiMapperExtForBloggerCom.js' type='text/javascript'></script>

If you have a TypePad pro account, you can use another extension for TypePad, by linking the following three files in header in blog HTML templates:

<script src='http://... /OyajiMapper.js' type='text/javascript'></script> <script src='http://... /OyajiMapperExtensions.js' type='text/javascript'></script> <script src='http://.../ OyajiMapperExtForTypepad.js' type='text/javascript'></script>

I am still willing to solve a very big known issue, that is IE cannot understand OMap. But at the point of writing, I have no good solution at all. Any advice is highly appreciated. I have one more thing to do, that is code cleanup of OMap 1.0, putting together three JavaScript files into one file. The result will be OMap 1.1. I had tried it a few days ago, I realized that it is very difficult to re-write code with the same level of excitement as I had had at the first time.

Internet Explorer 7 Release Candidate 1

In order to be fair to Microsoft, I have installed IE7 RC1. But still I can not see any maps on this site by IE.

OMap on Blogger

For IE visitors, this is what OMap looks like on Blogger by Firefox.

OMap on TypePad

This is a sample screen shot of how OMap is working at a TypePad bog .