+ 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">


<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></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);
    function loadHotels() {
        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 {
        {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);

  <div id="map-canvas"/>

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.