iframe google maps page

  • 1
  • Problem
  • Updated 4 years ago
  • Solved
I iframe'd a google maps page in a custom detail view of a record but it shows nothing. It is completely blank. I hard coded the address without merging any record fields and it still shows up blank.

<iframe src="https://www.google.com/maps?q=4555+E+Inverness+Ave+Mesa+AZ+85206"; width="100%" height="800px"/>

I do not want to use a custom component as this does not work in Salesforce1 ios app.
Any ideas?
Photo of Benton Cotter

Benton Cotter

  • 302 Points 250 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Our experience has been that you need an API Key to embed google maps into Salesforce pages of any type.  Google offers maps for free (with no API Code) for public sites,  but once it is in a secure environment you need to use an API KEY.   See this doc:  https://developers.google.com/maps/documentation/embed/guide
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
The first thing I noticed is that there's a floating semicolon after your URL, which could be messing you up. Try using this as the body of your template instead:

<iframe src="https://www.google.com/maps?q=4555+E+Inverness+Ave+Mesa+AZ+85206" width="100%" height="800px"/>

You shouldn't need an API key to get this simple iFrame example to work. If you have a Template component in your Skuid Mobile app, you should be able to just add the above iframe tag and it should work.

Custom Components are not working for you in Salesforce1? We have not seen this. You should be able to use Custom Components.
It can be tricky to get Maps to show up, though, because of width and height issues. What you usually need to do for your Custom Component is to set the width to be 100% of container and height of the parent element to be a fixed value, like this:

skuid.componentType.register('SimpleMap',function(element){

    element.css('width','100%').css('height','800px');
    element.html(
         '<iframe src="https://www.google.com/maps?q=4555+E+Inverness+Ave+Mesa+AZ+85206" width="100%" height="800px"/>'
    );

});