Speed up website by properly added google maps

speedup_googlemaps.md

Speed up website by properly added google maps

Reference: https://wploop.com/speed-site-properly-including-google-maps/

1. Save map image URL
2. Get dynamic Map URL to load
3. Add markup to page

<div id="my-fast-map" data-iframe-width="600" data-iframe-height="300" data-iframe-src="IFRAME-URL">
  <a href="#" title="Click to activate map"><img src="IMAGE-URL-YOU-COPIED” alt="Click to activate map"></a>
</div>

4. Add Javascript to handle on click

jQuery(function($) {
  $('#my-fast-map a').on('click', function(e) {
    e.preventDefault();
		map = $(this).parent();
    
    iframe_src = map.data('iframe-src');
    iframe_width = map.data('iframe-width');
    iframe_height = map.data('iframe-height');

    map.html('<iframe src="' + iframe_src + '" width="' + iframe_width + '" height="' + iframe_height + '" allowfullscreen></iframe>');

    return false;
  });
});

Saved here for reference and backup. Go to reference article for more details.