Google embedded map not displayed

Question

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.

Answer 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 "//"