Google Maps inside iframe not loading

Question

I ran into a strange issue, and I don\'t know what the problem is. The following jQuery code is a simplified version of what I want to achieve:

var iframe =          


        

Answer 1

Make sure you enable the google maps embed api in addition to places API.

Generate you map from here:

https://developers.google.com/maps/documentation/embed/start

Answer 2

Appending &output=embed to the end of the URL fixes the problem.

Update: Google disabled this feature, which was working at the time the answer was originally posted. This solution no longer works.

Answer 3

As of 2014, the option &output=embed does not work anymore. Google suggests you to switch to Google Maps Embed API. Here is a Quick Start.

Basically, the new iframe link is:

https://www.google.com/maps/embed/v1/place?key={BROWSER_KEY}&q={YOUR_ADDRESS_ENCODED}

Remember to enable Google Maps Embed API in API Console.

p.s. checked working at the moment I write this answer