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
snowMonkeysnowMonkey 

VF Page showing multiple markers on a google map

I am trying to add multiple markers to my google maps on my positions layout where you have a 1 to many with many addresses which i have to get plotted on the map. I tried the same Google api calls on an HTML page with JS calls and it worked.  When i am hardcoding the object names in my page and then call ,without the APEX :REPEAT tag it works again. dont know what is wrong. can someone look into this and tell if something stands out

 

<apex:page standardcontroller="Position__c">
<apex:pageBlock >
<head>
This map shows the locations of candidates who have applied for the {!Position__c.Name} position.....

<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">

   function initialize()
   {
        var myCenter = new google.maps.LatLng(40.825612,-74.402413);
        var myOptions = { center: myCenter, zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP };

        var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
        var geocoder = new google.maps.Geocoder();

        <apex:repeat var="ja" value="{!Position__c.nanlabs__Job_Applications__r}">
          counter++;
          var address = "{!ja.nanlabs__Candidate_Number__r.Street__c}, {!ja.nanlabs__Candidate_Number__r.City__c}, {!ja.nanlabs__Candidate_Number__r.State_Province__c}";
          geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK && results.length) {
              if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {      
               map.setCenter(results[0].geometry.location);
                marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                   // title: "{!ja.nanlabs__Candidate_Number__r.First_Name__c} + ' ' + {!ja.nanlabs__Candidate_Number__r.Last_Name__c}"
                });
                marker.setmap(map);
              }      
            }
          });
        </apex:repeat>
        
         if(counter == 0) {
         // Display map of US if no Candidates found
            var myPoint = new YGeoPoint(40,-95);
            map.drawZoomAndCenter(myPoint, 14);
            alert("There are no candidates for this position to map.");
        }
    }
  google.maps.event.addDomListener(window, 'load', initialize );
</script>
</head>

<body>
<div id="googleMap" style="width:100%;height:400px;"></div>
</body>
</apex:pageBlock>
</apex:page>

arizonaarizona

Hi snowMonkey,

 

I think your map is being created before the view state has the data you want to map.

In your initialization code create the map

 

Create another function that creates a pin

 

Something like this.

 function addPin(street, city, state){
  geocoder.geocode( ...
  Put your logic in this script

 

Now loop over your list passing the function created above that creates a single pin .

after your <body> tag add this.

 

<apex:repeat var="ja" value="{!Position__c.nanlabs__Job_Applications__r}">
  <script>
    addPn({!ja.nanlabs__Candidate_Number__r.Street__c}, {!ja.nanlabs__Candidate_Number__r.City__c}, {!ja.nanlabs__Candidate_Number__r.State_Province__c});
</apex:repeat>

 

There another issue with your code.  You are setting the center of the map on each pin. You will need to figure out a way to find the center of all your pins.

 

I hope this helps.