Skip to main content

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.


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?

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



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="<a target="_blank" rel="nofollow" href="https://www.google.com/maps?q=4555+E+Inverness+Ave+Mesa+AZ+85206%22" title="Link httpmapsgooglecomqProperty_Address__c">https://www.google.com/maps?q=4555+E+Inverness+Ave+Mesa+AZ+85206"</a> width="100%" height="800px"/>'
);

});


Reply