● Google Maps を住所から自動生成するサンプル ( Google Maps Platform API 使用)

PHPや.Net などで動的に出力されるページにGoogle Mapsを埋め込む場合、 「住所を入力して地図を表示」→「埋め込みコードを取得」→「ページに貼り付け」 をやっていたのでは面倒な場合があります。

そこでGoogle Maps API を使用して簡単に地図表示を行います。

● 1. Google Maps PlatformでAPIキーを作成する

アカウント作成（GoogleアカウントがあればOK）が必要です。 ここにログインし、APIキーを作成します。

＊ APIキーの作成

・新しいプロジェクトを作成する
・作成したプロジェクトで「Maps JavaScript API」「Geo Coding API」を有効にする
・「API」→「Google Maps Platform」を選択し「認証情報」タブを選択する
・「API とサービスの認証情報にアクセスして行います」のリンクをクリックしてAPIキーを作成する
・「認証情報を作成」→「APIキー」を選択すると新しいAPIキーが作成されます。
・「キーの制限」を適宜設定します。

● 2. Google Maps を住所から自動生成するサンプル

html内に Google Map を表示するDIV タグをセット

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

JavaScriptから呼び出す

<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-API-KEY>&callback=initMapWithAddress" async defer></script>
<script>
var _my_address = '表示させたい地図の住所';
function initMapWithAddress() {
    var opts = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    var my_google_map = new google.maps.Map(document.getElementById('my_map'), opts);
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode(
      {
        'address': _my_address,
        'region': 'jp'
      },
      function(result, status){
        if(status==google.maps.GeocoderStatus.OK){
            var latlng = result[0].geometry.location;
            my_google_map.setCenter(latlng);
            var marker = new google.maps.Marker({position:latlng, map:my_google_map, title:latlng.toString(), draggable:true});
            google.maps.event.addListener(marker, 'dragend', function(event){
                marker.setTitle(event.latLng.toString());
            });

        }
      }
    );
  }
</script>

なお、地図のサイズは

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

をスタイルで書き換えます。