ACF Googleマップのフィールドはレンダリングされません

Question

自分のサイトでACFのgoogle mapsフィールドを使用しようとしています。私はapiキーを持っており、サンプルコードを使用しています。私はページ上のブロック要素を見ることができますが、コンテンツはありません。

私はここにhttps://www.advancedcustomfields.com/resources/google-map/見られるようなコードを使用していますが、ここで自分のAPIキー でXXXを交換した次のエラー

google-maps.js:24 Uncaught ReferenceError: google is not defined 
at render_map (google-maps.js:24) 
at HTMLDivElement.<anonymous> (google-maps.js:151) 
at Function.each (jquery.min.js?ver=2.1.0:2) 
at o.fn.init.each (jquery.min.js?ver=2.1.0:2) 
at HTMLDocument.<anonymous> (google-maps.js:149) 
at j (jquery.min.js?ver=2.1.0:2) 
at Object.fireWith [as resolveWith] (jquery.min.js?ver=2.1.0:2) 
at Function.ready (jquery.min.js?ver=2.1.0:2) 
at HTMLDocument.I (jquery.min.js?ver=2.1.0:2) 

を取得しています私は、コード

/* 
* new_map 
* 
* This function will render a Google Map onto the selected jQuery element 
* 
* @type function 
* @date 8/11/2013 
* @since 4.3.0 
* 
* @param $el (jQuery element) 
* @return n/a 
*/ 

function new_map($el) { 

    // var 
    var $markers = $el.find('.marker'); 


    // vars 
    var args = { 
     zoom  : 16, 
     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); 


    // return 
    return map; 

} 

/* 
* add_marker 
* 
* This function will add a marker to the selected Google Map 
* 
* @type function 
* @date 8/11/2013 
* @since 4.3.0 
* 
* @param $marker (jQuery element) 
* @param map (Google Map object) 
* @return n/a 
*/ 

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); 

     }); 
    } 

} 

/* 
* center_map 
* 
* This function will center the map, showing all markers attached to this map 
* 
* @type function 
* @date 8/11/2013 
* @since 4.3.0 
* 
* @param map (Google Map object) 
* @return n/a 
*/ 

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(16); 
    } 
    else 
    { 
     // fit to bounds 
     map.fitBounds(bounds); 
    } 

} 

/* 
* document ready 
* 
* This function will render each map when the document is ready (page has loaded) 
* 
* @type function 
* @date 8/11/2013 
* @since 5.0.0 
* 
* @param n/a 
* @return n/a 
*/ 
// global var 
var map = null; 

$(document).ready(function(){ 

    $('.acf-map').each(function(){ 

     // create map 
     map = new_map($(this)); 

    }); 

}); 

})(jQuery); 
</script> 

ですhttps://www.aliciaramirez.com/2015/02/advanced-custom-fields-google-maps-tutorial/ 私はjsとapiの新機能にかなり慣れているので、本当に明白な何かを見逃しているかもしれません。

Answer 1

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> のように見えますが、コードに既に含まれている場合は、ヘッダーにあることを確認する必要があります（コードの前に実行する必要があります）。