javascriptjquerygoogle-mapsiframegtmetrix

Google Maps with iframe doesn't work after page load


My google map works fine on my site:

<iframe id='iframe1' src="https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&amp;output=embed&hl=en"></iframe>

I should to change it, because of GTmetrix. So I decide to load it when page is loaded, here is my new code that doesn't load the map.

 <iframe id='iframe1' ></iframe>

    <script>
        window.addEventListener("load", function() {
            document.getElementById('iframe1').src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&amp;output=embed&hl=en';
        });
    </script>

Note: here is my problem with Gtmetrix, just sharing to complete my question:

There are 5 static components without a far-future expiration date.

https://maps.googleapis.com/maps/api/js?client=google-maps-embed&paint_origin=&libraries=geometry,search&v=3.exp&language=fa&callback=onApiLoad https://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i10787022&2i6603899&2e1&3u16&4m2&1u543&2u300&5m5&1e0&5sfa&6sus&10b1&12b1&client=google-maps-embed&token=64085 https://khms1.googleapis.com/kh?v=862&hl=fa&x=5267&y=3224&z=13 https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d35.71592679292299&2d51.45263317535978&2m2&1d35.73212757327154&2d51.488170370963076&2u16&4sfa&5e0&6sm%40496000000&7b0&8e0&11e289&callback=xdc._ng5r7i&client=google-maps-embed&token=4563 https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d35.71552264420163&2d51.46028412421049&2m2&1d35.73193943495472&2d51.48040793223049&2u13&4sfa&5e2&7b0&8e0&11e289&callback=xdc._iyqfq0&client=google-maps-embed&token=32784

There is 1 redirect

https://maps.google.com/maps?... redirects to https://www.google.com/maps/embed?...

Solution

  • Using your code:

     <iframe id='iframe1' src="about:blank"></iframe>
     <script>
       window.addEventListener("load", function() {
         document.getElementById('iframe1').src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&amp;output=embed&hl=en';
       });
     </script>
    

    There is a message in the javscript console:

    Refused to display 'https://www.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z%3D14&ie=UTF8&amp;output=embed&hl=en' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
    

    However, if the <iframe> is created dynamically also, it works (note that the source is set before it is appended to the DOM):

     <script>
       window.addEventListener("load", function() {
         var iDiv = document.createElement('iframe');
         iDiv.id = 'iframe1';
         iDiv.src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
         document.getElementById("anchor").appendChild(iDiv);
       });
     </script>
    

    code snippet:

    <div id="anchor"></div>
    
    <script>
      window.addEventListener("load", function() {
        var iDiv = document.createElement('iframe');
        iDiv.id = 'iframe1';
        iDiv.src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
        document.getElementById("anchor").appendChild(iDiv);
      });
    
    </script>