Map picker from SKUID

This is totally doable. Here is the XML for a starter page to work with, based on the Case object. It assumes that there are two Custom Fields on the Case object, of type Number: Latitude__c, Longitude__c. Other than that, only standard fields are used. Gist: NewCaseWithMap.xml Here are screenshots of the Page in action, and the Page Composer: As you can see from the Page Composer screenshot or XML, the basic page layout is a Field Editor on a new Case record, with a Custom Component called “LocationPicker” that lets a user pick a point on a map, and dumps that data into custom fields on a new record in the Case Model. We have 3 JavaScript Resources that make the Map functionality work: 1. External resource to load the Google Maps API. URL: https://maps.google.com/maps/api/js?sensor=false&.js 2. Inline JavaScript Resource to load the JQuery UI Map plugin that Peter posted in his JSFiddle. Basically, copy everything from “eval” on in Peter’s JSFiddle. 3. Inline Component Resource that defines the “LocationPicker” Custom Skuid Component. This contains the following:

var element = arguments[0], $ = skuid.$; var STARTING_LAT_LNG = new google.maps.LatLng(53.307697, -6.222317); var ZOOM = 15; var MAP_WIDTH = '450px'; var MAP_HEIGHT = '400px'; var model = skuid.model.getModel('Case'); var row = model.getFirstRow(); var LatitudeField = 'Latitude__c'; var LongitudeField = 'Longitude__c'; element.css({width:MAP_WIDTH,height:MAP_HEIGHT}) .gmap({'center': STARTING_LAT_LNG, zoom: ZOOM}) .bind('init', function(event, map) { $(map).click( function(event) { var lat=event.latLng.lat(); var lng=event.latLng.lng(); console.log('New Latitude: ' + lat + ', Longitude: ' + lng); // Update our row's Latitude and Longitude Field with the new values var updates = {}; updates[LatitudeField] = lat; updates[LongitudeField] = lng; model.updateRow(row,updates); // Force any registered lists in our page to update // (this will get our Field Editor to show changes) $.each(model.registeredLists,function(){ $.each(this.renderedItems,function(){ $.each(this.fields,function(){ if (this.id === LatitudeField || this.id===LongitudeField) { this.render(); } }); }); }); }); }); 

Thanks Zach, I’ve adopted it to my model and it works perfect. This will save lots of time for a customer that cut and pastes this info from a separate map windows today.

Hi Zach,

I was hoping I could get a little more insight into this. Right now, we’re trying to add a map to our Properties page that will allow us to use our address as a starting location and pick a property elsewhere to see the distance. Is this possible?

Thank you

The first part is really what Zach’s solution does.  Mapping a particular address. 

Your second requirement is going to happen within your mapping provider.  Not really within Skuid.  There may be ways of configuring the map include so that it is in “directions” mode - but that’s going to be done within the provider. 

Salesforce supports distance calculations using SOQL.  You should be able to setup a rest connection to your Salesforce org. to pass in your query.  Then setup a Model Service to connect through Skuid.  Here’s the details on the supported SOQL.

https://developer.salesforce.com/docs/atlas.en-us.soql_sosl.meta/soql_sosl/sforce_api_calls_soql_geo…

Awesome, thanks Bill! This will be very helpful.