function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
dstonesiferdstonesifer 

Google Maps Help

Is it possible to simply create a custom button in a list view using a URL content source that will open selected records in a Google map with markers? I've been able to get the button to open a google map, but can't figure out how to bring in the records selected from my list view, or if it's even possible without a bunch of other customizations. I tried installing the "Salesforce International Mapping using Google Maps" off appexchange, but frankly was overwhelmed with all the pages, components, etc. that creates. Thanks for any help. Dave
Best Answer chosen by Admin (Salesforce Developers) 
SFBlueFishSFBlueFish

I have tried this for one record i am getting all sucessfully,Just pass the selected record id from listviewbutton javascript code in querystring parameters.

   apex/googlepage?id='Selected ID';

Then there get the id into controller using apexpagereference class.

like apex.

       :ApexPages.currentPage().getParameters().get('id')

And Declare a property in java script of the googlemappage

   

         like  var Addr={!address};

Query the address from selected object and assign address to addr property in controller.

then you will get .

 

i am giving code samples use them.

 

for marker

 

marker.openInfoWindowHtml("<div style=\"float:left;\"><div style=\"font-family: arial, san-serif; padding-left:30px;\"><span style=\"font-weight:bold;\">{!Contact.Name}</span><br/>{!Contact.MailingStreet}<br/>{!Contact.MailingCity}, {!Contact.MailingState} {!Contact.MailingPostalCode}<br/><br/></div></div>");

 

Use this sample.

 

  

  

 

 

 

<apex:page showHeader="false" sidebar="false" standardController="Contact" extensions="contactMap">
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAJeLmMRtO1d8ECMSZkNslVBQ1QIMfevrNmxgjfvD_9mfSx071yRTVaO0JM4GCg9irT4OmXn0jUgI6gQ"></script>
    <script type="text/javascript">
        google.load("maps", "2.x");
        
        var addressPoint;
        
        // Call this function when the page has been loaded
        function initialize() {
            if (GBrowserIsCompatible()) {
                var map = new google.maps.Map2(document.getElementById("map"));
                map.addControl(new GSmallMapControl()); 
                
                var address ="{!Address}";

                var geocoder = new GClientGeocoder();
                geocoder.getLatLng(address, function(newPoint) {
                    if (!newPoint) {
                        $('#textAddress').html('Bummer! We couldn\'t find the location you have in the Mailing Address field. Try entering a new address and reloading the page...');
                    } else {
                        map.setCenter(newPoint, 14);
                        map.addOverlay(new GMarker(newPoint)); 
                        var marker = new GMarker(newPoint); 
                        map.addOverlay(marker); 
                        marker.openInfoWindowHtml("<div style=\"float:left;\"><div style=\"font-family: arial, san-serif; padding-left:30px;\"><span style=\"font-weight:bold;\">{!Contact.Name}</span><br/>{!Contact.MailingStreet}<br/>{!Contact.MailingCity}, {!Contact.MailingState} {!Contact.MailingPostalCode}<br/><br/></div></div>");
                    }
                });
            }
        }
                
        google.setOnLoadCallback(initialize);
    </script> 
     <style>
        .locationGoogleMap {
            color:#4A4A56;
            font-family:arial,helvetica,sans-serif;
            font-size:12px;
            font-weight:bold;
            left:24.3%;
            position:relative;
        }
        
        #textAddress {
            color:#000000;
            font-family:arial,helvetica,sans-serif;
            font-size:18px;
            height:20px;
            left:40%;
            position:relative;
        }       
    </style>
    
    <apex:outputpanel id="googleMap" layout="none">
        <span id="textAddress"></span>
            <div id="contentMap" style="width: 100%; position:relative; margin-top:10px;"> 
                <div id="map" style="height: 300px;"></div>
            </div>
    </apex:outputpanel>
</apex:page> 

Controller

 

public class contactMap {

    public String Address{get;set;}
    
    list<contact> lstcontact = new list<contact>();

    public contactMap(ApexPages.StandardController controller) {

          
       lstcontact =[select Name,MailingCity,MailingStreet,MailingState  from contact where id =:ApexPages.currentPage().getParameters().get('id')];
       
       Address=lstcontact[0].MailingCity+','+lstcontact[0].MailingStreet+','+lstcontact[0].MailingState;   
    }


}

