Replacing the account image" with an embedded google map"

Hi Greg, You were very close with your Component, the main thing missing was fleshing out the Google Maps embed link. Here’s a sample you can use — I did it for the Contact object, though, so you’ll just need to switch MailingState to BillingState, MailingCity to BillingCity, etc., as well as changing the name of the model. Also, I added in some extra lines, which will make it so that whenever you Save your Model, the Map will refresh.

var element = arguments[0], $ = skuid.$; // Define the Model we want var m = skuid.model.getModel('Contact'), // get the first row (or record) from our model row = m.getFirstRow(); var editor = new skuid.ui.Editor(); editor.registerModel(m); var buildMap = function(){ // assemble the mailing address fields var street = m.getFieldValue(row,'MailingStreet'), city = m.getFieldValue(row,'MailingCity'), state = m.getFieldValue(row,'MailingState'), zip = m.getFieldValue(row,'MailingPostalCode'); var address = (street ? street : '') + ' ' + (city ? city : '') + ', ' + (state ? state : '') + ' ' + (zip ? zip : ''); // Encode our address for use in a URL address = encodeURIComponent(address); element.html( '<iframe width="100%" height="350" frameborder="0" scrolling="no" ' + 'marginheight="0" marginwidth="0" ' + 'src="http://maps.google.com/maps?q=' + address + '&oe=UTF-8&ie=UTF8&z=14&output=embed&iwloc=near"></iframe>' ); }; editor.handleSave = function(totalSuccess) { if (totalSuccess) buildMap(); }; buildMap(); 

Thanks so much Zach! I made the changes, but I’m not sure what to enter for the “Component Type” under the Custom Component properties. Is it still mapAddress? This is what I tried, and unfortunately my whole page is now blank haha: skuid.componentType.register(‘mapAddress’,function(element){ var element = arguments[0], $ = skuid.$; // Define the Model we want var m = skuid.model.getModel(‘Account’), // get the first row (or record) from our model row = m.getFirstRow(); var editor = new skuid.ui.Editor(); editor.registerModel(m); var buildMap = function(){ // assemble the mailing address fields var street = m.getFieldValue(row,‘BillingStreet’), city = m.getFieldValue(row,‘BillingCity’), state = m.getFieldValue(row,‘BillingState’), zip = m.getFieldValue(row,‘BillingPostalCode’); var address = (street ? street : ‘’) + ’ ’ + (city ? city : ‘’) + ', ’ + (state ? state : ‘’) + ’ ’ + (zip ? zip : ‘’); // Encode our address for use in a URL address = encodeURIComponent(address); element.html( '<iframe width=“100%” height=“350” frameborder=“0” scrolling=“no” ’ + 'marginheight=“0” marginwidth=“0” ’ + ‘src="Google Maps’ + address + ‘&oe=UTF-8&ie=UTF8&z=14&output=embed&iwloc=near">’ ); }; editor.handleSave = function(totalSuccess) { if (totalSuccess) buildMap(); }; buildMap(); });

Hi Greg, Yes “Component Type” should still be “mapAddress”. There may be a JavaScript error somewhere. Try removing these lines:

var element = arguments[0], $ = skuid.$; 

and see if that fixes it. If not, can you do a right-click (or control + click on Mac) on your page, and click “Inspect Element”, and click “Console”, and let us know if there are any JavaScript error messages in red? That will help identify if there’s some problem with your Snippet code.

Zach, I figured out the JavaScript error. I didn’t realize I had to call the name of the model, I was mistakenly trying to call the object directly. Now I’m getting a map, but it’s centering me in a random location, and not selecting any address in particular. Edit: I’ve again figured it out - I didn’t have the billing fields yet selected in the AccountData model. Got it now, and it’s working great!

Good to hear!

For accounts tab page is this possible…

It is possible. In the custom code that Zach provides above - you will need to change the Model name, and the field names.  I also had to change the GoogleMap URL to be HTTPS so that Chrome didn’t shout at me. 

Please Note that Google does not like embedding maps into secure sites (per the terms of use of their maps).  They may stop sourcing the maps after a while to your site.   To be strictly compliant you will need to procure a map API key - which is usually assocated with a Business License.