Entfernen Sie JavaScript, das das Rendern blockiert, für Google Maps

Question

Die PageSpeed ​​Insights zeigen mir, dass ich die Renderblockierung für meine Google Maps js entfernen muss.Es wird der CMS-Inhalt hinzugefügt und dies ist der Code:

<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(window, 'load', initialize);// ]]>

 

Wenn ich das hinzufüge async="async" zum Die Karten werden nicht geladen, aber die Meldung vom Pagespeed verschwindet.Was soll ich machen ?

Answer 1

Versuche Folgendes

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

Es ist wichtig, das externe Skript-Tag NACH dem Rest zu platzieren, damit es einen Rückruf gibt.Außerdem bedeutet die Verwendung von Async, dass Sie eine Rückrufmethode hinzufügen müssen, damit es initialisiert wird.

Ich würde davon abraten initialize als Methodenname, da er ziemlich allgemein ist und an anderer Stelle verwendet werden könnte