'Google embedded map not displayed

I got Google map API credentials for a browser key. For allowed referrers I put in my website like *.mysite.com/* and www.mysite.com/*

Then I used the Quick Start Build a map page at https://developers.google.com/maps/documentation/embed/start to make the code. After pasting in my API key, it gave me the iframe code to embed on the web page.

But the map does not show up on the web page. This is the code I'm using:

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:EjA3NyBCb290IFJhbmNoIENpciwgRnJlZGVyaWNrc2J1cmcsIFRYIDc4NjI0LCBVU0E&key=AIzaSyDFXuwn2N6KOiOK4neH8ZSBaVLnfVF5TuE" allowfullscreen></iframe>

I'm at a loss to know what to try next.

google-maps google-maps-embed

Solution 1:^[1]

There can be several causes for this. But one that has caught me a few times, is inconsistent protocol usage (http | https). For example, if your main page is using https, but your iframe is using http, it won't show up.

But then, how do you know ahead of time, what protocol the user will using? You don't and it, actually, doesn't matter. Just begin your iframe URL without a protocol indicator, like so:

<iframe src="//www.google.com/maps/embed/v1/place?q=place_id:EjA3NyBCb290IFJhbmNoIENpciwgRnJlZGVyaWNrc2J1cmcsIFRYIDc4NjI0LCBVU0E&key=AIzaSyDFXuwn2N6KOiOK4neH8ZSBaVLnfVF5TuE" allowfullscreen></iframe>

Notice the URL begins with "//"

Solution 2:^[2]

CSP (Content Security Policy) frame-src directive might be prohibiting loading google domain in iframe. Check for errors in dev tools console.

Solution 3:^[3]

Google embedded map was not displayed in my react app and the problem was from attribute names.

what we get from google maps :

<iframe
   src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6912532.961290727!2d49.1916915706487!3d32.224158771670105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ef7ec2ec16b1df1%3A0x40b095d39e51face!2sIran!5e0!3m2!1sen!2snl!4v1651148400254!5m2!1sen!2snl'
   width='600'
   height='450'
   style='border:0;'                             //<-------
   allowfullscreen=''                            //<-------
   loading='lazy'
   referrerpolicy='no-referrer-when-downgrade'   //<-------
></iframe>

what we should put in react project :

<iframe
   src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6912532.961290727!2d49.1916915706487!3d32.224158771670105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ef7ec2ec16b1df1%3A0x40b095d39e51face!2sIran!5e0!3m2!1sen!2snl!4v1651148400254!5m2!1sen!2snl'
   width='600'
   height='450'
   style={{ border: 0 }}                        //<-------
   allowFullscreen=''                           //<-------
   loading='lazy'
   referrerPolicy='no-referrer-when-downgrade'  //<-------
></iframe>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jahmic
Solution 2	Alexander Puchkov
Solution 3	Marzieh Mousavi

'Google embedded map not displayed

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]