Google Maps on my Visual Force page doesn't show all markers as the number of results fetched

https://stackoverflow.com/questions/21422125

04-10-2022
|

質問

I am trying to develop a visual force page which shows "Program Locations". On page load it fetches all the programs and displays on the map using a marker. There are some filters available to reduce the result set and view specific programs. Everything works well except for the fact when page loads, my results table just below the Google maps div shows 16 record which is correct but my map shows only 11 marker definitely incorrect. I did put an alert on line just after creating geocoder variable and if I go through all the alerts slowly the same page shows 16 markers. I thought it needs some delay function in between but even that didn't help. Ca somebody comment me where am I going wrong?

<apex:page sidebar="false" controller="Creative_ProgramsMap" tabStyle="Program__c" id="page" action="{!find}">
<head>
<style>
    div #map_canvas { height: 450px; }
    div #pageLoadMap { height: 650px;}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<script src="/soap/ajax/15.0/connection.js" type="text/javascript"></script>
<script src="/soap/ajax/15.0/apex.js" type="text/javascript"></script>
<style>
.message {
background-color: #ffc;
border-style: solid;
border-width: 1px;
color: #000;
padding: 6px 8px 6px 6px;
margin: 4px 20px;
background-image: url(/img/msg_icons/error32.png);
background-position: 10px center;
background-repeat: no-repeat;
width: 520px;
color: red;
font-weight: strong;
min-height: 30px;
margin-bottom: 20px;
padding-left: 60px;
}
</style>
<table id="contents" border="0" width="100%">
<td style= "border-style:solid; border-color:black;" width="18%">
    <div align="center">
         <br/>
         <font style="text-align:center; font-weight:bold; font-style:italic; color:green; font-size:18px">Filters</font>
    </div>
    <apex:form id="form">
    <br/>
    <font style="font-weight:bold; font-style:italic;">Service</font>
    <br/>
    <apex:selectCheckboxes layout="pageDirection" title="Service" value="{!services}">
        <apex:selectOptions value="{!service}"/>
    </apex:selectCheckboxes>
    <br/>
    <font style="font-weight:bold; font-style:italic;">Category</font>
    <br/>
    <apex:selectCheckboxes layout="pageDirection" title="Category" value="{!categories}">
        <apex:selectOptions value="{!category}"/>
    </apex:selectCheckboxes>
    <br/>
    <font style="font-weight:bold; font-style:italic;">Status</font>
    <br/>
    <apex:selectCheckboxes layout="pageDirection" title="Status" value="{!statuses}">
        <apex:selectOptions value="{!status}"/>
    </apex:selectCheckboxes>
    <br/>
    <font style="font-weight:bold; font-style:italic;">Fiscal Year</font>
    <br/>
    <apex:selectCheckboxes layout="pageDirection" title="Fiscal Year" value="{!fiscalYears}">
        <apex:selectOptions value="{!fiscalYear}"/>
    </apex:selectCheckboxes>   
    <div align="center">
         <apex:commandButton id="btnShowPrograms" value="Show Programs" title="Populates the map based on the filteration criteria." action="{!find}" />
         <br/><br/>
    </div>
    </apex:form>
</td>
<td style= "border-style:solid; border-color:black;">   
  <div align="center"><apex:messages styleClass="message" /></div>
        <apex:sectionHeader title="Portfolio" subtitle="Defense Centers of Excellence" />
        <div align="center">
            <apex:outputLabel style="font-size:12px; color:orange; font-style:italic;">Only those programs with valid Location and address show up.</apex:outputLabel>
            <br />
            <apex:outputLabel style="font-size:12px; color:grey; font-style:italic;">1 pin per location.</apex:outputLabel>
            <br/><br/>
        </div>
        <apex:form id="frmResults">
            <div id="pageLoadMap" style="border:6px solid; border-color:#BDBDBD"></div>
            <!--  Display Results  --> 
            <apex:pageBlock title="Found {!programs.size} Program(s)..." rendered="{!NOT(ISNULL(programs)) && programs.size > 0}" id="resultsBlock">
            <apex:outputPanel id="mapResults">
                <apex:pageBlockSection title="Programs on Map" columns="1" id="mapSection">
                    <div id="map_canvas"></div>
                </apex:pageBlockSection>    
            </apex:outputPanel>  
            <apex:pageBlockSection columns="1" id="tableSection">
     <div align="center">
        <br/>
        <font style="text-align:center; font-weight:bold; font-style:italic; color:green; font-size:18px">List of Programs by Criteria</font>
         <br/><br/>
    </div>
    <apex:outputPanel id="tblResults">
    <div id="tableResults" style="overflow:auto; height:200px;">
           <apex:pageBlockTable style="border-style:solid; border-color:black;" value="{!programs}" var="program" id="programs">
                    <apex:column headerValue="{!$ObjectType.Program__c.fields.Name.label}">
                       {!program.Name}
                    </apex:column>
                    <apex:column headerValue="Program Name">
                        <apex:outputLink value="../{!program.Id}">{!program.Program_Name__c}</apex:outputLink>
                    </apex:column>                            
                    <apex:column headerValue="Workflow Status">
                        {!program.Workflow_Status__c} 
                    </apex:column>
                    <apex:column headerValue="Branch of Service">
                        {!program.Branch_of_Service__c}
                    </apex:column>
                        <apex:column headerValue="Primary Program Category">
                    {!program.Primary_Program_Category__c} 
                        </apex:column>
              </apex:pageBlockTable>     
 </div>
    </apex:outputPanel>           
     </apex:pageBlockSection>
            </apex:pageBlock>
        </apex:form>
    </td>
