Try It Out: Create a Visualforce Page

1<apex:page sidebar="false" showheader="false" 
2    standardController="Warehouse__c" 
3    recordSetVar="warehouses" extensions="FindNearby">
4    
5    <apex:includeScript value="{!$Resource.googleMapsAPI}" />
6    <!-- This API key needs to be set up for there to be 
7        no JS errors -->
8    <!--http://salesforcesolutions.blogspot.com/2013/01/ 
9        integration-of-salesforcecom-and-google.html-->
10    <!--<script type="text/javascript" 
11        src="https://maps.googleapis.com/
12        maps/api/js?key=AIzaSyAVrfZm7_NhbL
13        jHrFPdl242BYV1PBmDPqs&sensor=
14        false"> </script>-->
15    <!-- Set up the map to take up the whole window -->
16    <style>
17        html, body { height: 100%; }
18        .page-map, .ui-content, #map-canvas 
19            { width: 100%; height:100%; padding: 0; }
20        #map-canvas { height: min-height: 100%; }
21    </style>
22    
23    <script>
24        function initialize() {
25            var lat, lon;
26              
27             // Check to see if the device has geolocation 
28             // detection capabilities with JS
29             if (navigator.geolocation) {
30                 navigator.geolocation.getCurrentPosition(
31                     function(position){
32                     lat = position.coords.latitude;
33                     lon = position.coords.longitude;
34                     
35                     //Use VF Remoting to send values to be
36                     //queried in the associated Apex Class
37                     Visualforce.remoting.Manager.
38                     invokeAction(
39                         '{!$RemoteAction.FindNearby.
40                             getNearby}', 
41                         lat, lon,
42                         function(result, event){
43                             if (event.status) {
44                                 console.log(result);
45                                 createMap(lat, lon, result);
46                             } else if (event.type === 
47                                 'exception') {
48                                 //exception case code
49                             } else {
50                                            
51                             }
52                          }, 
53                          {escape: true}
54                      );
55                  });
56              } else {
57              //Set default values for map if the device 
58              //doesn't have geolocation capabilities
59                    /** San Francisco **/
60                    lat = 37.77493;
61                    lon = -122.419416;
62                    
63                    var result = [];
64                    createMap(lat, lon, result);
65              }
66          
67         }
68    
69         function createMap(lat, lng, warehouses){
70            //Grab the map div and center the map at 
71            //the proper latitude/longitude
72            var mapDiv = document.getElementById(
73                'map-canvas');
74            var map = new google.maps.Map(mapDiv, {
75                center: new google.maps.LatLng(lat, lng), 
76                zoom: 12,
77                mapTypeId: google.maps.MapTypeId.ROADMAP
78            });
79            
80            //Set up the markers for the map using the 
81            //variable we queried for in our controller
82            var warehouse;
83            for(var i=0; i<warehouses.length;i++){
84                warehouse = warehouses[i];
85                console.log(warehouses[i]);
86                setupMarker();
87            }
88
89           function setupMarker(){ 
90               var content='<a href src="/'+ warehouse.Id +
91                   '" >'+
92                   warehouse.Name + '</a><br/>'+ 
93                   warehouse.Street_Address__c + 
94                   '<br/>' + warehouse.City__c + 
95                   '<br/>' + warehouse.Phone__c;
96               
97               //Create the callout that will pop up
98               //on the marker
99               var infowindow = new google.maps.
100                   InfoWindow({ 
101                   content: content
102               });
103               
104               //Place the marker
105               var marker = new google.maps.Marker({
106                   map: map,
107                   position: new google.maps.LatLng( 
108                       warehouse.Location__Latitude__s, 
109                       warehouse.Location__Longitude__s)
110               });
111               
112               //Create an action to open the callout
113               google.maps.event.addListener(
114                   marker, 'click', function(){
115                   infowindow.open(map, marker);
116               });
117           }
118        }
119        
120        //Run the initialize function when the window loads
121        google.maps.event.addDomListener(
122            window, 'load', initialize);
123        
124    </script>
125    
126    <body style="font-family: Arial; border: 0 none;">
127        <div id="map-canvas"></div>
128    </body>
129</apex:page>