「GoogleMapsAPI 簡易版100POINTS」 v3.5 1、[機能概要] GoogleMapsAPIを使って、 自分で登録した100個までのPOINTS(地点)を 番号付きでマークして地図上に表示できます。 2、[稼動環境] WINDOWS2000, WINDOWS XP, WINDOWS7。 地点登録ブラウザは、IE 7以上。 公開ブラウザは、GoogleChromeクロームやIEやFireFoxでもOK。 3、[使用方法] ダウンロード・展開して、 「Gmap100_touroku_TOOL.hta」をダブルクリックする。 (IEブラウザで開いて下さい・・・ 拡張子.htaです、登録処理はIEブラウザのみで可能) 「地図表示テスト」ボタンをクリックして見て下さい。 (地図表示テストは公開時同様、IE以外のブラウザでも開けます) サンプルとして、 近畿圏の「※ 名所一覧※」の初期設定データが入力されていますが、 クリアされるか、このサンプル値を参考に御自分のデータを上書きや追加入力されるか、 適当にいろいろお試しいただければ良いと思います。 また、以下も見てもらえるといいと思います。 このツールで登録して、公開されてます。 「堺_臨海 路傍遺産」 千景万色/富士山撮影ポイント ベスト300 (隠し技として、999地点まで可能) var pointmax = 100; を var pointmax = 999; に替えるだけでOKですが・・・。 替える必要があるものは以下の5つです。 Gmap100_touroku_TOOL.hta uploadフォルダー下の GoogleMapsAPI_100POINTS_map_data.js GoogleMapsAPI_100POINTS_map_data_tenkai.js GoogleMapsAPI_100POINTS_ichiran.html GoogleMapsAPI_100POINTS_ichiran_table.html 4、[インターネット公開方法] GoogleMapsAPI_簡易版vX_X\uploadフォルダーの「uploadフォルダー」ごと公開したい御自分のサイトに置いて、 例えば、http://HOGEHOGE/upload/GoogleMapsAPI_100POINTS.html とかで呼び出す。 5、[あとがき] 「このソフトの著作権は、作者にあります。 このソフトの使用によって生じたいかなる損害も 保証できません。」 自由にご活用ください。 お気づきの点があれば、 作者(赤田)へメール まで、お知らせ下さい。 6、[更新履歴] 新規 V1.0 2006.09.01 ・(補足説明) 経度・緯度の地点間を線でつなぐ。(見て欲しい地図範囲の囲み線に使えます) インストール直後はサンプル値が入力済みになってます。 とりあえずサンプル値はクリアしてもらって結構です。 例えば表示する地図の見てほしい地域を 近畿圏として大体の囲みをするなら、 経度1,緯度1に 135.1098632,35.2994354 を入力 //近畿の北 福知山市を起点とする 経度2,緯度2に 136.2579345,35.2770163 を入力 //近畿の北東 彦根市とする (福知山市から彦根市へ線を引く) 経度3,緯度3に 136.1096191,34.6332079 を入力 //近畿の東 名張市とする (彦根市から名張市へ線を引く) 経度4,緯度4に 135.9777832,33.7334767 を入力 //近畿の南東 新宮市とする (名張市から新宮市へ線を引く) 経度5,緯度5に 135.3790283,33.7289083 を入力 //近畿の南 田辺市とする (新宮市から田辺市へ線を引く) 経度6,緯度6に 134.8461914,34.3434360 を入力 //近畿の南西 淡路島とする (田辺市から淡路島へ線を引く) 経度7,緯度7に 134.6940994,34.8383225 を入力 //近畿の北西 姫路城とする (淡路島から姫路城へ線を引く) 経度8,緯度8に 135.1098632,35.2994354 を入力 //囲むから、もう一度 近畿の北の福知山市へ (姫路城から福知山市へ線を引く) 更新 V1.1 2006.10.30 ・地図の中心を示す十字マークは初期表示地図上での位置に固定しとく。 ・クリックした地点の(経度,緯度)の地図上への(吹き出し)表示は、 「地図表示テスト」で表示したときのみにしました。 ・指定した経度緯度の地点間を線でつなぐ機能を追加。 これは、見て欲しい地図範囲の囲み線に使えます。 ・名称やコメントに 半角,カンマ を使われると、 javascriptの 配列=split カンマ してるところでよれてしまうので、 入力時 半角,カンマは 全角,カンマに自動的に置換えるようにした。 ・経度や緯度に 半角,カンマ が混じったりしてると、 javascriptの 配列=split カンマ してるところでよれてしまうので、 入力時 半角,カンマは 自動的に詰めるようにした。 ・並べ替えボタンを追加。 「経度の昇順」「経度の降順」、 「緯度の昇順」「緯度の降順」、 「名称の昇順」、 「コメントの昇順」 の六つのボタンを追加。 これにより、100POINTSの地点の連番を自動で振り直すことができます。 更新 V1.2 2006.12.12 ・100POINTSの番号マークや十字マークをクリックしたとき、 画面下にjavscriptエラーとメッセージが出ていたのを直しました。 更新 V1.3 2007.04.16 ・吹き出しの中のリンクをクリックしたとき、 画面下にjavscriptエラーとメッセージが出ていたのを直しました。 ・ズーム・レベル<8のとき、クリックしたら吹き出しに拡大地図を表示。 ちょっとバグッてたのを直しました。 ・100POINTSの番号マークのpngやgifの読み込み時間を節約するために 名称の指定が無いポイントの番号マーカーは作らないようにしました。 ・最寄駅情報の入力機能を追加しました。 最寄駅情報の箱に任意に入力して下さい。 右にある「...」ボタンをクリックして、 webサービスの「HeartRails Express | 路線/駅名データサービス」から 最寄駅情報の箱に入力させることもできます。(参考 http://express.heartrails.com/) 表示地図の番号マークをクリックしたときの吹き出しの 「最寄駅情報」タグをクリックすると入力した内容が見られます。 ***************************** *** V1.3へバージョン・アップされる方へ ***** * この最寄駅情報の入力機能が追加されたため、 * * XMLデータに<station>タグが自動的に追加されます。* ***************************** 更新 V1.4 2007.05.04 ・名称やコメントなどに 半角,カンマ を使っても良いようにしました。 更新 V1.5 2007.12 ・登録内容一覧テーブルの(経度,緯度)は、一覧テーブルの右端に表示。 ・"ココの番号をクリック!"の吹き出しが、いつのまにか!出なくなってしまってるバグの修正。 GoogleMapsAPI_100POINTS_map.html の var xxxmsg = document.createTextNode("ココの番号をクリック!"); ............... map.openInfoWindow(map.getCenter(),xxxmsg); というコーディングがダメになったみたいなので・・・・・ map.openInfoWindow(map.getCenter(),"ココの番号をクリック!"); という1回のコーディングに変えた・・・・・>とりあえずこれで、OK! 更新 V1.6 2008.4 ・「地形図」も表示できます。 画面のズ〜と右側の方にピンク色で以下の文言を追加してあります。 「地形図」も見たいならチェック−> という矢印の所のチェックボックスをクリックして下さい。 // [作者おぼえがき] // GoogleMapsAPI v2 ---> v2.x と指定 // ・・・maps.google.co.jp/maps?file=api&v=2.x&key=ABQIA・・・ ・表示地図の番号マークのアイコンをもっと見やすくスッキリしたものに替えました。 ・新たな並べ替えボタンを一つ追加。 「地図の中心からの距離順」 // [作者おぼえがき] // uribou lab のWEBサービスで距離を求める。 lab.uribou.net // リクエスト送信先は http://lab.uribou.net/ll2dist/ // 必要なパラメータは2点の緯度経度 ll1=緯度,経度&ll2=緯度,経度 ・地図の中心を示す十字マークがメザワリと感じられる場合は、 「GoogleMapsAPI_簡易版vX_X\uploadフォルダー」の 「cross.png」と「cross.gif」を削除してください。(動作に支障ありません) 更新 V1.7 2009.2.12 ・並べ替えボタンで、 「経度の昇順」「経度の降順」、 「緯度の昇順」「緯度の降順」、 において マイナス経度やマイナス緯度にも対応 ・地図上をクリックして経度・緯度の入力ができる機能を追加しました。楽になりました!! 「中心地点の設定」ボタン・・・・・・・>初期表示する地図の中心の経度と緯度を自動入力して設定できる。 「地図から経度・緯度を設定」ボタン・・>100POINTSの地点の経度と緯度を自動入力して設定できる。 オプションの囲み線は「地図」ボタン・ >(ちょっとめんどくさいが、経度と緯度を自動入力して設定できる。) 更新 V1.8 2009.9.30 ・登録するとき、クリックされた行の高さを高くして、 画面を横スクロールしても入力し易くしました。 ・「緯度」と「経度」を、 「経度」・「緯度」の順で表示や説明をしていたが、 どうも 逆の順のようで しっくり来ない、 (言い訳==>昔、GoogleMapsAPIバージョン1の関数などが「経度」・「緯度」の順だった・・・) 今後は、「緯度」・「経度」の順で表示や説明をするように変えました。 ・地図上をクリックして緯度・経度の入力ができる画面で、郵便番号や住所を入力して地図の検索もできます。 「中心地点の設定」ボタンと「地図から緯度・経度を設定」ボタンから利用できます。 ※これは、ジオコーディングで住所または郵便番号から緯度経度を取得するYahoo api検索サービスで実現してます。 ※ 住所からの検索は Yahooのapiは使わん! (なんか田舎の町とか見つからん、怒り!!!) ※住所からの検索は Googleのhttp検索apiの方が良いので、Googleを使用 ・住所情報の入力機能を追加しました。 住所情報の箱に任意に入力しても良いですが、 右にある「...」ボタンをクリックして、 webサービスの「逆ジオコーディング Yahoo api | 緯度・経度を〒住所に変換サービス」から 住所情報の箱に入力させることもできます。 表示地図の番号マークをクリックしたときの吹き出しの 「住所情報」タグをクリックすると入力した内容が見られます。 ******************************* *** V1.8へバージョン・アップされる方へ * * この住所情報の入力機能が追加されたため、 * * XMLデータに<address>タグが自動的に追加されます。* ******************************* 更新 V3.1 2013.12.7 [ 重要事項 ] 2013年11月以降、 「GoogleMapsAPI」が標準でサポートするのは、 V3(バージョン3)のみとなっています。 ※※※このツールは、V3(バージョン3)に対応済みです。※※※ その他にも些細な変更点が幾つかあります。 ・十字マークは下向きの矢印マークに替えました。 ・番号マーカーのアイコンを変えました。 ・タブ付き吹き出し機能ができなくなりました。 住所や最寄駅をタブ付き吹き出しにしていましたが、 ムリなので、そのまま吹き出しに続けて表示しています。 ・・・ 更新 V3.2 2014.1.xx ・右下フレームの一覧を同じクリックを複数回した時、 同じ吹き出しが複数重なっていたバグを修正しました。 ・xmlやjsやhtmlなどちゃんと全てUTF−8の先頭BOM無しに統一 (このREADME.htmlだけはsjis) ・new ActiveXObject("Microsoft.XMLDOM"); は、今も動くがサポートは無いらしいので、 new ActiveXObject("Msxml2.DOMDocument.3.0"); を使うようにした。 ・<FRAMESETフレーム機能をサポートしないブラウザにも<noframesで対応しています。 ・GoogleChromeクロームやIE7,IE11やFireFoxでも地図表示可能 ・!!! 自動巡回機能 !!!を実装しました。 ・マーカーにマウス・オーバーでツールチップ−>名称表示 ・全マーカーの名称を一斉吹き出し(GoogleMapにラベル機能が無いので吹き出しで代用) 更新 V3.3 2015.3.xx ・地図上をクリックして緯度・経度の入力ができる。 「中心地点の設定」や「地図から緯度・経度を設定」などができます。 ・距離スケールを付けた。 ・郵便番号や住所から緯度・経度を求めるには、 YahooMapのHPの検索ボックスを入力して開くURLを httpGETする。 郵便番号の場合 var zipcodeURL="http://map.search.yahoo.co.jp/search?p=" + document.form2.zipcode.value + "&pop=on&ei=UTF-8"; 住所からの場合 var addressURL="http://map.search.yahoo.co.jp/search?p=" + encodeURIComponent(document.form2.address.value) + "&pop=on&ei=UTF-8"; ・緯度・経度からyaooAPIの以下で詳細住所とれてたが、 reversegeocodingURL="http://map.yahooapis.jp/LocalSearchService/V1/LocalSearch?appid=izmbutaapp01&lat="+ido_naiyou+"&lon="+keido_naiyou+"&dist=1&category=address&n=1&o=xml&datum=wgs&al=5"; もう上記は 2014.8 に使えなくなった!!!!!!!!!!! そこで、yaooAPIの以下で住所(詳細ではなくオオマカしか返らん)をとることにした。 reversegeocodingURL="http://reverse.search.olp.yahooapis.jp/OpenLocalPlatform/V1/reverseGeoCoder?appid=izmbutaapp01&lat="+ido_naiyou+"&lon="+keido_naiyou+"&datum=wgs&output=xml"; 更新 V3.4 2015.3.23 ・バグッテタ・・・・・・・・・・・・・・・・・・・ 左の一覧のボタンのクリックで、ちゃんとクリック・ズーム値になるように修正した。 ・バグッテタ・・・・・・・・・・・・・・・・・・・ 参照urlのボックスの入力やクリア処理で、javascriptエラーにならんように修正した。 ・吹き出しinfowindowの横幅を指定しないと吹き出しが横に長〜くなる・・・ (このツール以外のgooglemap地図ではそんな現象出てない、 ・・・ どうもフレームiframe使ってるせいのように思うが・・・) とりあえず横幅を指定しよう。 たとえば、 var xxinfowindow = new google.maps.InfoWindow({ maxWidth: 200 //情報ウィンドウのサイズ(幅、高さ) }); InfoWindowのプロパティ 説明 content 情報ウィンドウ内に表示するテキストを指定します。HTML文も記述できます。 disableAutoPan 情報ウィンドウを表示する時に、地図を情報ウィンドウ全体が表示されるよう地図が自動的に移動するのを無効化するかを真偽値で指定します。 デフォルトはfalse(自動移動)。 pixelOffset 情報ウィンドウの先端部分と情報ウィンドウを固定するオフセット値を指定します。 position 情報をウィンドウを固定する位置の緯度・経度のLatLng値を指定します。 maxWidth maxWidthには、情報ウィンドウの最大幅を指定します(単位:ピクセル)。 maxWidthを指定した場合、その幅よりあふれる場合は、情報ウィンドウ内に縦スクロールが表示あれます。 maxWidthを指定しない場合は、吹き出し内のコンテンツ量に合わせて自動的に伸縮されます。 zIndex 情報ウィンドウの重なり順序を指定します。 数字が大きい方が前面に表示されます。 更新 V3.5 2015.3.24 ・[今のところ 特にはないが・・・] V3.4で、情報ウィンドウのサイズを指定するメンテをしたが、 情報ウィンドウのサイズを指定しなくても、 「GoogleMapsAPI_100POINTS.html」の のメタ・タグ指定をヤメレバ、 吹き出しが横に長〜くなったりしないことがワカッタ!!! (地図FRAMEの「GoogleMapsAPI_100POINTS_map.html」の方の