Advanced Custom FieldでGooglemapが表示されない時の対処法

まず、Google Map APIキーを作成。
Google Maps APIs for Web にて、手順通りに作成。

テーマのfunctions.phpに、

function my_acf_google_map_api( $api ){
$api['key'] = 'ここにAPIキー';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

さきほど取得したGoogle Map APIキーを入力。
これで対応できます。
何れはAdvanced Custom Field側で更新されると思います。


出力は、

<?php
if( get_field('フィールド名') ) { 
    $googlemap = get_field('フィールド名'); ?>
<script src="//maps.google.com/maps/api/js"></script>
<div id="googlemaps" style="width:auto; height:400px;"></div>
<script type="text/javascript">
google.maps.event.addDomListener(window,"load",function(){
    var mapdiv=document.getElementById("googlemaps");
    var myOptions = {
        zoom:17,
        center:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"),
        mapTypeId:google.maps.MapTypeId.ROADMAP,
        scaleControl:true
    };
    var map=new google.maps.Map(mapdiv,myOptions);
    var marker=[];
    var infowindow=[];
    marker[0]=new google.maps.Marker({
        position:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"),
        map:map,
        title:"<?php echo $googlemap['address']; ?>"
    });
});
</script>
<?php } ?>

で表示。

header.phpに
<script src="//maps.google.com/maps/api/js"></script>
 がある場合は、二回読み込んでしまってエラーになるので注意。
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=APIキー">
で対応。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA