Я пытаюсь загрузить свой скрипт вызова API Google Maps асинхронно, чтобы он не блокировал рендеринг на моем сайте WordPress.
Не обращая внимания на PHP, я загружаю пользовательские настройки через настройщик.
Я могу загрузить его, добавив отсрочку асинхронности в мой тег сценария вызова API, но проблема в том, что карта загружается только после полной перезагрузки браузера, средний пользователь не знает, как это сделать.Как сделать так, чтобы карта загружалась без перезагрузки сайта?
<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>
Мой сценарий тега для вызова
<script src="https://maps.googleapis.com/maps/api/js?callback=init&libraries=places&key=API_KEY" async defer></script>
Я попытался поместить вызов выше и ниже картыКод без успеха.Я имею в виду, что JS успешно загружен асинхронно, но не будет рендериться без полной перезагрузки.Думаю, мне нужно знать, нужно ли мне загружать их как асинхронные, так и отложенные, или просто вызов API, я в конце своих умов.