I am new using VisualForce and this is the first time I'm using this technology. I have to use the google maps api in VF because of the limitations of LWC lightning-map. My VisualForce looks like this:
<apex:page controller="MapCECompleto_Controller">
<head>
<script src="{!googleMapsApi}"></script>
<script>
function initMap(){
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 37.7749, lng: -122.4194}
});
//Iteramos sobre los datos del controler
var lists = {!JSON.serialize(completeList)};
for(var i = 0; i<lists.length; i++){
var iData = lists[i];
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': iData.Direccion}, function(result,status){
if(status == 'OK'){
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: iData.Name})
}else{
alert('Problem in: '+ status);
}
})
}
}
</script>
</head>
<body onload="initMap()">
aqui
aqui1
<div id="map" style="height: 500px"></div>
aqui 2
</body>
</apex:page>
And my apex controller:
public class MapCECompleto_Controller {
public static String GOOGLE_MAPS_API = 'https://maps.googleapis.com/maps/api/js?key=';
public static String getGoogleMapsApi(){
String developerNameIntegracion = 'Google_' + Label.SalesforceOrg; //Google_dev
String authToken = IntegracionHelperClass.getAuthToken(developerNameIntegracion);
String googleMapsURLWithToken = GOOGLE_MAPS_API + authToken;
System.debug('googleMapsURLWithToken ---- '+ googleMapsURLWithToken);
return googleMapsURLWithToken;
}
public static List<Object> getCompleteList(){
List<Object> recordsToReturn = new List<Object>();
List<SObject1> listOne = [SELECT Id,Direccion__c, Estado__c, Name FROM SObject1];
if(!listOne.isEmpty()){
for(SObject1 iItem: listOne){
if(iItem.Estado__c == HelperClass.ESTADO_ACTIVADO){
Map<String, Object> oneMap = new Map<String, Object>();
oneMap.put('Name', iItem.Name);
oneMap.put('Direccion', iItem.Direccion__c);
oneMap.put('Objeto', 'Object 1');
oneMap.put('Id',iItem.Id );
recordsToReturn.add(oneMap);
}
}
}
List<SObject2> listTwo = [SELECT Id,EstadoSolicitud__c,Direccion__c,, Name, FROM SObject2];
if(!listTwo.isEmpty()){
for(SObject2 iItem: listTwo){
if(iItem.EstadoSolicitud__c == HelperClass.ESTADO_NUEVA || iItem.EstadoSolicitud__c == HelperClass.ESTADO_EN_GESTION){
Map<String, Object> twoMap = new Map<String, Object>();
twoMap.put('Name',iItem.Name );
twoMap.put('Direccion', iItem.Direccion__c);
twoMap.put('Objeto','Object 2');
twoMap.put('Id',iItem.Id );
recordsToReturn.add(twoMap);
}
}
}
List<SObject3> listThree = [SELECT Id,Direccion__c, Name FROM SObject3 LIMIT 3];
if(!listThree.isEmpty()){
for(SObject3 iItem: listThree){
Map<String, Object> threeMap = new Map<String, Object>();
threeMap.put('Name', iItem.Name);
threeMap.put('Direccion',iItem.Direccion__c);
threeMap.put('Objeto','Object 3');
threeMap.put('Id',iItem.Id);
recordsToReturn.add(threeMap);
}
}
List<SObject4> listFour = [SELECT Id, Direccion__c, Name FROM SObject4 LIMIT 3];
if(!listFour.isEmpty()){
for(SObject4 iItem :listFour){
Map<String, Object> fourthMap = new Map<String, Object>();
fourthMap.put('Name', iItem.Name);
fourthMap.put('Direccion',iItem.Direccion__c);
fourthMap.put('Objeto','Object 4');
fourthMap.put('Id',iItem.Id);
recordsToReturn.add(fourthMap);
}
}
System.debug('recordsToReturn ------ '+ recordsToReturn);
return recordsToReturn;
}
}
The thing is that the map is not being shown. I checked that the google maps api key is valid. I checked in the browse console and I am getting the following error Error: Unknown function JSON.serialize. Check spelling in the line
var accounts = {JSON.serialize(completeList)};
And also the error on initMap is not defined at onload
Could anybody help me? Thanks
