Google Maps API Without Iframe - Help Needed

Callmenicholi

Member
Joined
Nov 26, 2015
Messages
13
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.



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:

Callmenicholi

Member
Joined
Nov 26, 2015
Messages
13
Did you try to load the iframe with javascript async / defer?
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:

stankolev

Member
Joined
Jul 21, 2015
Messages
50
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:

JoshuaMackens

Local Search Expert
Joined
Sep 12, 2012
Messages
1,833
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.
 

Callmenicholi

Member
Joined
Nov 26, 2015
Messages
13
Iframe loading techniques and performance
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>
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:

stankolev

Member
Joined
Jul 21, 2015
Messages
50
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>
 

Callmenicholi

Member
Joined
Nov 26, 2015
Messages
13
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>

It actually broke the iframe, however, I'll work with this and see if I get it to go. Thanks again.
 

  Weekly Digest

Weekly Digest
Subscribe/Unsubscribe

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

  Local University Guide


Google Product Exert

Top