Salesforce.com Visualforce Google Maps

Question

Hi,

I need some help and I think this post would help me but I am very new to Google maps and Visualforce. answered by eyescream see post http://stackoverflow.com/questions/3122038/how-do-i-integrate-salesforce-with-google-maps.

My problem is very similar but I don't need to search for the records to plot they are available as a related list.

I have two custom objects called Wildlife__c and Sighting__c.

Sightings has a lookup to Wildlife so you can record a sighting of a particular animal. The sightings object has two custom fields long__c and lat__c.

I would like a map on the Wildlife page that looks through and puts markers on a map for all the different sightings. The map will simply be added as a component of the Wildlife page.

I can on the sightings object generate a map with one sighting, but I can replicated this on the wildlife object. I think I need to create an array but not sure how.

Many thanks

Ross

Answer 1

You need to figure out the ID of html table which contains your related list. You could use a Firefox plugin for that (I prefer Firebug, but Web Developer Toolbar is also cool). For Internet Explorer... I guess the "debugger;" statement put somewhere in JavaScript would work if you have Visual Studio or some IE plugin installed.

Whatever the means, you should be able to pinpoint to HTML similar to this:

<div class="pbBody" id="0017000000Lg8Wg_RelatedOpportunityList_body">
    <table class="list" border="0" cellpadding="0" cellspacing="0">
    ...

Now have a look at JavaScript in my answer, especially this part:

var htmlTable = document.getElementById('j_id0:j_id2:j_id7:accountTable').getElementsByTagName("tbody")[0].getElementsByTagName("tr");
for (var i = 0; i < htmlTable.length; ++i) {
    names.push(htmlTable[i].getElementsByTagName("td")[0]);

    // We need to sanitize addresses a bit (remove newlines and extra spaces).
    var address = htmlTable[i].getElementsByTagName("td")[1].innerHTML;
    addresses.push(address.replace(/\n/g, "").replace(/^\s+/,"").replace(/\s+$/,""));
}

Insert the ID you have found into first line. Figure out which <td> cell contains your latitude and longitude information. You can again find it out with your debugger or experiment by putting alert() box inside the loop.

Last part is that you don't need to geocode your addresses, you already have LAT and LONG. So skip directly to function finalizeDrawingMap() and reuse it's content. You can skip the part that tries to guess best zoom (or even better - check Google Maps API if there's better trick for it; that was quick and ugly hack). The core of what you need lies in

for(i=0;i < coordinates.length; i++){
    markers.push(new google.maps.Marker({ position: coordinates[i], map: map, title: names[i].getElementsByTagName("a")[0].innerHTML, zIndex:i}));
    ...
}

Good luck & welcome to StackOverflow :)