Show Contacts on Google Map

Hi All,

In this article I will tell you how you can show your Contacts with their Locations on Google Map.In this example I am using Social Profile pictures of Contacts to show on Map.If you want to see your Profile picture you have to login from any of your social profile.If you do not want to use Contact’s social profile, you can modify code to use Attachments related to these Contacts.

Let’s walk through the code.

ContactsOnGoogleMapController Class :

public class ContactsOnGoogleMapController{
    
    public String contactJson{get;set;}
    
    public ContactsOnGoogleMapController(){
        
        List<Contact> conList = [select Id,Name,Email,Phone,MailingLatitude,MailingLongitude,MailingStreet,MailingCity,MailingState,MailingCountry,PhotoUrl from Contact Order By CreatedDate DESC LIMIT 5];
        
        String baseURL = 'https://ap2.salesforce.com';
        String coma = '';
        
        if(conList.size() > 0){
            contactJson = '[';
            
            for(Contact con : conList){
                contactJson += coma + '{\"title\":\"' + con.Name + '\",'+
                                '\"lat\": \"' + con.MailingLatitude + '\",'+
                                '\"lng": \"' + con.MailingLongitude +'\",'+
                                '\"address\": \"' + con.MailingStreet +' '+ con.MailingCity +'<br/>'+ con.MailingState + '<br/>' +con.MailingCountry + '\",'+
                                '\"contact\": \"' + con.Phone + '\",'+
                                '\"icon\": \"' + baseURL +''+ con.PhotoUrl + '\"}';
                                
                coma = ',';
            }
            
            contactJson += ']';
            
        }
    }
    
}

In this controller I am querying Contact’s records.From Contact List I am creating a JSON string to pass on VF Page.

ContactsOnGoogleMap VF Page :

<apex:page controller="ContactsOnGoogleMapController" showHeader="false" sidebar="false" standardStylesheets="false">

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    
    <script type="text/javascript">
        var mapicon = JSON.parse('{!contactJson}');
        
        window.onload = function () {
            LoadMap();
        }
        function LoadMap() {
            var mapOptions = {
                center: new google.maps.LatLng(mapicon[0].lat, mapicon[0].lng),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            
            for (var i = 0; i < mapicon.length; i++) {
                var data = mapicon[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                
                var image = {
                    url: data.icon,
                    size: new google.maps.Size(100, 65),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(65, 65)
                };
                
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title,
                    icon: image,
                    contact: data.contact
                });
                
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent("<div style = 'width:100%;height:40%'><img width='60px' height='60px' align = 'middle' src = '" + data.icon + "' />&nbsp;&nbsp;<b>"+ data.title + "<b/><br/><a href=tel:["+data.contact+"]>"+data.contact+"<img style='vertical-align:top' width='20' height='18' src='/resource/dial'/></a><br/>"+data.address+"</div>");
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
                latlngbounds.extend(marker.position);
         
            }
            
            var bounds = new google.maps.LatLngBounds();
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);
        }
        
    </script>
    
    <div id="dvMap" style="width: 100%; height: 600px">
    </div>
    
</apex:page>

Above script is used to show Contacts with their information.

So That’s It.