However, we have modified the code shown in the demo for compatibility with the Spring 13 release of Skuid.

There are only 2 files you need to create to add this “Awesome Map” component to your Skuid org, such that it can be used in ANY Skuid Page:

MapsBuildersJS.resource (Static Resource - JavaScript)

MapsJS.resource (Static Resource - JavaScript)

The only other step is to add a module titled Maps. (Module name must be consistent with the first part of the two files created in the previous step). For an explanation of this, see Create a Skuid Module.

Note

Effective July 16, 2018, the Google Maps API pricing model has changed. If using the custom component described below in a production setting, we recommend reviewing Google’s documentation on the subject to ensure that your API usage aligns with your pricing needs.

(function(skuid){var$=skuid.$;// Register a new Skuid Component Typeskuid.componentType.register('awesomemap',function(domElement,xmlConfig){// Establish a shorthand for the DOM element we will be building to,// (actually a jQuery object wrapper around that domElement)varself=domElement;// Get the name of the model we want to work with from our component definition,// as well as the Latitude and Longitude fields we want to work with.varmodelName=xmlConfig.attr('model'),latitudeField=xmlConfig.attr('latitudefield'),longitudeField=xmlConfig.attr('longitudefield');// If we do not have ALL of the first attributes,// then display an error in our domElement.if(!modelName||!latitudeField||!longitudeField){self.text('Error: Map Component could not be drawn. '+'A Model, Latitude Field, and Longitude Field must ALL be provided.');return;}// Save our pin color to our element, for later use.self.pinColor=xmlConfig.attr('pincolor')||'green';// Use the Skuid JavaScript API// to get a reference to the requested Model.self.model=skuid.model.getModel(modelName);self.latitudeField=latitudeField;self.longitudeField=longitudeField;// Establish ourselves as a Skuid Editor on this Model.// We do not want to show the typical Editor header// or save/cancel buttonsself.editor=newskuid.ui.Editor(self,{showHeader:false,showSaveCancel:false});// Register that we will be editing the specified Model.self.editor.registerModel(self.model);// Define the draw function,// which we will use for drawing our entireself.draw=function(){// Loop through the Case rows in our model// and create a marker for each Caseself.markers=[];$.each(self.model.data,function(i,row){varlatitude=self.model.getFieldValue(row,self.latitudeField),longitude=self.model.getFieldValue(row,self.longitudeField);if(latitude!=null&&longitude!=null){self.markers.push('&markers=color:'+self.pinColor+'%7C'+latitude+','+longitude);}});// Create a map using google static maps api,// removing any existing map that we may have from prior drawsif(self.googlemap)self.googlemap.remove();self.googlemap=$('<img>').attr('src','https://maps.googleapis.com/maps/api/staticmap?size=600x300'+self.markers.join('')+'&maptype=roadmap'+'&sensor=false').css('margin-top','8px').appendTo(self);};// Define how we will handle successful 'saves' to our modelself.editor.handleSave=function(modelHasChanged){if(modelHasChanged){// Redraw our Mapself.draw();}};// Define how we will handle successful 'refreshes' to our modelself.editor.handleDataRefresh=function(){// Redraw our Mapself.draw();};// Make sure our Map is at least a certain heightself.css('min-height','300px');// Now, draw our map!self.draw();});})(skuid);