院長ブログタイトル

GoogleMapを設置してみた!

 Ajaxを使った今のところ最高傑作とも言えるGoogleMapを当院のアクセス紹介ページに設置してみました。これは相当使えます。しかもこんなすごい技術が無料だなんて....。マウスでぐりぐり動かしてみてください。また拡大や縮小もできます。しかもこれが非同期で動いているなんて!Ajaxってすごい可能性を秘めているんですね。期待してます。

 とりあえず今のところ、当院のアクセスとペットショップのアクセスページに設置しました。、もちろん自分のお店を地図の中心にできます。気づけばなんでもないことなんですが、どうやってMobavleTypeに書き込めばいいのか私も悩んだので、やってみたい方のためにメモ書き残しておきます。
まず当院のアクセスページで見てみてください。
http://www.e-petlife.com/iivc/archives/2005/08/post_1.html

1.自分のページにGoogleMapを設置するにはまずGoogleMapのAPIキーを取得する必要が有ります。
http://www.google.com/apis/maps/signup.htmlアクセスして、最下部のI have read and agree with the API terms and conditionsのチェックボックスにチェックを入れ、設置したい自分のページのURLを入れます。(ホームページのURLでOK)
2.Googleアカウントを持っていればそのままサインインする。もっていなければGoogleアカウントを登録する。(登録するとメールがくるので指示にしたがう)
3.サインインするとサインプルHTMLが表示されるので、そのままコピーして自分のサイトに例えば、googlemap.htmlなんて適当な名前をつけて設置する。
設置したURLにアクセスしてみてください。これだけです。簡単です。

さて、MTに読み込むには(ここが悩んだんですが...)そのままHTMLをコピーしてもだめです。当然です。でも実は簡単です。iframeタグを使います。これで自分のサイトに設置した例えば、googlemap.htmlを読み込めばいいということになります。簡単!。ものの5分もあれば設置できます。
さてそのままでは自分の表示させたい場所がデフォルトでは表示されません。で、上記うちのアクセスページで自分のデフォルトに指定したいところを選んで頂ければ、左下に緯度経度が表示されますので、googlemap.htmlなどのHTMLの中の
GPoint(-122.1419, 37.4419), 4);
をその数値に修正してアップします。最後の4とかの数字はMAPの拡大倍率です。0〜あり、数値の小さい方が拡大になります。ちなみにうちのアクセスページではデフォルトで0に設定してあります。
とにかく自分のページにGoogleMapを取り込めるというのはすごいです。しかも無料です。びっくり!
もっと詳しくいじりたい方は下記の本を参考にされるといいと思います。今後ますます期待のAjaxについて学べます。


投稿者 Tatsuya Fukuyama DVM,AFP : 2005年11月26日 10:59




このリストは、次のエントリーを参照しています: GoogleMapを設置してみた!:

» google mapで遊ぶ from なんちゃってSEの日々
やっと仕事が落ち着いたので2月に入ってようやく今年初の更新。 最近googlem [続きを読む]

トラックバック時刻: 2006年02月02日 21:26