Wednesday, 25 December 2013

Google Map Integration With Salesforce

I got a requirement of showing google map of Account Billing address on detail page of Account. In the starting I was thinking how to do it, but didn't get anything, but now at the end I tried this below code and everything is working as fine as visible down there.

In this below scenario user don't have to submit their APIKey of Google Map to get the Map of the Address. and one more thing here am not using any Controller/Apex class only and only page is doing everything.

Here it is the Detail Page of Account and the Location of Account billing address using Google Map

Below is the Visual force Page

* Description : Component for showing google map of Account Address.
* Created Date : 12/25/2013
* Created By : Abhi Tripathi
* Version : V1_0
<apex:page standardController="Account">
    <!-- Import Necessary Jquery js File and StyleSheets-->
    <apex:includeScript value="{!URLFOR($Resource.jQuery_GoogleMap, 'js/GSensor.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQuery_GoogleMap, 'js/jquery-1.6.2.min.js')}"/>
    var map,geocoder,infowindow;
    var latLngs = [];
    $j = jQuery.noConflict();
    function initialize() {
        geocoder = new google.maps.Geocoder(37.09024, -95.712891);
        //initial cordinates for map init
        var latlng = new google.maps.LatLng();
        var myOptions = {
            center: latlng,
            zoom: 2,
            maxZoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        //load the map
        map = new google.maps.Map($j('#map')[0], myOptions);
    /*This function codes the address using the Billing Address in the Acoount*/
    function codeAddress(){
        //prepare a string for geocoding
        var address = '{!JSENCODE(Account.BillingStreet)},{!JSENCODE(Account.BillingCity)},{!JSENCODE(Account.BillingCountry)},{!JSENCODE(Account.BillingPostalCode)}';
        //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 );
            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();
        return marker;
        #map {
    <div id="map" class="ui-widget-content ui-corner-all ui-state-default"></div>

Save that above code before that save this Jquery files and after that save them into your static resource with their corresponding name

Click Below Links for the JQuery files


After saving the above jquery files in Static Resource and saving your visualforce page.

Go to
Customize --> Accounts --> Page Layout --> Edit(One of page layout) --> Visualforce Pages(sidebar of layout)

Search your page and add it to the page layout. and see the magic
Note: Billing address need to be filled with correct addres otherwise its will show a default map.

Happy Coding..!!


  1. Hi Abhi

    1) I just Open the below files in the browser


    2) And I have copied the code and save it as jQueryGoogleMap for first file
    3) And Second file jquery-ui-1.8.16.custom.min i just copied the code and save it as jQueryGoogleMap1
    4) what ever you mention the VF page code i just copied the code and name it as googlemap for the vf page name
    5) I am using salesforce professional edition

    Please reply as soon as possible.

    1. Hi Ravi,
      All the files I have mentioned are Javascript files , so please save them in Javascript format. and that GSensor file also very important, so use that too please

  2. Good one..!
    This is really valuable...for learning and usability point of view..!
    Keep posting Abhi..!

    Thanks :)