Integrating Google Maps V3 into a VisualForce Page

I recently had a requirement to implement a Google Maps view for an Account and thought I would share the code I wrote to implement this functionality.

Firstly I needed to create a Visual Force Page containing the same structure as the default page, which is easy with just one line of code:

<span class="kwrd">&lt;</span><span class="html">apex:detail</span> <span class="kwrd">/&gt;</span>

The rest of the implementation requires a bit of Javascript to convert the UK Postal code into coordinates and then generate the map.

To convert a Postal code into coordinates you need to use the geocoder object:

<span class="kwrd"> var</span> geocoder = <span class="kwrd">new</span> google.maps.Geocoder();
   address: <span class="str">"{!Account.BillingPostalCode}"</span>
   }, <span class="kwrd">function</span>(locResult) {
     <span class="kwrd">var</span> lat1 = locResult[0];
     <span class="kwrd">var</span> lng1 = locResult[0].geometry.location.lng();
     <span class="kwrd">var</span> myLatlng = <span class="kwrd">new</span> google.maps.LatLng(lat1, lng1);
     <span class="kwrd">var</span> myOptions = {
       zoom: 14,
       center: myLatlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     <span class="kwrd">var</span> mapComp = document.getElementById(<span class="str">"map_canvas"</span>); = <span class="str">'900px'</span>; = <span class="str">'500px'</span>;
     <span class="kwrd">var</span> map = <span class="kwrd">new</span> google.maps.Map(mapComp, myOptions); 
     <span class="kwrd">var</span> marker = <span class="kwrd">new</span> google.maps.Marker(
             {position: myLatlng, map: map, title: address});  

The code above also generates a map object which can be rendered on the page.

The complete code sample can be downloaded here (don’t forget to put your own API key into the code.


Salesforce Chatter Triggers

Today I wanted to create an app that would allow me to add my activity so that I can analyse my time at a future date. I started my trusty IDE to start mocking up the idea when I had to step back for a moment and think there must be a simpler way to do this.

I use Salesforce for managing my projects and I usually post chatter messages to myself and others. What if I could post a custom # message that would be intercepted and posted to a custom object.

No problem… I created a custom object called Activity:


Then all you need to do is go to Customize > Chatter > Triggers and add a new trigger on the Feed Item.It’s then a matter of looking for a #activity tag in the feed item body, pulling the entry out and inserting it into my Activity custom object.

<span class="lnum">   1:  </span>trigger ActivityPost on FeedItem (after insert) {
<span class="lnum">   2:  </span>    <span class="kwrd">for</span> (FeedItem f : trigger.<span class="kwrd">new</span>)
<span class="lnum">   3:  </span>    {
<span class="lnum">   4:  </span>        <span class="kwrd">if</span> (f.Body.startsWith(<span class="str">'#activity'</span>)) {
<span class="lnum">   5:  </span>            funcoder__Activity__c a = <span class="kwrd">new</span> 
                                 funcoder__Activity__c (
<span class="lnum">   6:  </span>                Name = f.Body.replace(<span class="str">'#activity'</span>,<span class="str">''</span>)
<span class="lnum">   7:  </span>            );
<span class="lnum">   8:  </span>
<span class="lnum">   9:  </span>            insert a;
<span class="lnum">  10:  </span>        }
<span class="lnum">  11:  </span>    }
<span class="lnum">  12:  </span>}

Now just go and enter a chatter message, for example #activity Developed an activity application in Salesforce.

Copyright FUNCODER 2019
Shale theme by Siteturner