Apex Code Development You need to sign in to do that
Don't have an account?
Angela Mullen-Smith 20 visualforce map - change the field to be displayed on the map
I have created a visual force page to display records on a map - it all work great but I want to change the field ref that is displayed when I click on an Icon - I have added the field into the code but it does nothing. The field that I want to add into the code is Facility_Name__c
I have tried replacing the var Name with this field ref and it will not change it so that the name appears when I hover over the marker - Any ideas what I have done wrong
<apex:page sidebar="false" showheader="false" controller="FacilityRemoter">
<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?key= AIzaSyC3GwkxsiGHfc0y5sheupDf7QzKtbFI4jg®ion=AU">
</script>
<script>
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-16.45789579, 145.3789838),
zoom: 15
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
loadFacilities();
}
function loadFacilities() {
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.FacilityRemoter.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"/>
</body>
</apex:page>
I have tried replacing the var Name with this field ref and it will not change it so that the name appears when I hover over the marker - Any ideas what I have done wrong
<apex:page sidebar="false" showheader="false" controller="FacilityRemoter">
<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?key= AIzaSyC3GwkxsiGHfc0y5sheupDf7QzKtbFI4jg®ion=AU">
</script>
<script>
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-16.45789579, 145.3789838),
zoom: 15
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
loadFacilities();
}
function loadFacilities() {
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.FacilityRemoter.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"/>
</body>
</apex:page>
1. The Apex class added the field Facility_Name__r.Name
2. In the above visualforce code replaced
var name = result[i].Name; with
var name = result[i].Facility_Name__r.Name;
I tried to take a screenshot with the map displaying the name but I can't get it to work but it does display the Name perfectly....I am so happy, sense of achievement
All Answers
global with sharing class FacilityRemoter {
@RemoteAction
global static List<Facility__c> findAll() {
return [SELECT Id, Name,Location__Latitude__s, Location__Longitude__s
FROM Facility__c];
}
}
global with sharing class FacilityRemoter {
@RemoteAction
global static List<Facility__c> findAll() {
return [SELECT Id, Name,Facility_Name__c ,Location__Latitude__s, Location__Longitude__s
FROM Facility__c];
}
}
what I did was added in the field Facility_Name__c but it had no effect.
Where ever I had the field name - I replaced with this variable, but no Markers would appear on the map.
I thought it would be simple to just change the reference pont
replace result[i].Name; with result[i].Facility_Name__c;
Also ensure that Facility_Name__c actually has a value and is not empty
Thanks for your quick reply - I did the above and all the records have a value in the Facility_name__c field.
I also updated this section - replacing name with Facility_name__c
function addMarker(id, name, Facility_name__c,lat, lng) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: Facility_name__c
@Steven Nsubuga
I replaced the title with Name - the marker are now showing but not the Facility name.
I tried replacing the line
title: name with title: id and the ID number is displayed on the marker when I hover over it.
I replaced the title:name with title: lat and th details did not appear when I hovered over the marker.
My field Facility_name__c is a master-detail relationship so it is not necessarily a unique value as a Facility and I think that this is why it is not displaying the values on the Marker
My Facility name field is a Master detail field
It is driving me insane
1. The Apex class added the field Facility_Name__r.Name
2. In the above visualforce code replaced
var name = result[i].Name; with
var name = result[i].Facility_Name__r.Name;
I tried to take a screenshot with the map displaying the name but I can't get it to work but it does display the Name perfectly....I am so happy, sense of achievement
if an Account name contains an ampersand - Paddington Mill Gold Mine & Processing. It will display on the Map Paddington Mill Gold Mine & Processing.
Any ideas how I rectify it?