function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
raushan kumar 34raushan kumar 34 

how to use hotel location map in Conference Management App

Charisse de BelenCharisse de Belen
Hi Raushan,

Can you give us some more details about the problem that you are experiencing? What is your goal and what have you tried so far?
Amit Kumar 447Amit Kumar 447

Hi All,

As i am beginner to Salesforce and i was trying to create a visual force page to display Hotel location but as i am checking the preview is showing blank and i am creating the app with the help of Trailhead. App Name : Conference App. Below is my code. Please suggest for this

Class: 
global class HotelRemorter {
    @RemoteAction
    global static List<Hotel__c> findAll(){
        return [Select Id, Name, Location__Latitude__S,  Location__Longitude__S from Hotel__c];
    }
}

Visualforce Page:

<apex:page controller="HotelRemorter"> 
    <head>
        <style type="text/css">
            html {height : 50%}
            body {height:50%, margin:0, padding:0}
            #map-canvas {height:50%}
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?sensor=false" />
        <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);
              loadHotels();
            }
            function loadHotels(){
                Visualforce.remorting.Manager.invokeAction('{!$RemoteAction.HotelRemorter.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}  
                                                          );
            }
            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; });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
           
    </head>
    <body>
        <div id="map-canvas" />
        <p>
            Welcome to Google Map
        </p>
    </body>
</apex:page>

Please suggest for this.

Thanks & Regards,
Amit Kumar