function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Laytro80Laytro80 

Google Maps

Can anyone point me in the right direction.

 

Background

 

I am working with a non-profit who need to record sightings of animals using GPS coordinates.  I have created a sightings object and have integrated a google map on the page using visualforce which pulls through the GPS data and adds a marker, code below.

 

I now want to show a map of all of the sightings for a particular animal. So I have created a parent object called wildlife which is simply the name of the animal and some other meta data.

 

Problem

 

The sightings object has a lookup to wildlife.  So if you were to lookup an animal on the wildlife object you would see a number of sightings.  I would like a map on the wildlife object that would show all of the related sightings as markers.

 

Code

 

This is the code for the single sightings map on the sightings object.

 

 

<apex:page standardController="Sighting__c">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAARQVi0nDV8_SJqZY8mkksjBQW4dj6q0E-oPzXa2fArCvhLhZBwBSQtm6TiVKHbHEvo8Jcr3_JN01Ubg" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
var address = "{!Sighting__c.Long__c}, {!Sighting__c.Lat__c}";
function initialize() {
if (GBrowserIsCompatible()) {
  map = new GMap2(document.getElementById("map_canvas"));
  map.addControl(new GSmallMapControl());
  map.setMapType(G_HYBRID_MAP);
  geocoder = new GClientGeocoder();
  geocoder.getLatLng(
    address,
    function(point) {
      if (!point) {
        document.getElementById("map_canvas").innerHTML = address + " not found";
      } else {
        map.setCenter(point, 16);
        var marker = new GMarker(point);        
        map.addOverlay(marker);
        marker.bindInfoWindowHtml("{!Sighting__c.Wildlife__r.Name__c} the {!Sighting__c.Wildlife__r.Type__c}<br /> Sighting Number: {!Sighting__c.Name}<br />{!Sighting__c.Date__c}");
      }
    }
  );
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width:100%;height:300px"></div>
</body>
</html>
</apex:page>

 

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
aamDevaamDev

I've had success following this tutorial:

 

Stackoverflow

 

Here are some great resources for Google Map Parameters:

 

Mapki

Infowindows

 

I hope this helps.

 

Adriel

 

All Answers

gtuerkgtuerk

Iterate through an array of sightings to add the markers.  I'd use a physical (terrain) map instead of hybrid as well.  Extend the lat lng bounds as you add the markers and dynamically size the viewport
Laytro80Laytro80

Many thanks for the quick reply.

 

To be honest I am longtime salesforce.com user but just getting to grips with visualforce and APEX.

 

Adding this google map took me quite a bit of time and I relied on tutorials.

 

Can you point me in the right direction in terms of creating an array.

 

Thanks also for the tip on changing to a physical terrain, I will change that no problem.

 

Any post / comments welcome.

 

Cheers

 

Ross
aamDevaamDev

I've had success following this tutorial:

 

Stackoverflow

 

Here are some great resources for Google Map Parameters:

 

Mapki

Infowindows

 

I hope this helps.

 

Adriel

 

This was selected as the best answer
Laytro80Laytro80

Hi,

 

Sorry for the delayed reply have been on holiday.

 

Thanks for sending through I will try to get this working.

 

Thanks

 

Ross