Sign Up ›

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

displaying a earth map and highlighting the location when clicked on particular location

hi,

 I have a requirement to display a locations on the map based on the field called locations in a custom object.

some one please help me how can i dsplay a map on vfpage with pointing locations.when i click on each location the description about that location has to be displayed.when i click on a location it has to navigate me to other site like wikipedia o somethind..

 

plz help me

thank you

nylonnylon

Hi,

Have you checked this AppExchange app?

http://appexchange.salesforce.com/listingDetail?listingId=a0N300000016d25EAA
Sridhar BonagiriSridhar Bonagiri

Hi, 

 

To display a map in a VFP you need to use either google maps or yahoo map in the VFP and need to pass parameters to display the locations in that map.
Kalle KalifKalle Kalif

Here is the complete code i am using for more or less the same thing:

 

<apex:page standardController="Daily__c">

<head>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() {

  var mylat = "{!Daily__c.LatDecimal__c}";
  var mylon = "{!Daily__c.LonDecimal__c}";
  var mylatlng = new google.maps.LatLng(mylat,mylon); 
  
  var myOptions = {
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: mylatlng,
    mapTypeControl: false
  }
  
  var map;
  var marker;

    //get info for infowindow
      var Dname = "{!Daily__c.Dname__c}";
      var date = "{!Daily__c.Report_Date__c}";

      


    //create infowindow
      var infowindow = new google.maps.InfoWindow({
      content: "<b>Name {!Daily__c.Dname__c}</b><br>Report datetime: {!Daily__c.Report_Date__c}"
  });

    //create map
      map = new google.maps.Map(document.getElementById("map"), myOptions);
  
    //create marker
      marker = new google.maps.Marker({
      position: mylatlng,
      map: map,
      title: "{!Daily__c.Dname__c}"
    });
  
    //add listeners
      google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
           google.maps.event.addListener(infowindow, 'closeclick', function() {
               map.setCenter(marker.getPosition()); 
     });
        

  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:250px;
  background:transparent;
}
</style>

</head>
 
<body>
<div id="map"></div> 
</body> 
</apex:page>

 

 

Just change the relevant fields to what you need, alter the content of the message box when for when you click the location, and add it as a visualforce page to your object's tab. Hope it helps!