Quitar de procesamiento de bloqueo de JavaScript de google maps

Question

El PageSpeed Insights me muestra que yo para quitar el procesamiento de bloqueo para mi google maps js.Se agrega en el cms contenido, y este es el 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.mapas.evento.addDomListener(ventana, "carga", inicializar);// ]]>

 

Si puedo añadir el async="async" a la los mapas no está cargado, pero el mensaje de la pagespeed disappers.¿Qué debo hacer ?

Answer 1

Intente lo siguiente

<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 vital para colocar el script externo de la etiqueta DESPUÉS de que el resto por lo que tiene algo de devolución de llamada.Además, el uso de async significa que usted tiene que agregar un método de devolución de llamada para dejar inicializar.

Yo aconsejo que se initialize como un nombre de método ya que es bastante genérico y puede ser utilizado en cualquier lugar