Decoding Salesforce

Decoding Salesforce

The hows and whys of Salesforce.com

Posts Tagged ‘Google’

18 Mar 2010 11 comments so far

Inline Google Maps using Visualforce

Written by Alessandro on 18 Mar 2010 — Tagged with: , , ,

Sometime ago we’ve seen how to integrate Google Maps in a Salesforce.com page to pinpoint a specific address on the map, more precisely, how to add an inline map to pinpoint an Account Billing Address. I revisited the script I wrote more than a year ago and produced it as a Visualforce page, here’s the result.

The finished product

Here’s a screenshot of what we are going to get:

Inline Google Maps using Visualforce

Improvements

  • I’m now using Google Maps API v3, which makes the map faster to load and doesn’t require an API key anymore.
  • I removed the search term {!Account.BillingState}, so the script should now correctly map any address, not only US ones.
  • It degrades nicely if the Account Billing Address isn’t found, as shown below:

Setup

Follow the 3 steps below:

  1. In Salesforce.com, navigate to Setup > Customize > Develop > Pages and create a new Visualforce Page with the following code:
    <apex:page standardController="Account">

<head>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() {
  
  var myOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  }
  
  var map;
  var marker;
  
  var geocoder = new google.maps.Geocoder();
  var address = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingPostalCode}, " + "{!Account.BillingCountry}";
  
  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<br>{!Account.BillingCountry}"
  });

  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 billing address could not be found, please make sure the address is correct.");
      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:250px;
  background:transparent;
}
</style>

</head>
 
<body>
<div id="map"></div> 
</body> 
</apex:page>
  2. Add the Visualforce page on the Account page layout (in a single-column section) and set it’s height to be 250px.
  3. All done! :) Navigate to one of your Account records and verify the map is displaying correctly!

Let me know if you have any questions/comments!

23 Apr 2008 7 comments so far

Inline Google Maps

Written by Alessandro on 23 Apr 2008 — Tagged with: , , ,

Update 18/03/2010: There’s a newer version of this code, see how to add Inline Google Maps using Visualforce.

Many have asked me how to integrate Google Maps in a Salesforce.com page to pinpoint a specific address on the map. The example we’re going to see today is how to add an inline map to pinpoint an Account billing address.

The finished product

Here’s a screenshot of what we are going to get:
Inline Google Maps

Let’s get started

Right so, let’s see what we need:

  1. First off you need a Google Map API Key you can obtain for free from here; it’s necessary to embed Google Maps in your own web pages. When requested to insert your website URL, enter the name of the instance you’re on, complete with https:// (e.g.: https://emea.salesforce.com/ )
  2. Then, within Salesforce.com, navigate to Setup > Customize > Develop > S-Controls > New S-Control; specify a Label (e.g.: “Inline GMaps”), set the Type to be HTML, in the HTML Body section paste the following code (don’t forget to substitute YOUR-GOOGLE-MAPS-API-KEY-HERE with the Google Maps API Key you created in step #1), then Save.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=YOUR-GOOGLE-MAPS-API-KEY-HERE" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;

var address = "{!Account.BillingStreet}, {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState}, {!Account.BillingCountry}";

function initialize() {
if (GBrowserIsCompatible()) {
  map = new GMap2(document.getElementById("map_canvas"));
  map.addControl(new GSmallMapControl());
  geocoder = new GClientGeocoder();
  geocoder.getLatLng(
    address,
    function(point) {
      if (!point) {
        document.getElementById("map_canvas").innerHTML = address + " not found";
      } else {
        map.setCenter(point, 13);
        var marker = new GMarker(point);
        map.addOverlay(marker);
        marker.bindInfoWindowHtml("{!Account.Name}");
      }
    }
  );
}
}
</script>
</head>

<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width:100%;height:300px"></div>

</body>
</html>
  3. Next, navigate to Setup > Customize > Accounts > Page Layouts and click on Edit next to the correct page layout (you might only have one). Click on Create New Section with Name “Google Maps”, “Single” Columns, leave the two checkboxes checked and click Ok.
    Now, on the right hand side of the screen, from the View dropdown list, select Custom S-Controls; you’ll see the newly created S-Control (e.g.: “Inline GMaps”) and all you need to do is to drag and drop that component into the newly created section.
    Lastly, double-click on the S-Control component now in the section: a popup window will appear. Make sure the Width (in pixels or %) is 100%, set the Height (in pixels) to 300 and untick both the underneath checkboxes.
  4. All done! :) Navigate to one of your Account records and verify the map is displaying correctly!

