Salesforce Developer Workshop

Using JavaScript in Visualforce Pages


What You'll Do

  • Create a new Custom Object to track conference hotels.

  • Create a custom controller with a method that returns a list of conference hotels.

  • Create a Visualforce page that invokes that method using JavaScript Remoting.

  • Use the Google Maps SDK to display the hotels on a map.

Step 1: Create the Hotel Object

  1. In Setup, select Build > Create > Objects.

  2. Click New Custom Object, and define the Hotel Object as follows:

    • Label: Hotel
    • Plural Label: Hotels
    • Object Name: Hotel
    • Record Name: Hotel Name
    • Data Type: Text
  3. Click Save.

  4. In the Custom Fields & Relationships section, click New, and create a Location field defined as follows:

    • Data Type: Geolocation
    • Field Label: Location
    • Latitude and Longitude Display Notation: Decimal
    • Decimal Places: 7
    • Field Name: Location

    Click Next, Next, Save.

  5. Create a Tab for the Hotel object.

    • In Setup, select Build > Create > Tabs.
    • In the Custom Object Tabs section, click New.
    • Select the Hotel object and Building as the Tab Style Icon.
    • Click Next, Next.
    • Uncheck the Include Tab checkbox, check the Conference checkbox, and click Save.

  6. Enter a couple of hotels with location information. For example:

    • Marriott Marquis (37.785143 -122.403405)
    • Hilton Union Square (37.786164 -122.410137)
    • Hyatt (37.794157 -122.396311)

Step 2: Create the HotelRemoter Controller

  1. In the Developer Console, select File > New > Apex Class, specify HotelRemoter as the class name and click OK.

  2. Implement the class as follows:

    global with sharing class HotelRemoter {
    
        @RemoteAction
        global static List<Hotel__c> findAll() {
            return [SELECT Id, Name, Location__Latitude__s, Location__Longitude__s
                        FROM Hotel__c];
        }
    
    }
    
  3. Save the file.

Step 3: Create a Visualforce Page with Google Maps

  1. In the Developer Console, select File > New > Visualforce Page, specify HotelMap as the page name and click OK.

  2. Implement HotelMap as follows:

    <apex:page sidebar="false" showheader="false">
    
    <head>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
    var map;
    
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(37.784173, -122.401557),
            zoom: 15
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    
    </script>
    </head>
    <body>
      <div id="map-canvas"/>
    </body>
    
    </apex:page>
    
  3. Save the file.

  4. Click the Preview button (upper left corner) to test the HotelMap page in the browser.

Step 4: Display the Hotels on the Map

  1. Assign HotelRemoter as the controller for the HotelMap Visualforce page:

    <apex:page sidebar="false" showheader="false" controller="HotelRemoter">
    
  2. Define a function named loadHotels() implemented as follows (right after the initilize() function):

    function loadHotels() {
        Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.HotelRemoter.findAll}',
            function(result, event){
                if (event.status) {
                    for (var i=0; i<result.length; i++) {
                        var id = result[i].Id;
                        var name = result[i].Name;
                        var lat = result[i].Location__Latitude__s;
                        var lng = result[i].Location__Longitude__s;
                        addMarker(id, name, lat, lng);
                    }
                } else {
                    alert(event.message);
                }
            },
            {escape: true}
        );
    }
    
  3. Define the addMarker() function implemented as follows (right after the loadHotels() function):

    function addMarker(id, name, lat, lng) {
        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                map: map,
                title: name
        });
        google.maps.event.addListener(marker, 'click', function(event) {
            window.top.location = '/' + id;
        });
    }
    
  4. Invoke loadHotels() as the last line of the initialize() function (right before the closing } for that function):

    loadHotels();
  5. Save the file.

  6. Click the Preview button (upper left corner) to test the HotelMap page in the browser. You should now see markers on the map representing the hotels you entered in Step 1.

Share Time Estimate