Google Maps - Array of Locations from SOQL List

Question

How could I populate a javascript array like below, from a SOQL Query?

var DemoLocationData = [
                    [49.2812668, -123.1035942, "26 E Hastings St, Vancouver" ], 
                    [49.2814064, -123.1025187, "71 E Hastings St, Vancouver" ], 
                    [49.2812336, -123.1020622, "122 E Hastings St, Vancouver" ], 
                    [49.2813564, -123.1012253, "138 E Hastings St, Vancouver" ], 
                    [49.2811625, -123.0985032, "242 E Hastings St, Vancouver" ]
                ];

This is so I can display my all of custom object's types location on a Google Map (e.g Cars). I have already achieved this for a single Car, and I am displaying this inline on the master detail page - but now I am developing a standalone page.

Answer 1

You'll want a string to hold the resulting output:

public String locations { get; set; }

Inside the function where you want to populate the data, you can just do the following:

List<List<Object>> output = new List<List<Object>>();
for(Location__c record: [SELECT Lat__c, Long__c, Street__c, City__c FROM Location__c]) {
    output.add(new List<Object> { record.Lat__c, record.Long__c, record.Street__c+', '+record.City__c});
}
locations = JSON.serialize(output);

Answer 2

I have worked around my original problem using a remote action. This gets the information I required using a query, and then returns a list of Tree__c objects. I then iterate over this list and add them to the map as markers.

VisualForce Page

Additional Code added to JavaScript, this calls the remote action, and populates the DemoLocationData list with the results

function getData(){
      TreeMapMainController.getTreeCoordinates(function(result,event){
        DemoLocationData = result;
        initialize()
    });

I also had to modify the creation of the markers loop

     for (var i=0, l=DemoLocationData.length; i<l; i++     )
            {
                // the for..in statement should be use with caution, and its not intented to be used with an array. You should a for loop instead! 

                var p = DemoLocationData[i];
                var latlng = new google.maps.LatLng(p.Geo_Location__Latitude__s, p.Geo_Location__Longitude__s);
                bounds.extend(latlng);

                var marker = new google.maps.Marker({

                    position: latlng,
                    map: map,
                    icon: image,
                    title: p.Name
                });
}

Apex Controller Code

public with sharing class TreeMapMainController {


       private ApexPages.StandardController controller;
 @RemoteAction
 public static list<Tree__c> getTreeCoordinates()
 {
    return [SELECT Id, Name, Geo_Location__Latitude__s, Geo_Location__Longitude__s, Height__c FROM Tree__c];
 }

  public TreeMapMainController (ApexPages.StandardController controller) {
        this.controller = controller;

  }


}

Answer 3

You can build it as a variable in your controller.

String locationData = '[';
for (Location__c loc: [SELECT Lat__c, Long__c, St__c, City__c FROM Location__c])
{
  locationData += '[' + loc.Lat__c + ', ' + loc.Lon__c + ', "' + St__c + ', ' + City__c + '" ],';
}
locationData = locationData.substring(0, locationData.length() -1) + ']';

Page:

var demoLocationData = {!locationData};

You might need to tweak it a little but this should be pretty close to what you want.