Google Maps簡単作成ツール：GMapCreator
Google MAPS APIを使ったプログラムを簡単に作るツールを作ってみました。 目標はJavascriptなどが全くわからない人でも簡単にGoogle mapをブログやホームページに貼り付けられる事です。
左クリックでマーカを設置、もしくは開始位置を設定できます。 マーカを左クリックすればマーカ画像を変更したり、マーカをクリックした際にジャンプするURLを設定したりできます。
徐々に機能を充実させていく予定です。 Bug Report、機能追加要求、解りにくい、などご意見は大歓迎します。 ご意見はこちらへお願いします。
Google Maps API keyを入力しないでOKを押してもコードは生成されます。 ホームページに貼り付けるときには、HTMLコード中の「key=」部分に手動で取得したAPIキーを入力してください。
Hotpepperに掲載されているお店の電話番号を入力してください。 電話番号は半角で入力して下さい。「-（ハイフン）」はあっても無くても大丈夫です。
Google Maps API HTMLコード
Google maps apiを使ったHTMLページです。 前述したIFRAMEと併用すると楽です。 必要に応じて改変してください。
貼り付け用IFRAMEコード
Blogなどに貼り付ける場合には以下のIFRAMEを利用すると楽です。 「YOURFILENAME.HTML」の部分を、ここで生成したHTMLファイルの名前に変更してご利用下さい。
Gooleへのサインアップ
Google mapsを自サイトで使うには、Googleに登録をする必要があります。 オンラインサインアップ(無料)の方法に関してまとめてみましたので、サインアップがまだの方は「Google MAPS APIキーを取得する」をご覧下さい。 サインアップはサイト毎に必要です。
サインアップをしない状態で生成されたコードを実行するとJavascriptがエラーメッセージを出力して正常動作しません。 サインアップをしないでGMapCreaterを試すことも可能です。 キーを聞かれても気にせずOKを押してください。 ただし、正しいキーを入れないでOKを押した場合には手元でHTMLを直接修正してGoogle maps keyの値を入れてください。
使い方
HTMLコードを出力したいと思ったところで、google map窓の下にある「コード生成」ボタンを押してください。 「コード生成」ボタンを押すとIFRAMEのHTMLと、Javascriptが書かれた本体の2つのHTMLが出てきます。 IFRAMEの方は使っても使わなくても大丈夫ですが、大抵使った方が楽だと思います。
色々改造してみたいと思う方のためにGoogle maps apiの解説を書いてみました。 生成されたjavascriptを改造してみようと思う方は「Google Maps API プログラミング解説」もご覧下さい。
変更履歴
2007/09/04 : マーカをドラッグして移動できるようにしました。
2006/12/30 : Hotpepperマッシュアップをしてみました。「Mashupマーカ」のメニューからHotpepperマーカを作れます。
2006/11/29 : マーカ表示位置微調整用にマーカ位置を変更できるようにしました。
2006/11/07 : 初期状態でコントロール全部入りに変更。
2006/10/25 : Amazonアソシエイト機能を追加。
2006/09/25 : 一部の入力でリターンキーを押すと画面が更新されてしまうBUGを修正。
2006/09/25 : ふきだし入力エリアをinputからtextareaへ変更。
2006/09/14 : 新しいウィンドウでMarkerのリンク先を表示できるようにしました。
2006/09/04 : GOverviewMapControlをつけれるようにしました。
2006/07/31 : Markerにふきだしをつけれるようにしました。
2006/06/20 : Markerにタイトルをつけれるようにしました。
2006/04/17 : Google Maps API version 2に対応しました。 version 1 互換APIでの出力が必要な方は旧バージョンをご利用下さい。
