Rimuovi JavaScript di blocco rendering per Google Maps

Question

Le intuizioni PagangeSpeed mi mostrano che io rimuovere il blocco del rendering per il mio JS Google Maps JS. Viene aggiunto il contenuto in CMS e questo è il codice:

<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 (finestra, 'carico', inizializza); //]]>

Se aggiungo il async="async" a Le mappe non vengono caricate ma il messaggio da PageSpeed Avars.Cosa dovrei fare?

Answer 1

Prova il seguente

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

.

È fondamentale posizionare il tag di script esterno dopo il resto, quindi ha qualcosa a cui richiamare.Inoltre, usando ASYNC significa aggiungere un metodo di callback per lasciarlo inizializzare.

Consiglierei contro initialize come nome del metodo poiché è piuttosto generico e potrebbe essere usato altrove