+ Start a Discussion
gnevegneve 

Multi-pin visualforce map

I have a custom child object with a master-detail relationship to the Opportunity standard object. I have visualforce component to display a map with a pin for each child record related to the opportunity. The below code will display all of the addresses, but only the first time I load the opportunity record. If I refresh the page, the map only displays one of the addresses. 

Any help is appreciated. 
<apex:page standardController="Opportunity">

<apex:pageBlock >
<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(37.0902, -95.7129);
        var myOptions = { center: myCenter, zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP };

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

        <apex:repeat var="Prop" value="{!Opportunity.Portfolio_Properties__r}">
          counter++;
          var address = "{!Prop.Property_Street_Address__c}, {!Prop.Property_City__c}, {!Prop.Property_State__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: "{!Prop.Name}"
                });
                marker.setmap(map);
              }      
            } 
          });
        </apex:repeat>
        
         if(counter == 0) {
         // Display map of US if no Candidates found
            alert("There are no properties to map.");
        }
    }
  google.maps.event.addDomListener(window, 'load', initialize );
</script>

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