Monday, 3 September 2012

Salesforce Mashup with google maps

This app helps user to plot  sales on the google map.The sales to be plotted can be filtered based on various criteria like location,size,type,date etc.Clicking on a sale on the map redirects to the corresponding account.
Final application looks like this :
you can install the unmanaged apex package from  here :

Use the following doc for deployment instructions :

Demo video:

The app uses only one visual force page and one controller

Visual Force page :

<apex:page sidebar="false" Controller="salesData" id="page">

    <apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-1.3.2.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jquery, 'jquery-ui-1.7.2.custom.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jquery,'jquery-ui-1.7.2.custom.css')}"/>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">    
        //This will load as soon as the page is ready and will setup slider
                //to setup slider
                $("#slider-range").slider({ //This line creates a slider on the DIV specified, options are passed arguments,comma separated below
                range: true,
                min: 0, //Min value for slider
                max: 400, //Max value for slider
                values: [0,250], //initial values of slider
                slide: function(event, ui){ //function to execute on slide event
                  document.getElementById('{!$}').value = ui.values[0]; //hidden fields to pass slider values to controller 
                  document.getElementById('{!$}').value = ui.values[1];
                  $("#amountValue").html(ui.values[0] + ' - ' + ui.values[1]); //display slider value as text
                //to display initial values of slider
                $("#amountValue").html($("#slider-range").slider("values", 0) + ' - ' + $("#slider-range").slider("values", 1));
        #map_canvas {
        font-family: Arial;
        line-height:normal !important;
     <apex:form id="form">
         <apex:pageBlock mode="edit" id="block">
               <apex:pageMessages />
               <apex:pageBlockSection columns="7" id="values" >
                  <apex:pageBlockSectionItem >
                    <apex:outputlabel value="* Country"/>
                    <apex:selectList value="{!country}" multiselect="false" required="true" size="1">
                       <apex:selectOptions value="{!countries}"/>
                 <apex:pageBlockSectionItem >
                   <apex:outputlabel value="State"/>
                   <apex:inputtext value="{!state}"/> 
                 <apex:pageBlockSectionItem >  
                   <apex:outputlabel value="City"/>
                   <apex:inputtext value="{!city}"/> 
                 <apex:commandButton action="{! search}" value="Search" reRender="mymap" />  
                 <!-- pass slider values -->
                 <apex:inputhidden value="{!size_low}" id="size_low" /> 
                 <apex:inputhidden value="{!size_high}" id="size_high" />
                 <!-- pass address of clicked marker -->
                 <apex:inputhidden value="{!addressParameter}" id="addressParameter" /> 
               <apex:pageBlockSection title="Filter Results" columns="3">
                     <apex:pageBlockSectionItem >
                        <apex:outputLabel value="Size"/>
                        <!-- This is where our slider will be -->
                        <div id="slider-range" style="font-size: 90%; margin-top: 0.5em;"></div>
                        <div id="amountValue" style="text-align: center;"></div>
                     <apex:pageBlockSectionItem >
                        <apex:outputlabel value="Begining Year"/>
                        <apex:selectList value="{!b_year}" multiselect="false" required="true" size="1">
                           <apex:selectOptions value="{!years}"/>
                     <apex:pageBlockSectionItem >
                        <apex:outputlabel value="End Year"/>
                        <apex:selectList value="{!e_year}" multiselect="false" required="true" size="1">
                           <apex:selectOptions value="{!years}"/>
                     <apex:pageBlockSectionItem >
                        <apex:outputlabel value="Type"/>
                        <apex:selectCheckboxes value="{!type}">
                           <apex:selectOptions value="{!items}"/>
          <apex:pageBlockSection columns="2">
                <apex:outputpanel id="mymap">
                  <div id="map_canvas"></div>
                  <script type="text/javascript">
                     var myOptions = {
                            mapTypeControl: false,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                     var geocoder = new google.maps.Geocoder();
                    //create map
                     var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
                    function putmarker(map,address,geocoder){
                       geocoder.geocode( { address: address}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK && results.length) {
                          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                              //center map
                             //create marker
                                var marker = new google.maps.Marker({
                                  position: results[0].geometry.location,
                                  map: map,
                             //add click listener on marker
                               google.maps.event.addListener(marker, 'click', function() {
                                  //change addressParameter on click
                                    refreshData(); //to rerender rightpane containing sales data of a location(invokes action function)
                  <apex:repeat value="{! salesAddress}" var="address">
                      <script> putmarker(map,"{!address}",geocoder);</script>
                <apex:dataList value="{! Sales}" var="sale" id="dataView">
                    <!-- extract Record Id(15 character long from begining) to make link and Text to display(from 20th character to end of string) --> 
                    <!-- Instance is auto corrected by if it is not ap1 -->
                        <apex:outputLink value="{!''+left(sale,15)}" target="_blank">
               <!-- Rerender Right pane on marker click -->
               <apex:actionFunction name="refreshData" action="{!refreshData}" rerender="dataView"/>
Controller :


  1. Do you have the demo-Guide coz your package installed but not working. Due to lack of information.

  2. Abhi,share your email with me and I will send you the deploy doc.

  3. Vishesh please code you send me the deploy doc. Many thanks. I will send you a maul seperatley with my email address. All the best Jonathan Bowker

  4. Hi Vishesh,
    Please sent me the deployment doc. I have installed the package and created some records.But the page is not working.Its not showing anything.


  5. Hi Vishesh,
    I have installed the package and created some records.But the page is not working.Its not showing anything.
    Please sent me the deployment doc.


    1. posted the link for deploy doc and demo video in this post

    2. Hi Vishesh,
      I have installed the package and created some records.But the page is not working.Its not showing anything.
      Please sent me the deployment doc.

      Anchal Garg

    3. Hi vishesh I m also not getting anything from above code. Please send me that deployment doc.