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
Michele Kleinhomer 10Michele Kleinhomer 10 

Beginner VisualForce Question

I am very happy to have made my first successful VisualForce page to display a map of my accounts.  It looks good in the Developer Console Preview in my sandbox.  I would now like to try to add it to my Lightning homepage.  I am not sure what I need to do.  I am looking for guidance or an article that tells me what to do at this point.  Below is my code (that I modified from a Trailhead tutorial).

<apex:page sidebar="false" showheader="false" controller="MemberMap">

   

    
<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(38.75408327579141, -96.416015625),
        zoom: 4
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    loadHotels();
}
    
    function loadHotels() {
    Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.MemberMap.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].Latitude__c;
                    var lng = result[i].Longitude__c;
                    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"/>
</body>

</apex:page> 
Michele Kleinhomer 10Michele Kleinhomer 10
Well, I just found a checkbox that enables pages to be used in Lightning.  That was pretty easy.  I am sure I will need more help, but at least now I can see the page.