• Jan Pavtel
  • NEWBIE
  • 0 Points
  • Member since 2014

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
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.
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