Удалить Render-Blocking JavaScript для Google Maps
-
13-12-2019 - |
Вопрос
Отзыв PageSpeed показывает мне, что я удаляю блокировку рендеринга для моих Google Maps JS. Добавлено в CMS Content и это код:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=myipcode">// <![CDATA[
// ]]></script>
<script type="text/javascript">// <![CDATA[
function initialize() {
var myLatlng = new google.maps.LatLng(mycoord1, mycoord2);
var mapOptions = {
zoom: 17,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'My Title'
});
}
.
Google.maps.event.adddomListener (окно, «нагрузка», инициализация); //]]>
Если я добавлю async="async"
к
Решение
Попробуйте следующее
<div id="map"></div>
<script type="text/javascript">
function initializeMap() {
var myLatlng = new google.maps.LatLng(mycoord1, mycoord2);
var mapOptions = {
zoom: 17,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'My Title'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=myipcode&callback=initializeMap"
async defer></script>
.
Важно разместить метку внешнего сценария после остальных, так что оно должно обращать внимание.Кроме того, использование ASYNC означает, что вы должны добавить метод обратного вызова, чтобы он инициализировал его.
Я бы посоветовал к initialize
в качестве имени метода, так как оно довольно общее и может использоваться в другом месте
Не связан с magento.stackexchange