【google API エラーについて】Uncaught ReferenceError: google is not defined at initMap

前提・実現したいこと

ワードプレスでサイトを作成しています。

グーグルマップをモノクロにして独自画像をマーカーに変更して実装をしています。

Webサイト上のGoogleマップをグレースケール（モノクロ）にカスタマイズする方法

該当のソースコード

<!-- グーグルマップ にアイコン埋め込み -->
<script>
    var map;
    var marker;
    var mapOptions = {
        center: { // 地図の緯度経度
            lat: 【緯度】,
            lng: 【経度】
        },
        zoom: 14 // 地図の拡大率
    }
    var markerData = [{
        lat: 【緯度】,
        lng: 【経度】
    }];

    /**
     * マップとマーカーの埋め込み
     */
    function initMap(id, lat, lng) {
        map = new google.maps.Map(document.getElementById('map'), mapOptions);

        // マーカーの設置
        marker = new google.maps.Marker({
            icon: new google.maps.MarkerImage(
                '../img/gmap_icon.png',
                //画像ファイルのパス
                new google.maps.Size(80, 95),
                //アイコンの表示サイズ(縦,横)
                new google.maps.Point(0, 0)
            ),
            position: markerData[0],
            map: map,
        });
        /*=========ここから追加=========*/
        var mapStyle = [{
            "stylers": [{
                "saturation": -100
            }]
        }];
        var mapType = new google.maps.StyledMapType(mapStyle);
        map.mapTypes.set('GrayScaleMap', mapType);
        map.setMapTypeId('GrayScaleMap');
        /*=========ここまで追加=========*/

        console.log('ズーム値:', map.getZoom());
        // ズーム値変更時
        map.addListener('zoom_changed', function() {
            console.log('ズーム値:', map.getZoom());
            // 20未満の場合はマーカーサイズ縮小
            if (map.getZoom() < 20) {
                // マーカーのサイズ変更
                marker.setOptions({
                    icon: {
                        url: '../img/gmap_icon.png',
                        scaledSize: new google.maps.Size(80, 95)
                    }
                });
                // 20以上の場合はマーカーサイズを戻す
            } else {
                marker.setOptions({
                    icon: '../img/gmap_icon.png'
                });
            }
        });
    }
    initMap();
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=【APIKEY】&callback=initMap"></script>