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
53
Solutions
1
Reaction score
44
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,950
Reaction score
579
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
53
Solutions
1
Reaction score
44
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
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
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 2
djbaxter Google Maps Removed 55M Reviews & 3M Fake Business Profiles Spam on Google 2
D 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
A Google Maps Showing Different Map When Searching Name vs. Address Google My Business & Google Maps 1
Cordell Crowley Unwanted Postmates Link on Google Maps Knowledge Panel Google My Business & Google Maps 37
Cordell Crowley 3-Day Change of Ownership for a Google Maps listing? Google My Business & Google Maps 7
JoyHawkins "On These Lists" Showing in Google Maps Google My Business & Google Maps 5
Nathan_NZ Local Pack and Google Maps Correlation Google My Business & Google Maps 1
djbaxter Marketplace uncovers more than 80 fake Toronto area listings on Google Maps Spam on Google 4
Jefflam How do you define ranking well in Google Maps? Ranking Puzzles 5
L Canada Post Address Doesn't Match Google Maps Citations 6
M Google Maps not showing website and directions link Local Search 1
JoyHawkins Google Maps Allows Users to Report Spammy Users Google News: Important Changes & Features 16

Similar threads

Login / Register

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

Newest Posts

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