Pocket

Google Map APIを使ってGoogleマップをWebサイトに掲載

お店のホームページや場所の案内をする際に、Googleマップを使って地図を表示してあるサイトをよく見かけます。今日はGoogle Map APIを使って、特定住所の地図を表示する方法を記載しておきます。ここではwebサイト上への地図掲載を前提にjavascriptを使ったやり方を解説します。コピペでいけるように簡単なコードサンプルもくっつけてますので、どんどんパクって下さい。いつもながらに僕の備忘録レベルですので、わかりにくかったらゴメンなさいw

Google Map APIキーを取得

まずはGoogleさんにMap API使用許可をもらいます。ご自身のGoogleアカウントにログインしてから、以下リンクにアクセスします。
Google API Console
Google API Console
”Google Maps JavaScript API”をクリックします。

マッププジェクトの作成
”プロジェクトを作成”をクリックします。

プロジェクトを作成
”プロジェクト名”を記入します。ご自身のwebサイトの名前とかでOKです。
新機能のお知らせをメールで受け取る場合は”はい”を選択。
利用規約の同意に”はい”を選択して下さい。
すべて入力が終わりましたら、”作成”ボタンをクリックします。

Google Maps JavaScript APIを有効化する
”有効にする”をクリックし、Google Mapを使えるようにします。

認証情報
”認証情報に進む”をクリック

認証情報の入力(1)
使用するAPIに”Google Maps JavaScript API”を選択、
APIを呼び出す場所に”ウェブブラウザ(Javascript)”を選択し、
”必要な認証情報”をクリックします。

認証情報の入力(2)
名前を入力します。例えば”お店の地図”とか”会社の場所”とかで良いと思います。
次にHTTPリファラーを記入します。例えばうちのサイトの中で使うのであれば、”http://comtopia.jp/*”とでもしましょうか。” * ”はワイルドカードと言って、どんな文字列でもOKって意味です。つまり、http://comtopia.jp/が付くページならどこでもGoogle Map API使用可能ってことです。リファラーは指定しなくてもよいのですが、APIキーはhtmlソースを見ればバレてしまいますので、他サイトで勝手に使われる可能性があるわけですね。Google Map APIは毎日2,500アクセスまで(だったかな?)は無料、それ以上は有料となるので、できればリファラーは設定しておいた方がよいでしょう。
設定が完了したら、”APIキーを作成する”をクリックします。

APIキーの発行
これでAPIキーが発行されました。このキーは後ほど、javascriptを書くときに使用しますので、コピーしといて下さい。

住所から緯度と経度を検索するAPI

Google Mapの表示には緯度と経度を指定してやる必要があります。とは言え、”緯度と経度なんてわかるわけねぇ!”というのが普通です。そこで住所から緯度と経度を逆引きできるAPIを有効化してやります。

API概要
左上の”概要”をクリックすると、APIの一覧が表示されます。Google Map APIの中に”その他”があるのでクリックします。

Google Map Geocoding API
表示されたリストの中に、”Google Map Geocoding API”というのがありますので、これをクリックします。

APIの有効化
”有効にする”をクリックし、Geocding APIの準備は完了です。

javascriptを書いて表示する

これをコピペするだけで、とりあえずの目的は達成できるはずですw
先ほど取得したAPIキーを1行目の”ここにAPIキー”ってとこに入力します。
次に地図表示する住所を4行目の”ここに住所を入力”に入力します。
あとは以下コードをコピーして、htmlに貼り付けるだけでOKのハズです。
<script src="https://maps.googleapis.com/maps/api/js?key=ここにAPIキー" type="text/javascript"></script>
<script type="text/javascript">
	//COMTOPIA流Google MAP表示方法
	var geocoder = new google.maps.Geocoder();//Geocode APIを使います。
	var address = "ここに住所を入力";
	geocoder.geocode({'address': address,'language':'ja'},function(results, status){
		if (status == google.maps.GeocoderStatus.OK){
			var latlng=results[0].geometry.location;//緯度と経度を取得
			var mapOpt = {
          		center: latlng,//取得した緯度経度を地図の真ん中に設定
          		zoom: 15,//地図倍率1~20
          		mapTypeId: google.maps.MapTypeId.ROADMAP//普通の道路マップ
        	};
			var map = new google.maps.Map(document.getElementById('google_map'),mapOpt);
			var marker = new google.maps.Marker({//住所のポイントにマーカーを立てる
				position: map.getCenter(),
				map: map
			});
		}else{
        	alert("Geocode was not successful for the following reason: " + status);
        }
	});
</script>
<div id="google_map" style="width:90%;height:500px"></div>

こんな風に地図が表示されるはず

東京タワーの住所を入れて表示してみました。どうですか?そんなに難しくないでしょ?


他にも表示オプション有り

ここではごく簡単な住所から地図を表示するという昨日の実相を説明しましたが、航空写真を表示、直線距離を計測、経路検索する、クリックしたらイベント発生などなど、Google Map APIにはたくさんのオプションがあります。詳細は以下のGoogle Map APIのリファレンスをご参照頂ければと思います。(英語でちょっとややこしいですケド・・・泣)
Google Map Developers

Google Map関するお問い合わせ

Google Map実装に関してお困りであればCOMTOPIAで作業代行させて頂くことができますので、お気軽にお問い合わせ下さい。
Googleマップに関するお問い合わせ

パソコンのトラブルはこちらへ
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です