Apex Code Development You need to sign in to do that
Don't have an account?
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
My Controller
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;
}
}
}
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!
Yes i looked all the links which you have provided, it did not help me,
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.
If this answer helps you, please mark it as accepted.
Regards,
Tushar Sharma
https://newstechnologystuff.com/
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
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