First of all I’m new on skuid… I tried the simple map component and I make ir working. But it doesn’meet my requirements. This component is static (use of ) I want to use google map with a div so the user can choose the mode (satelitte,…) the javascript for google is var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById(‘map-canvas’), mapOptions); } google.maps.event.addDomListener(window, ‘load’, initialize); I put this code in a In-line resource and it works, but how I cany make this line dynamic : center: new google.maps.LatLng(-34.397, 150.644), by replacing the longitude and latitude by the values of the current record? I have no clue on the best way to do it (inline snippets,…)? Thanks for your help
Add an interactive google map component to a detail Page
+17- Nintex Employee
Jean-Marc. Welcome to the Skuid. We hope you like what you see. We’d love to know what you are working on… I’m not going to fully answer your question - just give you some pointers. You need to reconstruct the mapOptions var so that it has the data coming from your skuid model included rather than the statis LatLng numbers. The Javascript API to get the data would be somthing like this: var m = skuid.model.getModel(‘Contact’); var row = m.getFirstRow(); var lat = m.getFieldValue(row,‘Latitude__c’); var lng = m.getFieldValue(row,‘Longitude__c’); Then rebuild the MapOptions variable so it includes lat and lng and pass that off to google maps. Hopefully that will get you pointed in the right direction.
+10Jean-Marc … we’ve been working on something like this. We use a template with this HTML inside it. It pulls shipping address fields from our model on the Account object: {{ShippingStreet}}
{{ShippingCity}}, {{ShippingState}} {{ShippingPostalCode}}
{{ShippingCountry}} It’s at an experimental stage, but you’re welcome to try it. I can give you the CSS for mapContainer and mapCaption if you’d like, too.
+10.mapContainer{ height: 250px; width: 400px; margin-bottom: 80px; vertical-align: top; text-align: center; } .mapCaption{ width: 390px; margin-top: -5px; padding: 5px; line-height: 170%; background-color: #000; opacity: 0.7; font-size: 11px; color: #fff; } .mapCaption a{ color: #fff; }<br>
+8Here is what I have had for a while and it works very well for a single record and I display it using a Template component in skuid. This is a VisualForce page that uses a standard controller and is passed the ID in the URL from SKUID. I am looking to make a Skuid component for an interactive map with Pins for a model of records addresses.
<apex:page standardController=“Account”><apex:pageBlock >
; ; #map { font-family: Arial; font-size:12px; line-height:normal !important; height:500px; background:transparent; }
+18Jarrod, I think you’re looking for this? http://help.skuidify.com/m/11720/l/129677-simple-map-component
+1hey has anyone tried building an iframe or google maps in the recent release Version 2, Dubai release by chance i’m quite surprised this isn’t talked about more
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.