Google Maps簡単作成ツール:GMapCreator

Google MAPS APIを使ったプログラムを簡単に作るツールを作ってみました。 目標はJavascriptなどが全くわからない人でも簡単にGoogle mapをブログやホームページに貼り付けられる事です。

左クリックでマーカを設置、もしくは開始位置を設定できます。 マーカを左クリックすればマーカ画像を変更したり、マーカをクリックした際にジャンプするURLを設定したりできます。

徐々に機能を充実させていく予定です。 Bug Report、機能追加要求、解りにくい、などご意見は大歓迎します。 ご意見はこちらへお願いします。

  • 初期画面
  • コントロール
  • 表示
  • マーカを追加
  • ここを開始位置に設定
  • マーカを削除
  • マーカのイメージを設定

Google Maps API key

Google Maps API keyを入力しないでOKを押してもコードは生成されます。 ホームページに貼り付けるときには、HTMLコード中の「key=」部分に手動で取得したAPIキーを入力してください。

画面サイズ
幅 :
高さ:

マーカ画像

URL
画像幅
画像高さ
画像中心位置(x)
画像中心位置(y)

貼り付け用IFRAMEコード

Blogなどに貼り付ける場合には以下のIFRAMEを利用すると楽です。 「YOURFILENAME.HTML」の部分を、ここで生成したHTMLファイルの名前に変更してご利用下さい。

Google Maps API HTMLコード

Google maps apiを使ったHTMLページです。 前述したIFRAMEと併用すると楽です。 必要に応じて改変してください。

Gooleへのサインアップ

Google mapsを自サイトで使うには、Googleに登録をする必要があります。 オンラインサインアップ(無料)の方法に関してまとめてみましたので、サインアップがまだの方はこちらをご覧下さい。 サインアップをしない状態で生成されたコードを実行するとJavascriptがエラーメッセージを出力して正常動作しません。 サインアップをしないでGMapCreatorを試すことも可能です。 キーを聞かれても気にせずOKを押してください。 ただし、正しいキーを入れないでOKを押した場合には手元でHTMLを直接修正してGoogle maps keyの値を入れてください。

使い方

HTMLコードを出力したいと思ったところで、google map窓の下にある「コード生成」ボタンを押してください。 「コード生成」ボタンを押すとIFRAMEのHTMLと、Javascriptが書かれた本体の2つのHTMLが出てきます。 IFRAMEの方は使っても使わなくても大丈夫ですが、大抵使った方が楽だと思います。

色々改造してみたいと思う方のためにGoogle maps apiの解説を書いてみました。 生成されたjavascriptを改造してみようと思う方は、こちらもご覧下さい。




Copyright (C) Geekなページ. All rights reserved.