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

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>

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

もし表示されない場合はブラウザの開発ツールでコンソールを確認してエラーを修正していただければと思います。

まとめ

最後に、本記事でご紹介したAPIサービス名をまとめます。

• Geocoding API
• Maps JavaScript API

上記のAPIサービスをライブラリから有効にして実装してくださいね。

以上、Googleマップで地名や住所からサイトに地図を表示する方法のご紹介でした！

Googleマップはサイトに地図を表示するツールとしてとても便利なので、色々な使い方を知っておくことで対応できる案件の幅が広がります。

地名や住所から地図を表示する必要がある場合に、本記事でご紹介した内容をご活用いただければ幸いです。