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/maps/api/js?key=
12             AIzaSyAVrfZm7_NhbLjHrFPdl242BYV1PBmDPqs
13             &sensor=false">
14    </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.getNearby}',
40                         lat, lon,
41                         function(result, event){
42                             if (event.status) {
43                                 console.log(result);
44                                 createMap(lat, lon, result);
45                             } else if (event.type === 
46                                 'exception') {
47                                 //exception case code
48                             } else {
49                                            
50                             }
51                          }, 
52                          {escape: true}
53                      );
54                  });
55              } else {
56              //Set default values for map if the device 
57              //doesn't have geolocation capabilities
58                    /** San Francisco **/
59                    lat = 37.77493;
60                    lon = -122.419416;
61                    
62                    var result = [];
63                    createMap(lat, lon, result);
64              }
65          
66         }
67    
68         function createMap(lat, lng, warehouses){
69            //Grab the map div and center the map at 
70            //the proper latitude/longitude
71            var mapDiv = document.getElementById(
72                'map-canvas');
73            var map = new google.maps.Map(mapDiv, {
74                center: new google.maps.LatLng(lat, lng), 
75                zoom: 12,
76                mapTypeId: google.maps.MapTypeId.ROADMAP
77            });
78            
79            //Set up the markers for the map using the 
80            //variable we queried for in our controller
81            var warehouse;
82            for(var i=0; i<warehouses.length;i++){
83                warehouse = warehouses[i];
84                console.log(warehouses[i]);
85                setupMarker();
86            }
87
88           function setupMarker(){ 
89               var content='<a href src="/'+ warehouse.Id +
90                   '" >'+
91                   warehouse.Name + '</a><br/>'+ 
92                   warehouse.Street_Address__c + 
93                   '<br/>' + warehouse.City__c + 
94                   '<br/>' + warehouse.Phone__c;
95               
96               //Create the callout that will pop up
97               //on the marker
98               var infowindow = new google.maps.
99                   InfoWindow({ 
100                   content: content
101               });
102               
103               //Place the marker
104               var marker = new google.maps.Marker({
105                   map: map,
106                   position: new google.maps.LatLng( 
107                       warehouse.Location__Latitude__s, 
108                       warehouse.Location__Longitude__s)
109               });
110               
111               //Create an action to open the callout
112               google.maps.event.addListener(
113                   marker, 'click', function(){
114                   infowindow.open(map, marker);
115               });
116           }
117        }
118        
119        //Run the initialize function when the window loads
120        google.maps.event.addDomListener(
121            window, 'load', initialize);
122        
123    </script>
124    
125    <body style="font-family: Arial; border: 0 none;">
126        <div id="map-canvas"></div>
127    </body>
128</apex:page>