</table>
<script type="text/javascript">
window.onload = initialize();
var infos = [];
var map;

function initialize()
{
drawMapOnLoad();
//alert('Javascript Started');
var programs;                
var coords;            
var requestCounter;
var markers;       
var balloon;       
loadMap();
}

function drawMapOnLoad()
   {
       var mapOptions = {
              center: new google.maps.LatLng(39.810556, -98.556111),
              zoom: 4,
              mapTypeId: google.maps.MapTypeId.ROADMAP
       }
       map = new google.maps.Map(document.getElementById("pageLoadMap"), mapOptions);
   }

function loadMap()
{
programs = {!contactsJson};
coords = [];
requestCounter = 0;
markers = [];
geocodeClientSide();
}

function geocodeClientSide() 
{
//alert('Programs Length : ' + programs.length);
if(programs.length > 0)
{
    for(var i = 0; i < programs.length; i++) {
        ++requestCounter;
        var address = programs[i].Program_Location__r.BillingStreet + ' ' + programs[i].Program_Location__r.BillingCity + ' '
                        + programs[i].Program_Location__r.BillingState + ' ' + programs[i].Program_Location__r.BillingCountry + ' '
                        + programs[i].Program_Location__r.BillingPostalCode;
        var geocoder = new google.maps.Geocoder();
        alert('Program : ' + i);
            geocoder.geocode({'address':address}, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    coords.push(results[0].geometry.location);
                } 
                if(--requestCounter == 0) {
                    drawMap();
                }
            });
        }
}
}
}

function drawMap(){
//alert('Coords length is ' + coords.length);
var divPageLoadMap = document.getElementById("pageLoadMap");
divPageLoadMap.style.display = 'none';
var mapOptions = {
    //center: coords[0],
    center: new google.maps.LatLng(39.810556, -98.556111),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),  mapOptions);
if(coords.length > 0)
     {
         drawMarker();
     }
}     

function drawMarker()
{
for(var i = 0; i < coords.length; i++){
     var mouseOverContentString = 'Program ID : ' + programs[i].Name + '\n' +
                               'Program Name : ' + programs[i].Program_Name__c + '\n' +
                               'Branch of Service : ' + programs[i].Branch_of_Service__c + '\n' +
                               'Location Name : ' + programs[i].Program_Location__r.Name;
  var marker = new google.maps.Marker({map: map, position: coords[i], title:mouseOverContentString , zIndex:i});
  markers.push(marker);

 var infoWindowContentString = '<div id="content" style="width:200px; height:150px">' +
                      '<h1 id="programName">' + programs[i].Name + '</h1>' +
                      '<p>Program Name : <i>' + programs[i].Program_Name__c + '</i></p>' +
                      '<p>Program Co-ordinator : <i>' + programs[i].ProgramCoordinator__c + '</i></p>' +
                      '<p>Program Location : <i>' + programs[i].Program_Location__r.Name + '</i></p>' + '</div>'; 
  var  infoWindow = new google.maps.InfoWindow();
  google.maps.event.addListener(marker,'click', (function(marker,infoWindowContentString,infoWindow){ 
    return function() {
        //map.setZoom(4);
    //map.setCenter(marker.getPosition());
       /* close the previous info-window */
       closeInfos();
   infoWindow.setContent(infoWindowContentString);
   infoWindow.open(map,marker);infos[0]=infoWindow;    
};
})(marker,infoWindowContentString,infoWindow)); 
}
}

function closeInfos(){
if(infos.length > 0){
/* detach the info-window from the marker ... undocumented in the API docs */
infos[0].set("marker", null);
/* and close it */
infos[0].close();
/* blank the array */
infos.length = 0;
}
}
</script>
</apex:page>

解決

You are running into the Geocoder error OVER_QUERY_LIMIT (from experience you can geocode approximately 11 addresses quickly before running into the rate limit). To verify add an else to the status check:

        geocoder.geocode({'address':address}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                coords.push(results[0].geometry.location);
            } else alert("Geocode failed, status = "+status);

Options:

geocode your addresses offline and use the coordinates to display the markers rather than the addresses
see this question on SO for a way to throttle the geocode requests

他のヒント

Following is a good article for anyone developing something like this.

https://bryandf11.wordpress.com/2011/08/22/geocoding-in-apex-triggers-callouts-and-future-methods/

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow