Map Labs

Google Maps API Without Iframe - Help Needed

More threads by Callmenicholi

Callmenicholi

Callmenicholi

0
Joined
Nov 26, 2015
Messages
14
Reaction score
0
Hello all,

I'm presently using the Maps Embed API which has an iframe. Problem is that an iframe slows down page load time.

GOAL: I'd like to use the Javascript API so I can use async defer and increase page speed but retain format of Maps Embed API. See image below.

Maps-embed-API-example.png


QUESTION. Can I retain the format of the Maps Embed API without using an iframe? I can't figure out how to do so. Any kung Fu masters that can help?

Thanks,

Nicholas
 
Last edited:
stankolev said:
Did you try to load the iframe with javascript async / defer?
Click to expand...

I'm not a coder or developer. I did find this:

Code: 
<iframe id="myIframe" src="http://.." />
<script type="text/javascript">
  var iframe = document.getElementById('myIframe').src = iframe.src;
  iframe.src = '';
  document.onload =  function(){iframe.src = src;}
</script>

Am I on the right track?
 
Last edited:
Something like this:

HTML: 
<div class="google-maps" id="div-that-holds-the-iframe"></div>
<style>
      .google-maps {
            position: relative;
            padding-bottom: 25%; // This is the aspect ratio
            height: 0;
            overflow: hidden;
      }
      .google-maps iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
      }
</style>
<script>
//doesn't block the load event
function createIframe(){
  var i = document.createElement("iframe");
  i.src = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2907.9025009626635!2d2!3d3!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xdb2ba8689ed0920d!2z0J_QmNCm0JjQmtCQ0KLQng!5e0!3m2!1sbg!2sus!4v1448115192914";
  i.scrolling = "auto";
  i.frameborder = "0";
  i.width = "600px";
  i.height = "450px";
  i.setAttribute("allowFullScreen", "");
  i.setAttribute("style", "border:0");
  document.getElementById("div-that-holds-the-iframe").appendChild(i);
};
  
// Check for browser support of event handling capability
if (window.addEventListener)
    window.addEventListener("load", createIframe, false);
else if (window.attachEvent)
    window.attachEvent("onload", createIframe);
else
    window.onload = createIframe;
</script>
 
Last edited:
This may not serve your needs but a workaround I was given was to simply just take a screenshot and upload as a JPG with a link to the map. After all, when you click on the map it takes you to Google Maps anyway.
 
Iframe loading techniques and performance
stankolev said:
Something like this:

HTML: 
<div class="google-maps" id="div-that-holds-the-iframe"></div>
<style>
      .google-maps {
            position: relative;
            padding-bottom: 25%; // This is the aspect ratio
            height: 0;
            overflow: hidden;
      }
      .google-maps iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
      }
</style>
<script>
//doesn't block the load event
function createIframe(){
  var i = document.createElement("iframe");
  i.src = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2907.9025009626635!2d2!3d3!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xdb2ba8689ed0920d!2z0J_QmNCm0JjQmtCQ0KLQng!5e0!3m2!1sbg!2sus!4v1448115192914";
  i.scrolling = "auto";
  i.frameborder = "0";
  i.width = "600px";
  i.height = "450px";
  i.setAttribute("allowFullScreen", "");
  i.setAttribute("style", "border:0");
  document.getElementById("div-that-holds-the-iframe").appendChild(i);
};

// Check for browser support of event handling capability
if (window.addEventListener)
    window.addEventListener("load", createIframe, false);
else if (window.attachEvent)
    window.attachEvent("onload", createIframe);
else
    window.onload = createIframe;
</script>
Click to expand...

Thanks for this. The difficulty is that I have separate iframes due to different locations. Is there a universal way? or does it have to be specific?
 
Last edited:
OK here is another varaint with unlimited iframes ...

<div class="google-maps" data-iframeSRC="HERE COMES THE IFRAME SOURCE"></div>

HTML: 
<div class="google-maps" data-iframeSRC="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2907.9025009626635!2d2!3d3!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xdb2ba8689ed0920d!2z0J_QmNCm0JjQmtCQ0KLQng!5e0!3m2!1sbg!2sus!4v1448115192914"></div>

<!-- Some Other DIV with new map -->

<div class="google-maps" data-iframeSRC="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3282.332124371166!2d-86.66742868433835!3d34.64631438044853!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88626e06b0d0001d%3A0xdcd9f77c11c01e2b!2sInternational+Space+Station+Payload+Operations+Center!5e0!3m2!1sbg!2sbg!4v1544747698039"></div>


