Supprimer rendu de blocage de JavaScript pour google maps

Question

Le PageSpeed Insights me montre que j'ai supprimer le rendu de blocage pour ma google maps js.Il est ajouté dans le contenu cms et c'est le 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.cartes.de l'événement.addDomListener(window, 'load', initialiser);// ]]>

 

Si j'ajoute l' async="async" à l' les cartes n'est pas chargé, mais le message de la pagespeed disappers.Que dois-je faire ?

Answer 1

Essayez ce qui suit

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

Il est essentiel de placer le script externe tag APRÈS le repos, de sorte qu'il a quelque chose à rappel.Aussi, en utilisant asynchrone signifie que vous devez ajouter une méthode de rappel de la laisser initialiser.

Je ne vous le conseille initialize comme un nom de méthode comme il est assez générique et peut être utilisé ailleurs