function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
vleandrovleandro 

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.
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





vleandrovleandro
Sadly...no...I never did find or get any answer.  I'm wondering if the problem is due to changes Google made to their Maps API or something like that!
Mahmood Syed 6Mahmood Syed 6
Hi There,

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
Jan PavtelJan Pavtel
You can use the code below:
<apex:page sidebar="false" showHeader="false" 
            standardController="Warehouse__c" 
            recordSetVar="warehouses"
            extensions="WarehouseUtils">
          
            
    <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.WarehouseUtils.findNearbyWarehouses}', 
                            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>

 
Joanne Dority 20Joanne Dority 20
Actually - the code above does not work because the controller "extentions" doesn't match the Apex Class that the Workbook asks you to create - which is called "FindNearby" not "WarehouseUtils".     This code works and follows the naming conventions used in the Workbook.    Also, the warehouses in the package sample data are all located in the San Francisco area. If you’re testing this from another location, be sure to add a warehouse located within 20 miles. 

<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>
Justin FogelJustin Fogel
[Joanne Dority 20] your code works great on desktop browsers.  But on SF1 it just resolves a white page.  No asking for location or nothing. 
Ketan ErandeKetan Erande
Any one find the right code, that will work better on SF1?
Jason PecsekJason Pecsek
I found that a combination of the workbook code and the update to the google maps reference by Joanne Dority solved the problem. I am able to see the map on both desktop and SF1.

 
<apex:page sidebar="false" showheader="false" 
            standardController="Warehouse__c" 
            recordSetVar="warehouses" 
            extensions="WarehouseUtils">
    
    <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>

    <!-- <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false">
    </script> -->
    <!-- Set 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 {heigth: min-height: 100%;}
    </style>
    <!-- JavaScript custom code goes here -->
    <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.WarehouseUtils.findNearbyWarehouses}',
                            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);
                }
            }
            // createMap function goes here
        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);
            // setupMarker function goes here
            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);
                    });
                }
                // page initialization goes here   
                // Fire the initialize function when the window loads
            //google.maps.event.addDomListener(window, 'load', initialize);
            
        }
        initialize()
        });
    </script>

    <!-- Google Maps target [div] goes here -->
    <!-- All content is rendered by the Google Maps code
    This minimal HTML just provides a target for GMaps to write to -->

    <body style="font-family: Arial; border: 0 none;">
        <div id="map-canvas"></div>
    </body>
</apex:page>

 
Ketan ErandeKetan Erande
@Jason,

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?
Mark Keckeis 27Mark Keckeis 27

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

Angela Mullen-Smith 20Angela Mullen-Smith 20
Hi
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