<style>
      .google-maps {
            position: relative;
            padding-bottom: 25%; // This is the aspect ratio
            height: 0;
            overflow: hidden;
      }
      .google-maps iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
      }
</style>

<script>
function createIframe() {
    let mapDivs = document.getElementsByClassName("google-maps");

    if (mapDivs.length) {
    
        for (i = 0; i < mapDivs.length; i++) {
            var iframeSRC = mapDivs[i].getAttribute('data-iframeSRC');
            
            if (iframeSRC) {
                let s = document.createElement("iframe");
                s.src = iframeSRC;
                s.scrolling = "auto";
                s.frameborder = "0";
                s.width = "600px";
                s.height = "450px";
                s.setAttribute("allowFullScreen", "");
                s.setAttribute("style", "border:0");
                mapDivs[i].appendChild(s);
            }
            
        }
        
    }
};

// Check for browser support of event handling capability
if (window.addEventListener)
    window.addEventListener("load", createIframe, false);
else if (window.attachEvent)
    window.attachEvent("onload", createIframe);
else
    window.onload = createIframe;
</script>
 
stankolev said:
OK here is another varaint with unlimited iframes ...

<div class="google-maps" data-iframeSRC="HERE COMES THE IFRAME SOURCE"></div>

HTML: 
<div class="google-maps" data-iframeSRC="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2907.9025009626635!2d2!3d3!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xdb2ba8689ed0920d!2z0J_QmNCm0JjQmtCQ0KLQng!5e0!3m2!1sbg!2sus!4v1448115192914"></div>

<!-- Some Other DIV with new map -->

<div class="google-maps" data-iframeSRC="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3282.332124371166!2d-86.66742868433835!3d34.64631438044853!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88626e06b0d0001d%3A0xdcd9f77c11c01e2b!2sInternational+Space+Station+Payload+Operations+Center!5e0!3m2!1sbg!2sbg!4v1544747698039"></div>


<style>
      .google-maps {
            position: relative;
            padding-bottom: 25%; // This is the aspect ratio
            height: 0;
            overflow: hidden;
      }
      .google-maps iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
      }
</style>

<script>
function createIframe() {
    let mapDivs = document.getElementsByClassName("google-maps");

    if (mapDivs.length) {
  
        for (i = 0; i < mapDivs.length; i++) {
            var iframeSRC = mapDivs[i].getAttribute('data-iframeSRC');
          
            if (iframeSRC) {
                let s = document.createElement("iframe");
                s.src = iframeSRC;
                s.scrolling = "auto";
                s.frameborder = "0";
                s.width = "600px";
                s.height = "450px";
                s.setAttribute("allowFullScreen", "");
                s.setAttribute("style", "border:0");
                mapDivs[i].appendChild(s);
            }
          
        }
      
    }
};

// Check for browser support of event handling capability
if (window.addEventListener)
    window.addEventListener("load", createIframe, false);
else if (window.attachEvent)
    window.attachEvent("onload", createIframe);
else
    window.onload = createIframe;
</script>
Click to expand...


It actually broke the iframe, however, I'll work with this and see if I get it to go. Thanks again.
 
You must log in or register to reply here.

Similar threads

M
  • Solved
Lost Health Insurance Business Profile on Google Maps and Local Searches. Need Help!
Replies
4
Views
4K
Medicareexpert
M
V
  • Question
Need help with Google Maps Reviews
Replies
9
Views
4K
Vpoly
V
freerunr
Modifying embed code to better align with WCAG (accessibility)
Replies
5
Views
2K
freerunr
freerunr
Brian Barwig
  • Article
Why You Should Embed a Google Map on Your Website
Replies
1
Views
4K
PKLilikoi
PKLilikoi
J
  • Article
A compendium of some uncommon bugs and "bugs"
Replies
10
Views
44K
JeffClevelandTN
JeffClevelandTN

Login / Register

Already a member?   LOG IN
Not a member yet?   REGISTER

Events

LocalU Webinar

Newest Posts

Trending: Most Replies

Trending: Most Viewed

  Promoted Posts

New advertising option: A review of your product or service posted by a Sterling Sky employee. This will also be shared on the Sterling Sky & LSF Twitter accounts, our Facebook group, LinkedIn, and both newsletters. More...

Share this page

Top Bottom