Javascript 异步记录google地图脚本

我正在尝试异步加载我的google maps api调用脚本，这样它就不会在我的WordPress站点上出现渲染阻塞

忽略PHP，我通过customizer加载自定义设置

我可以通过在api调用脚本标记中添加async defer来加载它，但问题是只有在我硬加载浏览器时才会加载映射，一般用户都不知道该怎么做。如何在不需要硬加载站点的情况下加载地图

<script id="map-code" type="text/javascript" async defer>

 function init() {

    var styledMapType = new google.maps.StyledMapType([{"elementType":"geometry","stylers":[{"color":"#f5f5f5"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#f5f5f5"}]},{"featureType":"administrative.land_parcel","elementType":"geometry.stroke","stylers":[{"color":"#c7e0ba"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#bdbdbd"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#eeeeee"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#e5e5e5"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#ffffff"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#dadada"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#e5e5e5"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#eeeeee"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#c9c9c9"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]}]  , {name: "Styled Map"});

    var position = [<?php echo get_theme_mod('google_map_coordinates') ?>];
    var latLng = new google.maps.LatLng(position[0], position[1]);

    var mapOptions = {
        zoom: 11, // initialize zoom level - the max value is 21
        streetViewControl: false, // hide the yellow Street View pegman
        scaleControl: true, // allow users to zoom the Google Map
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        fullscreenControl: false,
        scaleControl: false,

        center: latLng
    };

    var numberMarkerImg = {
        url: '<?php echo get_theme_mod('map_marker_image')?> ',
        size: new google.maps.Size(<?php echo get_theme_mod('map_marker_container_size') ?>),
        scaledSize: new google.maps.Size(<?php echo get_theme_mod('map_marker_container_size') ?>),
        labelOrigin: new google.maps.Point(<?php echo get_theme_mod('map_marker_label_position') ?>)
    };


    map = new google.maps.Map(document.getElementById('googlemaps'), mapOptions);

     marker = new google.maps.Marker({
        position: latLng,     
        label: 'Label',
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP,
        mapTypeControlOptions: {
            mapTypeIds: ['styled_map']
          },
        title:"Your Name",
            label: {
                color: "<?php echo get_theme_mod('map_label_color') ?>",
                text: "<?php echo get_theme_mod('google_label_name')?>",
                fontWeight: "900",             
                fontSize: "16px"
            },
        icon: numberMarkerImg

    });

    map.mapTypes.set('styled_map', styledMapType);
    map.setMapTypeId('styled_map');

 }

 //google.maps.event.addDomListener(window, 'load', init);

</script>

函数init（）{
var styledMapType=new google.maps.styledMapType（[{“elementType”：“geometry”，“stylers”：[{“color”：“#f5f5”}]}，{“elementType”：“labels.icon”，“stylers”：[{“visibility”：“off”}]，{“elementType”：“labels.text.fill”，“stylers”：[{“color”：“{“color”：“labels.text.stroke”：“labels.stroke”，“stylers”：“{“color”：“{“color”：“color”：“{f5f5”}，{“administrative.land_parcel”、“elementType”：“geometry.stroke”、“stylers”：[{“color”：“#c7e0ba”}、{“featureType”：“administrative.land_parcel”、“elementType”：“labels.text.fill”、“stylers”：[{“color”：“#BDBD”}、{“featureType”：“poi”、“elementType”：“geometry”、“stylers”：[{“color”：“eeeeee”}、{“featureType”：“poi”、“elementType”：“labels.text.fill”、“stylers.”颜色：“#757575”}，{“featureType”：“poi.park”，“elementType”：“geometry”，“stylers”：[{“color”：“#E5E5E5E5”}，{“featureType”：“poi.park”，“elementType”：“labels.text.fill”，“stylers”：[{“color”：“#9e9e9e”}，{“featureType”：“road”，“elementType”：“geometry”，“stylers”：{“color”：“FFFF”}，{“color”：“}，{“动脉类型”，“道路填充”，“文字类型”：“stylers”：“：[{“颜色”：“#757575”}，{“特征类型”：“道路.公路”，“元素类型”：“几何体”，“样式器”：[{“颜色”：“#达达”}}，{“特征类型”：“道路.公路”，“元素类型”：“标签.文本.填充”，“样式器”：[{“颜色”：“#61616161”}]}，{“特征类型”：“道路.局部”，“元素类型”：“标签.文本.填充”，“样式器”：“{“颜色”：“#“几何体”、“样式器”：[{“颜色”：“#E5E5”}]，{“特征类型”：“中转站”、“元素类型”：“几何体”、“样式器”：[{“颜色”：“#eeeeeeee”}]，{“特征类型”：“水”、“元素类型”：“几何体”、“样式器”：[{“颜色”：“#C9C9C9C9”}]，{“特征类型”：“水”、“元素类型”：“标签.文本.填充物”、“样式器”：[{“颜色”：“#C9C9C9C9C9”}]，{；
var位置=[]；
var latLng=new google.maps.latLng（位置[0]，位置[1]）；
变量映射选项={
缩放：11，//初始化缩放级别-最大值为21
streetViewControl:false，//隐藏黄色街景
scaleControl:true，//允许用户缩放谷歌地图
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
全屏控制：错误，
scaleControl:false，
中心：拉丁
};
变量编号标记={
url:“”，
大小：新的google.maps.size（），
scaledSize:new google.maps.Size（），
labelOrigin：新的google.maps.Point（）
};
map=new google.maps.map（document.getElementById（'googlemaps'），mapOptions）；
marker=新的google.maps.marker({
位置：latLng，
标签：“标签”，
地图：地图，
可拖动：错误，
动画：google.maps.animation.DROP，
mapTypeControlOptions：{
MapTypeId:['styled_map']
},
标题：“你的名字”，
标签：{
颜色：“，
正文：“，
重量：“900”，
字体大小：“16px”
},
图标：数字标记
});
map.mapTypes.set（'styled_map'，styledMapType）；
setMapTypeId（'styled_map'）；
}
//google.maps.event.addDomListener（窗口'load'，init）；

我的呼叫脚本标记

<script src="https://maps.googleapis.com/maps/api/js?callback=init&libraries=places&key=API_KEY" async defer></script>

---

我曾尝试将调用放在映射代码的上方和下方，但没有成功。我的意思是，JS以异步方式成功加载，但如果没有硬加载，则不会呈现。我想我需要知道是否需要同时加载它们asyn或defer，或者只加载api调用，我在WITS的末尾。

只需做一个小的更改即可。

---

从

<script src="https://maps.googleapis.com/maps/api/js?callback=init&libraries=places&key=API_KEY" async defer></script>

从body tag中调用它，

---

例如，

嗯，这不起作用，现在地图根本无法加载