Advanced Custom Fieldsに記入された住所からgoogle mapを表示させるまでのTips

Advanced Custom Fieldsで住所欄を作り、住所を打ち込む。その住所を自動的にgoogleMapに変換してwebサイトに表示をする。自動化のためのTipsをこちらに記入します

googleMap 表示確認
地図にマーカーを立てる
1. 吹き出しの追加
住所からマップを表示
1. ジオコーティングが動作するかの確認
2. 調べた結果から地図を表示
JavaScriptを埋め込みに変更

googleMap 表示確認

今回の肝となるGoogleMap表示のためのTipsはこちらを参考にさせて頂いております。

Google Maps APIを使って複数のマーカーと吹き出しを設置してみる｜ Tips Note by TAM

API

GoogleMapAPIはおそらく必要になるのでこちらで取得をします

GoogleMapsAPI

JavaScriptをアップロード

JavaScriptとしてscriptで囲んでHTMLに入れるかテキストエディタにコピーして.jsファイルとして読み込みます。

scriptで囲んでHTMLに挿入する場合は下記を囲んで使用

var map;
function initMap() {
 map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
     center: { // 地図の中心を指定
           lat: 35.170915, // 緯度
          lng: 136.881537 // 経度
       },
      zoom: 16 // 地図のズームを指定
   });
}

もしくはテキストエディタにコピーしたものを.jsの拡張子で保存、ドメイン直下にjsフォルダを作成して、その中に保存した.jsファイルをアップロードした場合の読み込み文

HTML編集で呼び出しと表示

HTMLに下記を挿入して

GoogleAPIを呼び出し

ここまでの工程で最低限のMAPの表示が成功していると思います。

GoogleMap表示デモ1

地図にマーカーを立てる

var map;
var marker;
var center = {
  lat: 35.170915, // 緯度
  lng: 136.881537 // 経度
};
function initMap() {
 map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
     center: center, // 地図の中心を指定
     zoom: 16 // 地図のズームを指定
   });
 marker = new google.maps.Marker({ // マーカーの追加
        position: center, // マーカーを立てる位置を指定
      map: map // マーカーを立てる地図を指定
   });
}

マップの中心にマーカーを立てるためのJavaScript

GoogleMap表示デモ2

吹き出しの追加

var map;
var marker;
var infoWindow;
var center = {
   lat: 35.170915, // 緯度
  lng: 136.881537 // 経度
};
function initMap() {
 map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
     center: center, // 地図の中心を指定
     zoom: 16 // 地図のズームを指定
   });
 marker = new google.maps.Marker({ // マーカーの追加
        position: center, // マーカーを立てる位置を指定
      map: map // マーカーを立てる地図を指定
   });
 infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加
        content: '名古屋駅' // 吹き出しに表示する内容
  });
 marker.addListener('click', function() { // マーカーをクリックしたとき
     infoWindow.open(map, marker); // 吹き出しの表示
    });
}

中心に追加されたマーカーをクリックすると、指定していた文章が入ります。

GoogleMap表示デモ3

住所からマップを表示

ジオコーティングが動作するかの確認

こちらのjsファイルで確認するとコンソールに成功したかが出る

var geocoder;
function initMap() {
    geocoder = new google.maps.Geocoder();
  geocoder.geocode({
      'address': '愛知県名古屋市中村区名駅１丁目１−４' // 名古屋駅
   }, function(results, status) { // 結果
        if (status === google.maps.GeocoderStatus.OK) { // ステータスがOKの場合
          console.group('Success');
         console.log(results);
           console.log(status);
        } else { // 失敗した場合
          console.group('Error');
           console.log(results);
           console.log(status);
        }
   });
}

GoogleMap表示デモ4

調べた結果から地図を表示

var map;
var marker;
var geocoder;
function initMap() {
   geocoder = new google.maps.Geocoder();
  geocoder.geocode({
      'address': '愛知県名古屋市中村区名駅１丁目１−４' // 名古屋駅
   }, function(results, status) { // 結果
        if (status === google.maps.GeocoderStatus.OK) { // ステータスがOKの場合
          map = new google.maps.Map(document.getElementById('sample'), {
                center: results[0].geometry.location, // 地図の中心を指定
               zoom: 16 // 地図のズームを指定
           });
         marker = new google.maps.Marker({
               position: results[0].geometry.location, // マーカーを立てる位置を指定
                map: map // マーカーを立てる地図を指定
           });
     } else { // 失敗した場合
          alert(status);
      }
   });
}