Remove Render-Blocking JavaScript for Google Maps

google-mapjavascript

The PageSpeed Insights shows me that I to remove the render-blocking for my google maps js.
It is added the in cms content and this is the 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);
// ]]>

If I add the async="async" to the the maps is not loaded but the message from the pagespeed disappers. What should I do ?

Best Answer

Try the following

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

It's vital to place the external script tag AFTER the rest so it has something to callback to. Also, using async means you have to add a callback method to let it initialize.

I would advise against initialize as a method name as it is pretty generic and might be used elsewhere

Related Solutions

Magento 1.9 Does Not Render Google Maps API in Template – Fix Guide

In our project we use map without any conflicts, Could you please try to cover your map initialization function by load event like

window.onload = function () {

}

And delete async call of your map.

This is code from our module where map works perfectly -

<script language="javascript" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places<?php echo $this->getApiKey() ?>"></script>
<script type="text/javascript">

    window.onload = function () {
        AmLocation = new AmLocator('<?php echo $this->getUrl('amlocator/index/ajax').$this->getQueryString(); ?>',<?php echo $this->getGeoUse() ?>);
        AmLocation.Amastyload(<?php echo $this->getJsonLocations() ?>);
    }
</script>

At the Load function we just init map and do some module logic.

initializeMap: function() {
    this.infowindow = [];
    this.marker = [];
    var myOptions = {
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(document.getElementById("amlocator-map-canvas"), myOptions);
},

Feel free if you have any questions. If you still have this issue at your project please provide screenshot of the browser console.

Magento2 Checkout – How to Render Google Maps on Checkout in Magento 2

I was working on applying place autocomplete on checkout an here is a snippet with my code:

<script src="https://maps.googleapis.com/maps/api/js?key=lll&libraries=places&callback=notifySubscribers"
        async
        defer></script>

<script>
    var notifySubscribers = function () {
        require(['GoogleAddressLookup/model/apiLoadListener'], function (loadListener) {
            loadListener.isGoogleApiLoaded(true);
        })
    };
</script>

And my explanation. This phtml is rendered in after.body.start container and as you can see i basically do async load of google lib. The important part is that i pass callback function notifySubscribers. There as you can see i load my apiLoadListener class which is dedicated for holding information about the state of script in isGoogleApiLoaded ko observable. ApiLoadListener is by itself defined in separate file. Because isGoogleApiLoaded property is ko.observable then i can load apiListener module in any other module in which i can subscribe callback and execute appropriate logic. In your case it would be an initialization of google map on a particular element. I do it within onElementRender callback, here is an example snippet:

onElementRender: function (el) {
        if (!loadListener.isGoogleApiLoaded()) {
            loadListener.subscribe((isApiLoaded) => {
                if (isApiLoaded) {
                    this.initializer = new Initializer(el, Strategy, this.autocomplete_id);
                }
            });
        } else {
            this.initializer = new Initializer(el, Strategy, this.autocomplete_id);
        }
    },

As you can see, disregarding the unknown classes, i am basically listening for event dispatch from apiLoader to perform my logic. I hope that will help you out.

Best Answer

Related Solutions

Magento 1.9 Does Not Render Google Maps API in Template – Fix Guide

Magento2 Checkout – How to Render Google Maps on Checkout in Magento 2

Related Topic