Show Contacts on Google Map

Posted on Updated on

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.

Screenshot_2015-10-13-10-39-49

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.

3 thoughts on “Show Contacts on Google Map

    shravani said:
    October 13, 2015 at 10:20 am

    hi…
    when i am executing the above program i am getting the error ” unknown property’contactsongooglemapcontroller.contactJson”…

    can you help me…thanks in advance

    Like

      balkishankachawa responded:
      October 13, 2015 at 10:48 am

      Are you getting this error on page or class? Could you give me your code or snapshot of error?

      Like

        Vyankatesh said:
        July 14, 2017 at 7:17 pm

        Hi,

        I am getting error when i used above code. Not able to see contacts on Map.
        Can you please check your code running once, If that needs any modification now?

        Thanks!

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s