+ Start a Discussion
Nilima KumariNilima Kumari 

Mapping Geo location Code on on vf page with updating lat/long with marker

Hello Experts

I am new to the Visualforce, 
i am working on a requirement where live Location has to be tracked on the VF page Google maps Including Markers with help of Geolocation latitude and langitude which must be fetched from custom object (Contact_Check_In__c)

My Custom Object name is Contact_Check_In__c
 and i have fields called geolocation(GeoLocation__c)
With Lot of effort and searching i came accross vf page and apex controller, all is ok but it is not capturing the Live Geolocation

all i want is vf page has to take the dynamic geolocation from the record and show it on the google maps on vf page

i refered this blogs still not able to resolve my issue
https://developer.salesforce.com/forums?id=906F0000000AKp5IAG
https://success.salesforce.com/answers?id=90630000000guBkAAI

Any help would be highly appreciated

Below are my VF page
<apex:page StandardController="Contact_Check_In__c" extensions="MyCheckInController" lightningStylesheets="true" docType="HTML-5.0">

<html>
  <head>
   <title>Check In Detail</title>
   <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 90%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 90%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body onload = "loadMap()">
    <h2>Check In on the Map</h2>
    <div id = "map" ></div>
      <script>

        
        function loadMap() {
          // Initialize Google Maps
          const mapOptions = {
            center:new google.maps.LatLng(13.0161331,76.0898104),
            zoom: 13
          }
          const map = new google.maps.Map(document.getElementById("map"), mapOptions);
          
          var text = '{!JsonCheckInData}';
          var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
            var icons = {
              parking: {
                icon: iconBase + 'parking_lot_maps.png'
              },
              library: {
                icon: iconBase + 'library_maps.png'
              },
              info: {
                icon: iconBase + 'info-i_maps.png'
              }
            };
            
          var obj = JSON.parse(text);
          //alert(obj);
          //return obj;
          var x;
          var jsonData='';
          var loc1='';
          var loc2;
          var address='';
          for (x in obj) {
           
            temp=obj[x].location.split(",");
            loc1=temp[0].replace("[", "");
            loc2=temp[1].replace("]", "");
            
                                   
            let marker = new google.maps.Marker({
              map: map,
              icon:icons['library'].icon,
              position: new google.maps.LatLng(loc1, loc2),
              title: 'Person Name:' +  obj[x].name + ' CheckIn:' +obj[x].checkIn 
            })
            
            
          } 
        
        }
      </script>
      <!--<script src = "https://maps.googleapis.com/maps/api/js"></script>-->
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqqej11sosokXGaQTk_-Zw9AIXMVkXoAE&callback=loadMap">
    </script>
    {!JsonCheckInData}
  </body>
</html>
</apex:page>

My Controller
 
public class MyCheckInController {

    public MyCheckInController(ApexPages.StandardController controller) {

    }


    public list<Contact_Check_In__c> LstContactCheckIn{get;set;}
    
    public string JsonCheckInData{get;set;}

    public MyCheckInController(){
        
        LstContactCheckIn=[Select Id, CheckIn_Date_Time__c, GeoLocation__latitude__s, GeoLocation__longitude__s, Contact__r.Name from Contact_Check_In__c];
        
        list<WrpData> lstWrpData=new list<WrpData>();
        
        for(Contact_Check_In__c Check:LstContactCheckIn){
               string strLocation='[' + string.valueOf(check.GeoLocation__latitude__s) + ','  + string.valueOf(check.GeoLocation__longitude__s)+ ']';
               WrpData wrp=new WrpData(check.Contact__r.Name, strLocation, string.ValueOf(check.CheckIn_Date_Time__c),string.valueOf(check.GeoLocation__latitude__s),string.valueOf(check.GeoLocation__longitude__s));
               lstWrpData.add(wrp);
        }
        
        JsonCheckInData=Json.Serialize(lstWrpData);
        
    }
    
    public class WrpData{
        
        public string name{get;set;}
        public string location{get;set;}
        public string checkIn{get;set;}
        public string lat{get;set;}
        public string lng{get;set;}
        public WrpData(string nm,string loc,string chkIn, string lt,string ln){
            name=nm;
            location=loc;
            checkIn=chkIn;
            lat=lt;
            lng=ln;
        }
    }
   
}

​​​​​​​

 
AbhishekAbhishek (Salesforce Developers) 
Hi Nilima,

You can try the suggestions as mentioned in the below blogs,

https://success.salesforce.com/answers?id=9063A000000Dm97QAC

https://success.salesforce.com/answers?id=9063A000000e3vRQAQ

https://success.salesforce.com/answers?id=90630000000gwaCAAQ

It might help you.

Thanks!
 
Nilima KumariNilima Kumari
@Abhishek

Yes i looked all the links which you have provided, it did not help me,
{tushar-sharma}{tushar-sharma}
You can referr bwlow post, I have used lightning:map tag here
https://newstechnologystuff.com/2018/10/22/lightningmap-show-data-on-google-map/

I have used Account and Contact, you can replace them with your custom object.
User-added image

If this answer helps you, please mark it as accepted.

Regards,
Tushar Sharma
https://newstechnologystuff.com/
firdoss mohd 1firdoss mohd 1
Hi Nilima,
It looks like our team of experts can help you resolve this ticket. We have Salesforce global help-desk support and you can log a case and our Customer Success Agents will help you solve this issue. You can also speak to them on live chat. Click on the below link to contact our help-desk. Trust me it is a support service that we are offering for free!

https://jbshelpdesk.secure.force.com

Thanks,
Jarvis SFDC team
Nilima KumariNilima Kumari
@firdoss mohd 1

I have contacted them and Expressed my Issue, 

@Tushar thansk for the Link, but my requirement is I want to capture Geolocation (Latitude and Langitude) from the record and show it on the Google maps with markers