Replacing the "account image" with an embedded google map

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Our organization thought it would be cool to embed a map of the account billing address where the household picture normally goes. I thought this wouldn't be too difficult, but I don't know a lot of jQuery so I'm a bit stuck.

Here's the code I do have (which obviously doesn't work), but may give you an idea of what we're looking to do.

vskuid.componentType.register('mapAddress',function(element){

// instantiate a model using the model named "Accounts"
var m = skuid.model.getModel('Account');

// get the first row (or record) from our model
var row = m.getFirstRow();

// assemble the mailing address fields
var street = m.getFieldValue(row,'BillingStreet');
var city = m.getFieldValue(row,'BillingCity');
var state = m.getFieldValue(row,'BillingState');
var zip = m.getFieldValue(row,'BillingPostalCode');
var address = street + ' ' + city + ', ' + state + ' ' + zip;

< iframe src="http://www.google.com/q=address" >
});
Photo of Greg Huete

Greg Huete

  • 2,340 Points 2k badge 2x thumb
  • confident

Posted 5 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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();


Photo of Greg Huete

Greg Huete

  • 2,340 Points 2k badge 2x thumb
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="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();

});
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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.
Photo of Greg Huete

Greg Huete

  • 2,340 Points 2k badge 2x thumb
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!
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Good to hear!
Photo of Sasidharreddy myf

Sasidharreddy myf

  • 152 Points 100 badge 2x thumb
For accounts tab page is this possible.....

Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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.