I need to pass several Objects from Apex to visualforce, geocode them using the google javascript api, and then pass them back to Apex.
I've been attempting to accomplish this by creating a consisting of id/address pairs, converting this into a string, and then passing the string into javascript. However, I'm unsure how to properly iterate through these key value pairs once in javascript.
public class ControllerJSGeo{
public String pId;
public String getlocList{get;set;}
public ControllerJSGeo(ApexPages.StandardController stdController){
pId = ApexPages.CurrentPage().getParameters().get('id');
getlocList();
}
public void getlocList(){
Map<Id,String> getList=new Map<Id,String>();
Property__c p=[SELECT Name, GeoCoord__c,GeoCoord__latitude__s,GeoCoord__longitude__s,Tenant_Sub_Type__c FROM property__c WHERE id =:pId limit 1];
List<Property__c> rawPS=[select id,name,GeoCoord__latitude__s,GeoCoord__longitude__s,property_address__c from property__c where Tenant_Sub_Type__c=:p.Tenant_Sub_Type__c ];
for(Property__c rawP : rawPS){
if (rawP.GeoCoord__latitude__s==null&&rawP.GeoCoord__longitude__s==null){
getList.put(rawP.id,rawP.property_address__c);
}
}
getlocList=JSON.serialize(getList);
}
}
VISUALFORCE:
<apex:page standardController="Property__c">
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var myOptions = {
zoom: 18,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true,
scrollwheel: false
}
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var address = "{!Property__c.Property_Address__c}, " + "{!Property__c.City__c}, " + "{!Property__c.State__c} " + "{!Property__c.Zip_Postal_Code__c}}";
var infowindow = new google.maps.InfoWindow({
content: "<b>{!Property__c.Name}</b><br>{!Property__c.Property_Address__c}<br>{!Property__c.City__c}, {!Property__c.State__c} {!Property__c.Zip_Postal_Code__c}"
});
geocoder.geocode( { address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);
map.setTilt(45);
//center map
map.setCenter(results[0].geometry.location);
//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "{!Property__c.Name}"
});
//add listeners
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
map.setCenter(marker.getPosition());
});
var json={!getlocList};
console.log(json);
}
} else {
$('#map').css({'height' : '15px'});
$('#map').html("Oops! {!Property__c.Name}'s billing address could not be found, please make sure the address is correct.");
resizeIframe();
}
});
function resizeIframe() {
var me = window.name;
if (me) {
var iframes = parent.document.getElementsByName(me);
if (iframes && iframes.length == 1) {
height = document.body.offsetHeight;
iframes[0].style.height = height + "px";
}
}
}
});
</script>
<style>
#map {
font-family: Arial;
font-size:12px;
line-height:normal !important;
height:800px;
background:transparent;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</apex:page>
This is the part that passes the variable in:
var json={!getlocList};
console.log(json);
this gets output to the console:
Object {a00630000021YOLAA2: null, a00630000021YOQAA2: null, a00630000021YOVAA2: "5315 W Rosecrans Ave"}
Obviously, I can't iterate over it by the key, because that's going to be different for each different id. Is there anyway I can do the equivalent to array[0], where the name of the string is not important, but its index?
for (var key in Object.keys(json)) { console.log(json[key]); }
.undefined
{a00630000021YOLAA2: null, a00630000021YOQAA2: null, a00630000021YOVAA2: "5315 W Rosecrans Ave"}
Object.keys(...)
call in the for loop. Try using justfor (var key in json) { console.log(key + ':' + json[key]); }
. That should print out each key and value.