Google Maps簡単作成ツール:GMapCreator

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

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

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

  • 初期画面
  • コントロール
  • 表示
  • Mashupマーカ
  • マーカを追加
  • Amazonアソシエイトリンクを追加
  • ここを開始位置に設定
  • マーカを削除
  • マーカのイメージを設定
  • マーカにタイトルを設定
  • マーカにふきだしを設定
  • マーカの位置を変更

Google Maps API key

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

画面サイズ
幅 :
高さ:

マーカ位置の変更

マーカ位置(x)
マーカ位置(y)

マーカタイトル

ふきだしメッセージ

マーカ画像

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

Amazonアソシエイトリンク追加

ASIN
画像サイズ
AmazonアソシエイトID

新しいウィンドウを開く

お店の電話番号

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での出力が必要な方は旧バージョンをご利用下さい。


Powered by ホットペッパー.jp


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