壱岐動物病院院長福山　達也ブログ: GoogleMapを設置してみた！

IIVC会社概要 | 利用規約 | 個人情報保護方針｜スタッフ募集 | お問い合わせ　

HOME >> 壱岐動物病院院長ブログ > GoogleMapを設置してみた！

カレンダー

最近のエントリー

■My BOOK SHELF■

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について学べます。

投稿者: 院長　福山　達也日時: 10:59 | パーマリンク | トラックバック (1)