Apex Code Development You need to sign in to do that
Don't have an account?
Michele 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>
<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 10Well, 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.