Add an interactive google map component to a detail Page

  • 1
  • Question
  • Updated 3 years ago
  • Answered
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
Photo of Jean-Marc Tupin

Jean-Marc Tupin

  • 70 Points

Posted 5 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

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

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Jean-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:

<div class="mapContainer">
<a href="https://maps.google.com/maps?q={{{ShippingStreet}}}+{{{ShippingCity}}}+{{{ShippingState}}}+{{{ShippingPostalCode}}}+{{{ShippingCountry}}}" target="_blank">
<img src="https://maps.googleapis.com/maps/api/staticmap?center={{{ShippingStreet}}},{{{ShippingCity}}},{{{ShippingState}}},{{{ShippingPostalCode}}},{{{ShippingCountry}}}&zoom=16&size=200x200&maptype=roadmap&sensor=false&markers=color:blue|{{{ShippingStreet}}},{{{ShippingCity}}},{{{ShippingState}}},{{{ShippingPostalCode}}},{{{ShippingCountry}}}" border="0" alt="map"/>
</a>
<div class="mapCaption">
<a href="https://maps.google.com/maps?q={{{ShippingStreet}}}+{{{ShippingCity}}}+{{{ShippingState}}}+{{{ShippingPostalCode}}}+{{{ShippingCountry}}}" target="_blank">{{ShippingStreet}}<br/>{{ShippingCity}}, {{ShippingState}} {{ShippingPostalCode}}<br/>{{ShippingCountry}}</a>
</div>
</div>


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.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb
I'd like that CSS if you still have it. Nifty template. Thanks for posting this.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
.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;
}
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb
Thanks. I like it.
Photo of David Forder

David Forder

  • 2,144 Points 2k badge 2x thumb
Great template .. Thanks Guys )
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
Here 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 >
<head>
 
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>;
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function() {
  
  var myOptions = {
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    scrollwheel: false
  }
  
  var map;
  var marker;
  
  var geocoder = new google.maps.Geocoder();
  var address = "{!Account.PersonMailingStreet}, " + "{!Account.PersonMailingCity}, " + "{!Account.PersonMailingPostalcode}";
  
  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Account.Name}</b>"
  });
 
  geocoder.geocode( { address: address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK && results.length) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
      
        //create map
        map = new google.maps.Map(document.getElementById("map"), myOptions);
      
        //center map
        map.setCenter(results[0].geometry.location);
        
        //create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: "{!Account.Name}"
        });
        
        //add listeners
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
        google.maps.event.addListener(infowindow, 'closeclick', function() {
          map.setCenter(marker.getPosition()); 
        });
        
      }
      
    } else {
      $('#map').css({'height' : '15px'});
      $('#map').html("Oops! {!Account.Name}'s address could not be found, please make sure the mailing address is correct for this patient.");
      resizeIframe();
    }
  });
  
  function resizeIframe() {
    var me = window.name;
    if (me) {
      var iframes = parent.document.getElementsByName(me);
      if (iframes && iframes.length == 1) {
        height = document.body.offsetHeight;
        iframes[0].style.height = height + "px";
      }
    }
  }
  
});
</script>
 
<style>
#map {
  font-family: Arial;
  font-size:12px;
  line-height:normal !important;
  height:500px;
  background:transparent;
}
</style>
 
</head>
 
<body>
<div id="map"></div> 
</body> 
</apex:pageBlock>
</apex:page>
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Jarrod, I think you're looking for this? http://help.skuidify.com/m/11720/l/129677-simple-map-component