【Googleマップ】地名や住所から緯度経度を取得してサイトに地図を表示する

こんにちは、Ryohei（@ityryohei）です！

Googleマップで住所から座標を取得して、サイト上に地図を表示する方法のご紹介です。

サイトに地図を表示する手段として、Googleマップを用いることが多くあります。Googleマップでサイトに地図を表示する場合、緯度・経度の情報が必要になりますが、緯度・経度がわからなくても、地名や住所から緯度・経度を取得して地図を表示することもできます。

本記事では、その方法をご紹介しています。

※2018年7月より、Googleが提供するAPIサービスを利用するには、APIキーの取得と、クレジットカード情報を登録したアカウントが必須となっています。クレジットカード情報は「Google Cloud Platform」のコントールパネルにある「お支払い」から登録するこができますので、予めご準備ください。

本記事の内容

住所や地名から緯度・経度を取得するのに使用するAPIサービス
地名や住所からサイトに地図を表示するスクリプトのご紹介

では、解説していきます。

住所や地名から緯度・経度を取得するのに使用するAPI

冒頭でもお話しましたが、Googleマップでサイトに地図を表示する場合、必要になるのが緯度・経度の情報になります。緯度・経度がわかっていれば、特に問題なくサイトに地図を表示することができます。

ただ、住所や地名や建物名であればわかることは多いですが、緯度・経度が予めわかっている状況って、あまりないですよね……。

Google先生もその辺は想定されているようで、地名や住所から緯度・経度が取得できるAPIが用意されています。そのAPIを使用することで、地名や住所の情報から緯度・経度を取得してサイトに地図を表示することができます。

使用するAPIサービスは「Maps JavaScript API」と「Geocoding API」になります。（下記のアイコンになります。）

前提として上記のAPIサービスが有効になっている必要がありますので、「Google Cloud Platform」の「APIライブラリ」から上記2つのサービスを有効化しておきましょう。

詳細は下記をご参照ください。

Maps JavaScript API

Geocoding API

住所から座標を取得してサイトに地図を表示する

実際にサイトに地図を表示してみます。HTMLは下記の単純なものを使用します。

HTML

<div id="map" style="width: 600px; height: 500px;"></div>

下記はスクリプトになります。

「target」にHTMLで記述した要素を指定して、「address」に検索したい住所を指定します。

もし、存在しない住所が渡された場合は、targetの要素が非表示になるようにしています。

JS

<script>
function initMap() {
 
  var target = document.getElementById('map'); //マップを表示する要素を指定
  var address = '東京都新宿区西新宿2-8-1'; //住所を指定
  var geocoder = new google.maps.Geocoder();  

  geocoder.geocode({ address: address }, function(results, status){
    if (status === 'OK' && results[0]){

      console.log(results[0].geometry.location);

       var map = new google.maps.Map(target, {  
         center: results[0].geometry.location,
         zoom: 18
       });

       var marker = new google.maps.Marker({
         position: results[0].geometry.location,
         map: map,
         animation: google.maps.Animation.DROP
       });

    }else{ 
      //住所が存在しない場合の処理
      alert('住所が正しくないか存在しません。');
      target.style.display='none';
    }
  });
}
</script>
<script src="//maps.google.com/maps/api/js?key=GOOGLE_API_KEY&callback=initMap"></script>

処理が実行されると、下記のようなマップが表示されます。