MapMyObject - The mapping component!

Thursday, September 12, 2013

Well finally with time I am learning a thing or two about creating apps. Yes apps, I always tried to build some apps that can be used by different developers/ clients. Although todays topic "MapMyObject" was never going to be app, it was just an experiment to create a reusable component to integrate Google Maps with Force.com and guess what ? the initial results were awesome!. This inspired me a lot to convert this one into a app that can pull Geolocation Data(lat/lang) from any Sobject into a Google maps, where you can visualize them, edit them and even create new records.

Today I am releasing a beta version of this "MapMyObject" which can be installed in a DE org or in a sandbox.

Some of the features

• Visualize data from any Sobject into a Google Map
• Edit records from Map
• Create new records from Map
• Highly configurable : You can select permission based on Config/Custom Settings, whether a particulat map will allow editing, creation of new record or view existing records.
• Uses Google Maps API V3

Some Screens

Showing Records

Create New Record

Update Records

Well there are lot more possibilities with this app/component like dashboards, demographics,  Data distribution map.  Well that was lot of bragging about the app! to install the same and to know more about the app please follow the below link : 

http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MDEJ

Integrating Google Maps With Salesforce

Saturday, September 8, 2012

10-Sep-2013 : Have a look at my MapMyObject Component, A very flexible Google Map Mapping component.

This is one of the most frequently asked question "How to integrate Salesforce with Google Maps?"
What if you want to show the address of a Say "Account" in the account detail page?
Well the solution is create a inline visualforce page for account and call the google geocoding service to geocode the address ,use that location to mark a point on the map.

Sounds difficult right?
Well in reality its very easy. Just some fancy Java script calls and its done.
Just see the below visualforce page which pulls the Billing Address from the account and displays the same, this page can be included in the Account detail page layout.

Features

• Shows the Billing Address of the Account in the map
• On click of the marker a info window is shown with the formatted address.

 <apex:page standardController="Account">  
   <!-- Import Necessary Jquery js File and StyleSheets-->  
   <apex:includeScript value="https://maps.googleapis.com/maps/api/js?sensor=false"/>  
   <apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-1.6.2.min.js')}"/>  
   <apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.8.16.custom.min.js')}"/>  
   <apex:includeScript value="{!URLFOR($Resource.jqPlugin, '/jquery.blockUI.js')}"/>  
   <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.8.16.custom.css')}"/>  
   <script>  
      var map,geocoder,infowindow;  
      var latLngs = [];  
      $j = jQuery.noConflict();   
      $j(document).ready(function(){  
        initialize();  
      });  
      function initialize() {  
       geocoder = new google.maps.Geocoder();  
       //initial cordinates for map init  
       var latlng = new google.maps.LatLng(37.09024, -95.712891);  
       var myOptions = {  
         zoom: 4,  
         center: latlng,  
         mapTypeId: google.maps.MapTypeId.ROADMAP  
       };  
       //load the map  
       map = new google.maps.Map($j('#map')[0], myOptions);  
       codeAddress();  
      }  
      /*This function codes the address using the Billing Address in the Acoount*/  
      function codeAddress(){  
        //prepare a string for geocoding  
        var address = '{!Account.BillingStreet},{!Account.BillingCity},{!Account.BillingCountry},{!Account.BillingPostalCode}';  
        console.log(address);  
        //geocode the address  
        geocoder.geocode( { 'address': address }, function(results, status) {  
          //if it is a success  
          if (status == google.maps.GeocoderStatus.OK) {  
            var location = results[0].geometry.location;  
            var marker=addMarker(location );  
            //attach info window to the marker  
            attachInfoWindow(marker,results[0]);  
          }  
          else {  
            alert(status);  
          }  
        });   
      }  
      /*  
      *This method adds a marker to the provided location  
      **/  
      function addMarker(location) {  
       marker = new google.maps.Marker({  
           position: location,  
           map: map  
         });  
         //set the bounds and initial zoom  
       var latlngbounds = new google.maps.LatLngBounds();  
       latlngbounds.extend(marker.getPosition());  
       map.fitBounds(latlngbounds);  
       map.setZoom(14);  
       return marker;  
      }  
     //this function shows the address of a marker when it is clicked  
     function attachInfoWindow(marker,address){  
        google.maps.event.addListener(marker, 'click', function() {  
          if(infowindow!=null)  
           {  
             infowindow.close();  
           }  
         //HTML formated string that is used to dispaly info window over the map markers currently showing the formated address  
         var contentString = '<div class=" ui-state-active ui-corner-top" style="font-size: 1em; padding: 5px;">Address</div>'  
                   +'<div class="ui-widget-content ui-corner-bottom" style="font-size: .9em; padding: 15px;">'+address.formatted_address+'</div>';  
         infowindow = new google.maps.InfoWindow({  
           content: contentString  
         });  
          infowindow.open(map,marker);  
        });  
     }  
   </script>  
   <style>  
     #map {  
       width:100%;  
       height:200px;   
       margin-left:1.5%;  
     }  
   </style>  
   <div id="map" class="ui-widget-content ui-corner-all ui-state-default"></div>  
 </apex:page>  

How the page looks like?

Page showing the Location of Account

The info window showing the address

Package/Installation

You can use this package to install the same in your org 
https://login.salesforce.com/packaging/installPackage.apexp?p0=04t90000000M5aT

The above package contains a page called LocateAccount that can be used inline in the Account detail page to display the location or you can pass the Id of account to the page like this /apex/LocateAccount?id=<ACCOUNT ID>".