You need to sign in to do that
Don't have an account?
vleandro
googleMapsAPI - Salesforce1 Workbook
So as I always like to start each conversation, I consider myself a freshman to sophmore developer. I'm digging in and trying to learn so I very much appreciate all the help!
In the Salesforce1 Workbook, they talk about the Enchanced Warehouse Schema app that you can install onto an org and then build out a visualforce page to utilize the googleMapsAPI static resource (which is a javascript). On my first "sample" Org I installed the the package and I can successfully run the pre-packaged Completed_FindNearbyWarehousesPage.
So far so good.
Now..since I'm a glutton for punishment, and I really am trying to learn the "guts"...I wanted to build this out manually in a second test Org.
I created my Warehouse object and the necessary fields.
I then uploaded the googleMpasAPI javascript as a static resource.
Next I built out a visualforce page simply called FindNearbyWarehoursePage.
However, on the org where I tried to build out manually vs. installing the package, my VF page doesn't return anything. However on the org where I installed the package, the page resolves to my current location.
Now...for the details......
First...my class, FindNearby.
As always...I appreciate the time and insight!
Virginia
In the Salesforce1 Workbook, they talk about the Enchanced Warehouse Schema app that you can install onto an org and then build out a visualforce page to utilize the googleMapsAPI static resource (which is a javascript). On my first "sample" Org I installed the the package and I can successfully run the pre-packaged Completed_FindNearbyWarehousesPage.
So far so good.
Now..since I'm a glutton for punishment, and I really am trying to learn the "guts"...I wanted to build this out manually in a second test Org.
I created my Warehouse object and the necessary fields.
I then uploaded the googleMpasAPI javascript as a static resource.
Next I built out a visualforce page simply called FindNearbyWarehoursePage.
However, on the org where I tried to build out manually vs. installing the package, my VF page doesn't return anything. However on the org where I installed the package, the page resolves to my current location.
Now...for the details......
First...my class, FindNearby.
global with sharing class FindNearby { public FindNearby(ApexPages.StandardSetController controller) { } @RemoteAction // Find warehouses nearest a geolocation global static List<Warehouse__c> getNearby(String lat, String lon){ // If geolocation isn't set, use San Francisco, CA if(lat == null || lon == null || lat.equals('') || lon.equals('')){ lat = '37.77493'; lon = '-122.419416'; } // SOQL query to get the nearest warehouses String queryString = 'SELECT Id, Name, Location__Longitude__s, Location__Latitude__s, ' + 'Street_Address__c, Phone__c, City__c ' + 'FROM Warehouse__c ' + 'WHERE DISTANCE(Location__c, GEOLOCATION('+lat+','+lon+'), \'mi\') < 20 ' + 'ORDER BY DISTANCE(Locatoin__c, GEOLOCATION('+lat+','+lon+'), \'mi\') ' + 'LIMIT 10'; // Run and return the query results return(database.Query(queryString)); } }Next up...my googleMapsAPI javascript that I uploaded as a static resource.
window.google = window.google || {}; google.maps = google.maps || {}; (function() { function getScript(src) { document.write('<' + 'script src="' + src + '"' + ' type="text/javascript"><' + '/script>'); } var modules = google.maps.modules = {}; google.maps.__gjsload__ = function(name, text) { modules[name] = text; }; google.maps.Load = function(apiLoad) { delete google.maps.Load; apiLoad([0.009999999776482582,[[["https://mts0.googleapis.com/vt?lyrs=m@229000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=m@229000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m@229000000"],[["https://khms0.googleapis.com/kh?v=135\u0026hl=en-US\u0026","https://khms1.googleapis.com/kh?v=135\u0026hl=en-US\u0026"],null,null,null,1,"135"],[["https://mts0.googleapis.com/vt?lyrs=h@229000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=h@229000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"h@229000000"],[["https://mts0.googleapis.com/vt?lyrs=t@131,r@229000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=t@131,r@229000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t@131,r@229000000"],null,null,[["https://cbks0.googleapis.com/cbk?","https://cbks1.googleapis.com/cbk?"]],[["https://khms0.googleapis.com/kh?v=81\u0026hl=en-US\u0026","https://khms1.googleapis.com/kh?v=81\u0026hl=en-US\u0026"],null,null,null,null,"81"],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["https://mts0.googleapis.com/vt?hl=en-US\u0026","https://mts1.googleapis.com/vt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/loom?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"https://maps.gstatic.com/mapfiles/","https://csi.gstatic.com","https://maps.googleapis.com","https://maps.googleapis.com"],["https://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/1","3.14.1"],[3209180036],1,null,null,null,null,0,"",null,null,1,"https://khms.googleapis.com/mz?v=135\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"https://mts.googleapis.com/vt/icon",[["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",229000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",229000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"h",229000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"h",229000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],0],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],3],[null,null,[null,"en-US","US",null,18],0],[null,null,[null,"en-US","US",null,18],3],[null,null,[null,"en-US","US",null,18],6],[null,null,[null,"en-US","US",null,18],0]]], loadScriptTime); }; var loadScriptTime = (new Date).getTime(); getScript("https://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/1/main.js"); })();Finally...my Visualforce page, FindNearbyWarehousesPage. Note that when I load this page from my environment I'm getting a blank white page. No error, the browser isn't asking if I want to use my current location or anything.
<apex:page sidebar="false" showheader="false" standardController="Warehouse__c" recordSetVar="warehouses" extensions="FindNearby"> <!-- Include in Google's Maps API via JavaScript static resource --> <apex:includeScript value="{!$Resource.googleMapsAPI}" /> <!-- Set this API key to fix JavaScript errors in production --> <!--http://salesforcesolutions.blogspot.com/2013/01/integration-of-salesforcecom-and-google.html--> <!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&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 we can, get the position of the user via device geolocation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position){ lat = position.coords.latitude; lon = position.coords.longitude; // Use Visualforce JavaScript Remoting to query for nearby warehouses Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.FindNearby.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 /** San Francisco **/ lat = 37.77493; lon = -122.419416; var result = []; createMap(lat, lon, result); } } function createMap(lat, lon, warehouses){ // Get the map div, and center the map at the proper geolocation 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, icon: 'http://maps.google.com/mapfiles/ms/micons/green.png' }); // 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 warehouse; for(var i=0; i<warehouses.length;i++){ warehouse = warehouses[i]; console.log(warehouses[i]); setupMarker(); } // Resize map to neatly fit all of the markers map.fitBounds(mapBoundary); function setupMarker(){ var warehouseNavUrl; // Determine if we are in Salesforce1 and set navigation link appropriately try{ if(sforce.one){ warehouseNavUrl = 'javascript:sforce.one.navigateToSObject(\'' + warehouse.Id + '\')'; } } catch(err) { console.log(err); warehouseNavUrl = '\\' + warehouse.Id; } var warehouseDetails = '<a href="' + warehouseNavUrl + '">' + warehouse.Name + '</a><br/>' + warehouse.Street_Address__c + '<br/>' + warehouse.City__c + '<br/>' + warehouse.Phone__c; // Create the callout that will pop up on the marker var infowindow = new google.maps.InfoWindow({ content: warehouseDetails }); // Place the marker on the map var marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng( warehouse.Location__Latitude__s, warehouse.Location__Longitude__s) }); mapBoundary.extend(marker.getPosition()); // Add the action to open up the panel when it's marker is clicked google.maps.event.addListener(marker, 'click', function(){ infowindow.open(map, marker); }); } } // Fire the initialize function when the window loads google.maps.event.addDomListener(window, 'load', initialize); </script> <!-- All content is rendered by the Google Maps code --> <!-- This minimal HTML justs provide a target for GMaps to write to --> <body style="font-family: Arial; border: 0 none;"> <div id="map-canvas"></div> </body> </apex:page>I even went so far as copying the code from the "working" environment to my "manual test" environment...and still I just get the blank page. I must be missing something....but I'm at a loss as to what. Could it be the static resource? I uploaded the pure .js file vs. zipping it up.....
As always...I appreciate the time and insight!
Virginia
I am having the same problem, a blank page returns when trying to display google map on a custom object. It works fine on standard Accounts object. I tried debugging it in the browser console and this is what I get.
GET https://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/1/main.js 404 (Not Found) googleMapsAPI:6
Visualforce Remoting Exception: line 30, column 1: unexpected token: DISTANCE object.f {statusCode: 400, type: "exception", tid: 2, ref: false, action: "FindNearbyPrem"…} VFRemote.js:116
I am unable to figure out the problem. Cany any experts please help??
Thanks
Mahmood
<apex:page sidebar="false" showHeader="false"
standardController="Warehouse__c"
recordSetVar="warehouses"
extensions="FindNearby">
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
html, body {height : 100%;}
.page-map, .ui-content, #map-canvas {width: 100%; height:100%; padding: 0;}
#map-canvas {heigth: min-height: 100%;}
</style>
<script>
$(document).ready(function() {
function initialize() {
var lat, lon;
// If we can, get the position of the user via device geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
lat = position.coords.latitude;
lon = position.coords.longitude;
// Use Visualforce JS Remoting to query for nearby warehouses
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.FindNearby.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 the map if the device
// doesn't have geolocation capabilities.
// This is San Francisco:
lat = 37.77493;
lon = -122.419416;
var result = [];
createMap(lat, lon, result);
}
}
function createMap(lat, lon, warehouses){
// Get the map div, and center the map at the proper geolocation
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,
icon: 'https://maps.google.com/mapfiles/ms/micons/green.png'
});
// 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 warehouse;
for(var i=0; i<warehouses.length ; i++) {
warehouse = warehouses[i];
console.log(warehouses[i]);
setupMarker();
}
// Resize map to neatly fit all of the markers
map.fitBounds(mapBoundary);
function setupMarker(){
var warehouseNavUrl;
// Determine if we are in Salesforce1 and set navigation
// link appropriately
try{
if(sforce.one){
warehouseNavUrl =
'javascript:sforce.one.navigateToSObject(\'' +
warehouse.Id + '\')';
}
} catch(err) {
console.log(err);
warehouseNavUrl = '\\' + warehouse.Id;
}
var warehouseDetails =
'<a href="' + warehouseNavUrl + '">' +
warehouse.Name + '</a><br/>' +
warehouse.Street_Address__c + '<br/>' +
warehouse.City__c + '<br/>' +
warehouse.Phone__c;
// Create a panel that appears when the user clicks on the marker
var infowindow = new google.maps.InfoWindow({
content: warehouseDetails
});
// Add the marker to the map
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(
warehouse.Location__Latitude__s,
warehouse.Location__Longitude__s)
});
mapBoundary.extend(marker.getPosition());
// Add the action to open the panel when its marker is clicked
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
}
}
initialize()
});
</script>
<body style="font-family: Arial; border: 0 none;">
<div id="map-canvas"></div>
</body>
</apex:page>
Thanks for your answer,
But, Getting the same results again,
Blank screen on salesforce 1(On IPhone),
though it is working fine even on One/One.app,
Are there any more things need to be done for SF1, while using Javascript Code?
@Justin Fogel,
Did you resolved your issue?
Hi ALl - I am having adifferent difficulty and looking for any tips as to how I can resolve it.
For some reason known only to God and someone who is mch more experience than I - tit Looks my Warehouse__c controller didnt load when I loaded the warehouse app as described on page 25 of the workbook. Should I delete the installed and reinstall?
Any tips appreciated,
Mark
I have created the Visualforce page for FindNearbyWarehouses - warehouses have San Fransico addresses but when I click on the Tab it just take me to a local map showing nearby businesses