Google Map(グーグルマップ)をとにかく簡単に自分のホームページに載せる方法

０．はじめに

　とても便利なグーグルマップをとにかく簡単に、しかも無料で自分のホームページに載せたいと思います。必要なステップはたったの３つだけ。これだけで、ドラッグ移動・衛星写真・拡大縮小が簡単にできて、 Web上での会社などの場所案内にとても役立つグーグルマップを設置･導入まで図入りで導きます。

　実際にはAjaxなどという技術が使われているようですが、Ajaxの使い方はまたにして、利用者にはそんなことはどうでもいいからとりあえず地図を載せたいという願いがあると思います。なので、Ajaxとかxmlとかjavascriptとかは無視しておいて、とりあえず簡単に導入する方法を紹介します。

１．グーグルマップのキーを取得（必要なのはメールアドレスだけ）
２．マップのhtmlファイルを作成（コピーするだけ）
３．載せたい場所にコードを追加(一行だけ)

貼り付け例はこちら↓↓

長江アパート	八王子セミナーハウス	幸楽園

これらのサイト様ではここで紹介した iframe を利用した
「グーグルマップをとにかく簡単に自分のホームページに載せる方法」が採用され、活用されています。

１．グーグルマップのキーを取得（無料）

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・サンプルをどこかに保存しておくといいでしょう。

２．マップのhtmlファイルを作成

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

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

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

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

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

そこで、今作ったhtmlファイルをまたメモ帳で開いて、
次のように変更してみてください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=自分のキー" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //var map = new GMap2(document.getElementById("map")); //======変更====== var map = new GMap2(document.getElementById("map")); //======追加====== map.addControl(new GMapTypeControl()); //======追加====== map.setCenter(new GLatLng(35.658517, 139.745407), 2); //===数字を変更=== //北緯･東経･ズーム(1-15) } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>
アップロードしてブラウザでアクセスするとズーム機能や衛星写真機能が追加されているはずです。
これで、中心に表示する場所の東経、北緯、ズーム値を設定するとマップのhtmlファイル完成です。

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

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

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

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

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

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

これで完成です。

貼り付け例はこちら↓↓

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

レポートメニュー

このページのトップへ戻る