ACF の Google Map のフィールドで入力した複数の値で地図に複数マーカーを打って、Google Map の Google Maps JavaScript API V3 の fitBounds で地図をいい感じに表示させたい。

まず、この【Google Maps JavaScript API v3】すべてのマーカーを地図の中に収める【LatLngBounds】の下記のコードを参考に、ACF の値を使ってやってみた。

まず地図を読み込ませるページにGoogle Map APIのキー先に取得して記述します。

<script src="https://maps.googleapis.com/maps/api/js?key=xxx"></script>
xxxはAPIのキーをいれてください。

参考のコード

var locations = [
   ['東京タワー', 35.658581, 139.745433],
   ['スカイツリー', 35.789966, 139.821961],
   ['東京ドーム', 35.705471, 139.751801],
   ['ランドマークタワー', 35.454948, 139.631429]
];
var map = new google.maps.Map(document.getElementById('map'));
var bounds = new google.maps.LatLngBounds();
var infoWindow = new google.maps.InfoWindow();
var marker;
for (var i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
  // 地図表示領域をマーカー位置に合わせて拡大
  bounds.extend (marker.position);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infoWindow.setContent('観光スポット名：' + '<br>' + locations[i][0]);
      infoWindow.open(map, marker);
    }
  })(marker, i));
}
// 引数に指定した矩形領域を地図に収める
map.fitBounds (bounds);

locationsの値を ACF で入力した値（ACFフィールド名：address_gmap）にしたいので…

var locations = [
    //   ['東京タワー', 35.658581, 139.745433], の形にACFの値を出力させる

    <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php
            if( get_field('address_gmap') ) { 
                $googlemap = get_field('address_gmap'); ?>
                ['<?php the_title(); ?>', <?php echo $googlemap['lat']; ?>, <?php echo $googlemap['lng']; ?>, '<?php the_permalink(); ?>'],
          <?php } ?>

    <?php endwhile; ?>
    <?php endif; ?>
];

あと、マーカーの情報ウインドウにスポット名とリンクを入れて、ACFの値が1つしかない時のマップのズームを固定したいのでそのへんをゴニョゴニョしてできたコードがこれ。

APIキーを読み込む

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCTEeq6kg_E46ERvg7z5UJth4zDrPWUFog"></script>

マップを表示させる

<?php if(have_posts()): ?>
    <div id="map"></div>
<?php endif; ?>

<script>                              
    var locations = [
    //   ['東京タワー', 35.658581, 139.745433],

    <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>

        <?php
            if( get_field('address_gmap') ) { 
                $googlemap = get_field('address_gmap'); ?>
                ['<?php the_title(); ?>', <?php echo $googlemap['lat']; ?>, <?php echo $googlemap['lng']; ?>, '<?php the_permalink(); ?>'],
          <?php } ?>

    <?php endwhile; ?>
    <?php endif; ?>
    ];

    var map = new google.maps.Map(document.getElementById('map'));
    var bounds = new google.maps.LatLngBounds();
    var infoWindow = new google.maps.InfoWindow();
    var marker;

    for (var i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

    // 地図表示領域をマーカー位置に合わせて拡大
    bounds.extend (marker.position);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(
                // マーカーをクリックした時の情報ウインドウに表示させたいもの
                'スポット名：' + 
                '<br>' +
                '<a href="' + locations[i][3] + '>' + locations[i][0] + '</a>'
            );
            infoWindow.open(map, marker);
        }
      })(marker, i));
    }

    // 引数に指定した矩形領域を地図に収める（マーカーの数が1つ以上のときは縮小をフィットさせる）
    if (locations.length > 1) {
      map.fitBounds(bounds);
    }
    else if (locations.length == 1) {
      map.setCenter(bounds.getCenter());
      map.setZoom(13);
    }
</script>

CSS（一応レスポンシブ対応）
※マップには高さが無いと表示されないので値は必須

#map {
width: 100%;
height: 450px;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 960px) {
#map {
max-height: 400px;
min-height: 240px;
height: 75vw;
}
}

と、こんな感じで何とか思うようなページができました。
ただ、プログラムが全くできないデザイナーが書いたコードなので、なにかおかしいところ、こうしたほうがいいなどあれば教えてもらえるとうれしいです。