I’m not going to analyse the S-Control line by line, with a little knowledge of HTML and JavaScript you should be able to modify it to suit your needs, but please let me know if you have any issues.

22 Feb 2008 12 comments so far

Using Email2Case with Google’s Gmail

Written by Alessandro on 22 Feb 2008 — Tagged with: , ,

I like Google, infact, I really love many of Google’s apps. There are many reasons to use Gmail – Google’s ‘new kind of webmail’ – and one of those is that it offers IMAP access. This is great for those of you who’ve been waiting to use the Salesforce’s Email2Case tool, and today I’m going to explain how to configure it to be used with Gmail.

Email2Case? What is it?

Email2Case ‘is a toolkit that pulls emails from your mail server and uses the Force.com API to create new cases or append to an existing case‘. In order to get more information about the tool and download it, please navigate here (note you will need a free developer account to access the page, you can subscribe for one here).

Gmail, Email2Case and Salesforce configuration

  1. First of all we need to subscribe for a free Gmail Account: navigate to the Signup Page, fill in the required information and in no time you’ll have obtained a new account.
  2. Email2Case will process the Gmail Inbox folder, but we also need to create the folders (Gmail calls them Labels) where the Processed or Error emails will go: so, within Gmail, let’s click on “Settings” > “Labels” and create 2 new labels: Error and Processed. That’s it, we’re done configuring Gmail.
  3. Now we need to work on the two Email2Case config files: email2case.txt and sfdcConfig.txt. If you haven’t already done so, download the Email2Case Toolkit and navigate to the directory where you have unzipped it (I keep it in C:\Email2Case).
    • First let’s have a look at the email2case.txt. You’ll only need to change username@gmail.com and gmail_password with your newly created gmail address and password.
      <configFile>
    <server1>
        <url>imap.gmail.com</url>
        <protocol>imaps</protocol>
        <userName>username@gmail.com</userName>
        <password>gmail_password</password>
        <interval>1</interval>
        <inbox>Inbox</inbox>
        <readbox>Processed</readbox>
        <errorbox>Error</errorbox>
    </server1>
</configFile>
    • And now sfdcConfig.txt. Once again, the changes you’ll have to make are pretty straight-forward: just change salesforce_username_here and salesforce_password_here with your real Salesforce.com username and password.
      <configFile>
    <sfdcLogin>
        <url>https://www.salesforce.com/services/Soap/u/9.0</url>
        <userName>salesforce_username_here</userName>
        <password>salesforce_password_here</password>
        <loginRefresh>30</loginRefresh>
        <timeout>5000</timeout>
    </sfdcLogin>
    <notify>
  <notifyEmail></notifyEmail>
        <from></from>
        <host>smtp.gmail.com</host>
  <port>465</port>
        <user></user>
        <password></password>
        <service>com.sforce.mail.SMTPNotification</service>
    </notify>
    <attachments>
        <largeAttachmentDirectory>C:\EmailAgent\LargeAttachments</largeAttachmentDirectory>
        <largeAttachmentURLPrefix>file:\\C:\EmailAgent\LargeAttachments</largeAttachmentURLPrefix>
        <largeAttachmentSize>1</largeAttachmentSize>
    </attachments>
    <services>
        <com.sforce.mail.EmailService>C:\\EmailAgent\\email2case.txt</com.sforce.mail.EmailService>
    </services>
</configFile>
  4. We’re almost ready, the last thing to do is to enable Email2Case in Salesforce.com and verify that everything works as expected. Login onto your Salesforce.com Organization and navigate to: Setup > Customize > Cases > Email-to-Case. Follow the steps to enable Email2Case and add the gmail address we created earlier as a “Routing Address”. That’s it, we should be set!
  5. Start the Email2Case Agent by double clicking on the email2case.bat file and make sure you get no errors, send an email to the gmail address and as soon as the Email2Case will pick that up, a new case will be created in your Salesforce.com Org.

If you need further help setting up the Email2Case Agent, please refer to this Salesforce.com Help page.

Search

Searching is always a good way to start..

Check out the tags

Heavier tags signify the frequency at which posts are made in that particular keyword genre.

setup google wave service cloud admin web2anything Email2Case S-Controls web2x ideas collaboration platform api UI communication integration twitter salesforce.com Gmail Deconding Salesforce Issues Bookmarklets DataLoader Fields IDs Custom Links Maps Apex chatter greasemonkey Validation Rules Structure URLs Google Visualforce Formulas Script

What are we reading?

This might be of interest.