Hi all, I have a requirement that I need to display all Contacts and Leads of our Organization on Google maps using the Single Visualforce page to track All Contacts and Leads from the Current Location, Here I displayed all Leads from the current location but I need to display All Contacts also for the same Page if anyone knows pls help
Here is my code
Class: -------- global with sharing class LeadsNearbyMe {
public Lead leads{get; set;}
@RemoteAction global static List<Lead> getNearby(String lat, String lon) {
<!-- Setup the map to take up the whole window --> <style> html, body { height: 100%; } .page-map, .ui-content, #map-canvas { width: 100%; height:100%; padding: 0; } #map-canvas { height: min-height: 100%; } </style>
<script> function initialize() { var lat, lon;
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position){ lat = position.coords.latitude; lon = position.coords.longitude;
// Use Visualforce JavaScript Remoting to query for nearby conts Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.LeadsNearbyMe.getNearby}', lat, lon, function(result, event){ if (event.status) { console.log(result); createMap(lat, lon, result); } else if (event.type === 'exception') { //exception case code } else {
} }, {escape: true} ); }); } else { // Set default values for map if the device doesn't have geolocation capabilities /** Eindhoven **/ lat = 51.096214; lon = 3.683153;
var result = []; createMap(lat, lon, result); }
}
function createMap(lat, lon, leads){ var currentPosition = new google.maps.LatLng(lat,lon); var mapDiv = document.getElementById('map-canvas'); var map = new google.maps.Map(mapDiv, { center: currentPosition, zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP });
// Set a marker for the current location var positionMarker = new google.maps.Marker({ map: map, position: currentPosition, title: 'You are here', });
// Keep track of the map boundary that holds all markers var mapBoundary = new google.maps.LatLngBounds(); mapBoundary.extend(currentPosition);
// Set markers on the map from the @RemoteAction results var cont; for(var i=0; i<leads.length;i++){ cont = leads[i]; console.log(leads[i]); setupMarker(); } map.fitBounds(mapBoundary);
I have a requirement that I need to display all Contacts and Leads of our Organization on Google maps using the Single Visualforce page to track All Contacts and Leads from the Current Location, Here I displayed all Leads from the current location but I need to display All Contacts also for the same Page if anyone knows pls help
Here is my code
Class:
--------
global with sharing class LeadsNearbyMe {
public Lead leads{get; set;}
@RemoteAction
global static List<Lead> getNearby(String lat, String lon) {
if(lat == null || lon == null || lat.equals('') || lon.equals('')) {
lat = '51.096214';
lon = '3.683153';
}
String queryString =
'SELECT Id, Name, Location__Longitude__s, Location__Latitude__s, ' +
'Street, City,State,Country, PostalCode ' +
'FROM Lead ' +
'WHERE DISTANCE(Location__c, GEOLOCATION('+lat+','+lon+'), \'km\') < 60 ' +
'ORDER BY DISTANCE(Location__c, GEOLOCATION('+lat+','+lon+'), \'km\') ' +
'LIMIT 25';
return(database.Query(queryString));
}
}
Page:
--------
<apex:page sidebar="false" showheader="false" controller="LeadsNearbyMe">
<apex:includeScript value="{!$Resource.googleMapsAPI}" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCROH4OR9fzDhmprWPL1wGWfPT4uGUeMWg&sensor=false">
</script>
<!-- Setup the map to take up the whole window -->
<style>
html, body { height: 100%; }
.page-map, .ui-content, #map-canvas { width: 100%; height:100%; padding: 0; }
#map-canvas { height: min-height: 100%; }
</style>
<script>
function initialize() {
var lat, lon;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
lat = position.coords.latitude;
lon = position.coords.longitude;
// Use Visualforce JavaScript Remoting to query for nearby conts
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.LeadsNearbyMe.getNearby}', lat, lon,
function(result, event){
if (event.status) {
console.log(result);
createMap(lat, lon, result);
} else if (event.type === 'exception') {
//exception case code
} else {
}
},
{escape: true}
);
});
} else {
// Set default values for map if the device doesn't have geolocation capabilities
/** Eindhoven **/
lat = 51.096214;
lon = 3.683153;
var result = [];
createMap(lat, lon, result);
}
}
function createMap(lat, lon, leads){
var currentPosition = new google.maps.LatLng(lat,lon);
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: currentPosition,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Set a marker for the current location
var positionMarker = new google.maps.Marker({
map: map,
position: currentPosition,
title: 'You are here',
});
// Keep track of the map boundary that holds all markers
var mapBoundary = new google.maps.LatLngBounds();
mapBoundary.extend(currentPosition);
// Set markers on the map from the @RemoteAction results
var cont;
for(var i=0; i<leads.length;i++){
cont = leads[i];
console.log(leads[i]);
setupMarker();
}
map.fitBounds(mapBoundary);
function setupMarker(){
var contNavUrl;
try{
if(sforce.one){
contNavUrl =
'javascript:sforce.one.navigateToSObject(\'' + cont.Id + '\')';
}
} catch(err) {
console.log(err);
contNavUrl = '\\' + cont.Id;
}
var contDetails =
cont.Name + ',' +
cont.Street + ',' +
cont.City + ',' +
cont.PostalCode;
var marker = new google.maps.Marker({
map: map,
icon : "{!URLFOR($Resource.GoogleMarkers, 'GoogleMark/4-l.png')}",
title:contDetails,
position: new google.maps.LatLng(
cont.Location__Latitude__s,
cont.Location__Longitude__s)
});
mapBoundary.extend(marker.getPosition());
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body style="font-family: Arial; border: 0 none;">
<div id="map-canvas"></div>
</body>
</apex:page>