Remova o JavaScript de bloqueio de renderização do Google Maps

Question

O PageSpeed ​​​​Insights me mostra que devo remover o bloqueio de renderização do meu Google Maps js.É adicionado o conteúdo do cms e este é o código:

<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(janela, 'carregar', inicializar);// ]]>

 

Se eu adicionar o async="async" para o os mapas não são carregados, mas a mensagem do pagespeed desaparece.O que devo fazer ?

Answer 1

Tente o seguinte

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

É vital colocar a tag de script externa DEPOIS do resto, para que haja algo para o qual retornar a chamada.Além disso, usar async significa que você precisa adicionar um método de retorno de chamada para permitir a inicialização.

eu desaconselharia initialize como um nome de método, pois é bastante genérico e pode ser usado em outro lugar