Callmenicholi

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

Callmenicholi

Member
Joined
Nov 26, 2015
Messages
13
Reaction score
0
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
59
Solutions
2
Reaction score
52
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,951
Reaction score
582
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
Reaction score
0
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
59
Solutions
2
Reaction score
52
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
Reaction score
0
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.
 
Similar threads
Thread starter Title Forum Replies Date
Paul Gregory Google Maps default location bias distance and the Google Maps Places API Google Algorithm Discussions 2
O When do you use Google Maps APIs? Local Content 1
Justin Mosebach Embedding Google My Maps API Charge? Google My Business & Google Maps 1
FriarTuck00 Embedding Google Maps Without the API Google My Business & Google Maps 14
paulg Google Places API now returns a google maps url rather than a google+ url Google My Business & Google Maps 10
M Google Maps API to check my local Ranking? Local Search 2
V How to mark service area in Google Maps, GMB Google My Business & Google Maps 2
k.ivanova Google Maps - Base Maps vs Satellite view discrepancy Google My Business & Google Maps 2
M Google Maps Rankings are not Stable Google My Business & Google Maps 6
david.victor Attribute used as Category by Google on Maps NAP, Categories, Dashboard Data 10
Phil Rozek Google Maps reviews get "New" label for reviews less than 1 month old Local Reviews 5
Cherie Dickey Something funny going on in Google Maps... am I missing something? Google My Business & Google Maps 1
Matt Chauhan Google Maps showing category that doesn't even exist Local Search 1
F Google Maps Citation confusion? Google My Business & Google Maps 3
cleverlyengaged Advice on Landmarks/POI/Unclaimed Google Map Locations? Google My Business & Google Maps 6
Tim Colling I'm getting calls from "Google Maps" at 650-206-5555, asking about clients' hours - are they legit? Google My Business & Google Maps 14
djbaxter Google Maps Removed 55M Reviews & 3M Fake Business Profiles Spam on Google 4
DangGood Google Maps, Years in Business Google My Business & Google Maps 4
Vickyboli Google maps pin misplaced Google My Business & Google Maps 6
L Google Maps 'Details' section - Can you add to this or edit? NAP, Categories, Dashboard Data 3
M Decreased traffic to Google maps due to local service ads Paid Search and Local Service Ads 1
J Why is my label in Google Maps blue instead of red? Google My Business & Google Maps 3
K New Real Estate (apartments) on Google Maps Local Search 2
Professor M Google Maps and Google My Business Big Changes - Google Maps Local News Feed Google My Business & Google Maps 26
Professor M Google Maps Update - live status of takeout and delivery orders when you book or order from Google Maps on Android and iOS Google News: Important Changes & Features 0
pbarnhart Google Maps Test - USPS cross-referencing for deliverability Google My Business & Google Maps 1
Brian Barwig Why You Should Embed a Google Map on Your Website Google My Business & Google Maps 1
NickB-Tampa URL is updated in Google My Business but doesn't show up correctly in maps or on Bright Local Local Search 2
A Big Issue with Google Map Rankings For Everyone Local Search 9
U How is Google Selecting Places on Google Local Context Maps Google My Business & Google Maps 0
MKubot Google Maps Embed on Landing Page - Helpful? Google Local 101 4
k.ivanova Google My Business & Google Maps forum threads being deleted Google My Business & Google Maps 11
djbaxter Google Maps Travel Time Break Room: Chat and Off Topic 0
P Claiming 100 locations on Google Maps - what's the best approach? Multi-Location Issues 4
jimmydoubleu Google business not listed/found on Search/Map after merge Google Duplicates & Merges 6
JoshuaMackens Google Maps Spam Fighting - Edits Not Approved - Solution? Local Search 28
dave101 Shown vs Hidden Address on Google Maps Google My Business & Google Maps 3
djbaxter Google Maps Break Room: Chat and Off Topic 0
AndySimpson Probably just a test BUT....GMB carousel on Google Maps Google My Business & Google Maps 3
CraigJMount Mobility Reports- Apple Maps & Google Maps Local Search 2
jimmydoubleu Verified Google My Business not showing up in Knowledge Panel/Maps Moving or Name Changes 3
N "Fake" Google Map listings Spam on Google 11
S Confused. Very low authority websites keep ranking higher in Google Maps Google My Business & Google Maps 15
F Replied to some stupid chain email, ended up getting my Google account disabled, got back on, now all my GMB listings are 'Suspended' but live in maps Google My Business & Google Maps 6
Jeffrey Embedding Google Maps Issue Google My Business & Google Maps 6
jimbo5 Icons meaning in Google Maps Google My Business & Google Maps 19
WAHamilton How to Get Google to Map a New Development? Moving or Name Changes 6
K Map Pin Does Not Show When Business Owner Googles Their Address Google My Business & Google Maps 1
Justin Mosebach Google Maps Lists (Saved Places) Google My Business & Google Maps 0
Caroline S Best Practices For Submitting Spam Edits On Google Maps? Spam on Google 2

Similar threads

Login / Register

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

Most UpVoted Answers

LocalU Podcasts

  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...
Google Product Exert


Top Bottom