「Advanced Custom Fields」でGoogleMapを追加した際の不具合

non888 さん

以前作成したソースの抜粋です。
functions.phpではなく、投稿に使用してますが
基本的には、フロントページなどどこでも実装できています。

考え方的には、

ACFの地図フィールドは配列なので下記のように各個にばらしてあげると扱いやすいかもしれません。
緯度、経度にばらせれば、JSやAPIなど加工ができると思います。

$gps_array = get_field('gps-field');//入力住所・lat・langの値を取得
$gps_address = $gps_array["address"];//入力住所
$lat = esc_js($gps_array["lat"]);//緯度
$lng = esc_js($gps_array["lng"]);//経度

前に使用したソース（参考までに）

<?php

/*

//アクセスのSINGLEページ（主要部）

*/

$gps_array = get_field('gps-field');//入力住所・lat・langの値を取得
$gps_address = $gps_array["address"];//入力住所
$lat = esc_js($gps_array["lat"]);//緯度
$lng = esc_js($gps_array["lng"]);//経度

//googlemapへのリンクURL
$google_map_url = esc_url('http://maps.google.com/maps?q=' .$gps_address);

if (have_posts()) :
while (have_posts()) :
the_post();

//echo get_the_term_list( $post->ID, 'area', '<h2 class="headline1" id="product_headline"><span>', ', ', '</span></h2>' );
 
?>
 <h2 class="headline1"><?php the_title(); ?></h2>

<?php
if($gps_array ) :

?>
<div id="map-area"> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script language="javascript" charset="UTF-8" type="text/javascript" src="http://map.simpleapi.net/stationapi?x=<?php echo $lat; ?>&y=<?php echo $lng; ?>&output=javascript"></script>
<script type="text/javascript">
(function($) {
 
function render_map( $el ) {
    // var
    var $markers = $el.find('.marker');
    // vars
    var args = {
        zoom        : 10,
        center      : new google.maps.LatLng(0, 0),
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };
    // create map               
    var map = new google.maps.Map( $el[0], args);
    // add a markers reference
    map.markers = [];
    // add markers
    $markers.each(function(){
        add_marker( $(this), map );
    });
 
    // center map
    center_map( map );
 
}
 
function add_marker( $marker, map ) {
    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    // create marker
    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map
    });
    // add to array
    map.markers.push( marker );
    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content     : $marker.html()
        });
 
        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open( map, marker );
        });
    }
}
 
function center_map( map ) {
    // vars
    var bounds = new google.maps.LatLngBounds();
    // loop through all markers and create bounds
    $.each( map.markers, function( i, marker ){
        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
        bounds.extend( latlng );
    });
    // only 1 marker?
    if( map.markers.length == 1 )
    {
        // set center of map
        map.setCenter( bounds.getCenter() );
        map.setZoom( 10 );//googlemapのzoom値
    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );
    }
}
$(document).ready(function(){
    $('.acf-map').each(function(){
        render_map( $(this) );
    });
});
})(jQuery);
</script>                

<div class="acf-map">
    <div class="marker" data-lat="<?php echo $lat; ?>" data-lng="<?php echo $lng; ?>"></div>
</div><!-- END #map-area -->

<div class="bottom_block">

  <a class="google-map-link" href="<?php echo $google_map_url ?>" target="_blank">Googleマップで開く</a>

</div><!-- .bottom_block -->
 
 
 </div><!-- END #maparea -->
 
<?php endif;//if($latlng) : ?>

 <!--div id="product_image">
<?php if (!empty($gps_array)) :
echo '<img title="'.$site_name.'" class="_img" src="//maps.googleapis.com/maps/api/staticmap?center=' . $lat . ',' . $lng . '&size=575x380&scale=1&sensor=false&markers=color%3Ared%7C' . $lat . ',' . $lng . '" alt="" width="575" height="380">';//246x188
?>
<?php endif; ?>
 </div-->

 <div class="post clearfix">

  <?php
  
  //the_content();
  ?>
  <?php //custom_wp_link_pages(); ?>

 </div><!-- END .post -->

 <?php
 endwhile;
 endif;
 
 
 
 ?>