홈페이지에 구글맵 넣기

2010. 6. 2. 22:1799. 정리전 - IT/29. IT 잡동지식


1.グーグルマップのキーを取得(無料)

http://www.google.com/apis/maps/で グーグルマップの使用に必要なキーを取得します。
このキーは必ず必要です。



赤字のところをクリックします。
クリック先の画面の下に↓のようなところにチェックを入れて、 マップを載せたいURLを入力します。
(もちろん同意する場合のみチェックしてください)



どうやら、URLは「http://xxxx.co.jp/~name/」のように入力しておけば、のちに
「http://xxxx.co.jp/~name/index.htm」でも
「http://xxxx.co.jp/~name/main.htm」でもファイル名はなんでも使えるようです。

入力して「Generate API Key」をクリックすると
グーグルアカウントの入力を求められますので、入力してください。


アカウントがない場合は取得する必要があります。
アカンウント取得に必要なのはメールアドレスだけなのでとても簡単です。

そして、



のようなメッセージが出るとキー取得完了です。
your key is : に続くキー・URL・サンプルをどこかに保存しておくといいでしょう。



2.マップのhtmlファイルを作成

キーを登録した時に表示されたサンプルをコピーして、メモ帳に貼り付けます。 (メモ帳は スタート→プログラム→アクセサリ→メモ帳で起動します)
適当なファイル名で文字コード「utf-8」で保存します。


ここでは「gmap.html」としました。


このファイルを先ほど登録したURLにアップロードしてブラウザでアクセスすると



こんなかんじになって、地図をドラッグできるようになりした!

でも、このままでは衛星写真も見れませんし、拡大・縮小もできなくて、不便です。
場所も自分の表示したい位置が最初に出てきてくれないと困ります。

そこで、今作ったhtmlファイルをまたメモ帳で開いて、
次のように変更してみてください。

アップロードしてブラウザでアクセスするとズーム機能や衛星写真機能が追加されているはずです。
これで、中心に表示する場所の東経、北緯、ズーム値を設定するとマップのhtmlファイル完成です。

-補足-
東経や北緯が分からない場合は通常のグー グルマップで調べることができます。
まず、目的の場所を探し、右上の「このページのリンク」をクリックします。



そうすると、URLがやたらと長いURLに変化します。
その中で

「&ll=」の後に続く数字が北緯と東経です。
例えば、「&ll=34.961231,135.996323」のようなかんじだと北緯34.961231度, 東経135.996323度となります。
また、以下のサイトでは住所から緯度・経度を得ることができるので、ここを利用するのもいいでしょう。
Geocoding


3.載せたい場所にコードを追加(一行だけ)

 最後に作成したhtmlファイルと自分の地図を掲載したいページを結びつけるために、
載せたいページの載せたい場所に一行だけコードをはりつけます。

<iframe src="gmap.htm" width="500" height="300" frameborder="0" scrolling="no"></iframe>


これで完成です。

貼り付け例はこちら↓↓

● 長江アパート ● 八王子セミナーハウス ● 幸楽園 ● 単身赴任で行こう! ~名古屋見聞録~
● ふじわら歯科 ● リフ レティー ● 高 橋設備工業 ● アイエムイー
● ラ・プルミエ バレエ ● 田島歯科 医院 ● ダイワ北海通商 ● アウロラダイアモ ンド
● システムウイング ● 長浜市社会福祉協議会 ● 社会福祉法人寿宝会 ● あきる野測量設計
● 匠IT研究所 ● オートカム
これらのサイト様ではここで紹介した iframe を利用した
「グーグルマップをとにかく簡単に自分のホームページに載せる方法」が採用されています。