All Answers

SFBlueFishSFBlueFish

I have tried this for one record i am getting all sucessfully,Just pass the selected record id from listviewbutton javascript code in querystring parameters.

   apex/googlepage?id='Selected ID';

Then there get the id into controller using apexpagereference class.

like apex.

       :ApexPages.currentPage().getParameters().get('id')

And Declare a property in java script of the googlemappage

   

         like  var Addr={!address};

Query the address from selected object and assign address to addr property in controller.

then you will get .

 

i am giving code samples use them.

 

for marker

 

marker.openInfoWindowHtml("<div style=\"float:left;\"><div style=\"font-family: arial, san-serif; padding-left:30px;\"><span style=\"font-weight:bold;\">{!Contact.Name}</span><br/>{!Contact.MailingStreet}<br/>{!Contact.MailingCity}, {!Contact.MailingState} {!Contact.MailingPostalCode}<br/><br/></div></div>");

 

Use this sample.

 

  

  

 

 

 

<apex:page showHeader="false" sidebar="false" standardController="Contact" extensions="contactMap">
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAJeLmMRtO1d8ECMSZkNslVBQ1QIMfevrNmxgjfvD_9mfSx071yRTVaO0JM4GCg9irT4OmXn0jUgI6gQ"></script>
    <script type="text/javascript">
        google.load("maps", "2.x");
        
        var addressPoint;
        
        // Call this function when the page has been loaded
        function initialize() {
            if (GBrowserIsCompatible()) {
                var map = new google.maps.Map2(document.getElementById("map"));
                map.addControl(new GSmallMapControl()); 
                
                var address ="{!Address}";

                var geocoder = new GClientGeocoder();
                geocoder.getLatLng(address, function(newPoint) {
                    if (!newPoint) {
                        $('#textAddress').html('Bummer! We couldn\'t find the location you have in the Mailing Address field. Try entering a new address and reloading the page...');
                    } else {
                        map.setCenter(newPoint, 14);
                        map.addOverlay(new GMarker(newPoint)); 
                        var marker = new GMarker(newPoint); 
                        map.addOverlay(marker); 
                        marker.openInfoWindowHtml("<div style=\"float:left;\"><div style=\"font-family: arial, san-serif; padding-left:30px;\"><span style=\"font-weight:bold;\">{!Contact.Name}</span><br/>{!Contact.MailingStreet}<br/>{!Contact.MailingCity}, {!Contact.MailingState} {!Contact.MailingPostalCode}<br/><br/></div></div>");
                    }
                });
            }
        }
                
        google.setOnLoadCallback(initialize);
    </script> 
     <style>
        .locationGoogleMap {
            color:#4A4A56;
            font-family:arial,helvetica,sans-serif;
            font-size:12px;
            font-weight:bold;
            left:24.3%;
            position:relative;
        }
        
        #textAddress {
            color:#000000;
            font-family:arial,helvetica,sans-serif;
            font-size:18px;
            height:20px;
            left:40%;
            position:relative;
        }       
    </style>
    
    <apex:outputpanel id="googleMap" layout="none">
        <span id="textAddress"></span>
            <div id="contentMap" style="width: 100%; position:relative; margin-top:10px;"> 
                <div id="map" style="height: 300px;"></div>
            </div>
    </apex:outputpanel>
</apex:page> 

Controller

 

public class contactMap {

    public String Address{get;set;}
    
    list<contact> lstcontact = new list<contact>();

    public contactMap(ApexPages.StandardController controller) {

          
       lstcontact =[select Name,MailingCity,MailingStreet,MailingState  from contact where id =:ApexPages.currentPage().getParameters().get('id')];
       
       Address=lstcontact[0].MailingCity+','+lstcontact[0].MailingStreet+','+lstcontact[0].MailingState;   
    }


}
This was selected as the best answer
dstonesiferdstonesifer
Thanks very much for the reply. I have to admit this is a little more than I bargained for, but I'm trying to learn more. I have zero developer experience, but being our SF admin i guess it comes with the territory in a small company. Thanks again for the feed back, much appreciated.