0

I need to populate a map on visualforce page for the custom object records. I use Javascript Remoting method to get data from the controller and then on basis of the records I create addresses.

Once the data is populated, I use the google maps api to get the lat/lng to show markers, and then show related record data on the Infowindow. However, at the time I load my record page just few markers are shown (12 out of 300 records).

Visualforce Page:

  <apex:page Controller="DoorKnockingController">

  <head>
        <style type="text/css">
        html { height: 50% }
       body { height: 50%; margin: 0; padding: 0 }
        #map-canvas { height: 50% }
     </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=""></script>
  <script>
   var map;

    Visualforce.remoting.timeout = 120000;

     var recordid='{!$currentPage.parameters.id}';

 function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(37.762324 , -122.163301),
    zoom: 12
    };
   loadHotels();
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

 }

 function loadHotels() {

  var geocoder = new google.maps.Geocoder();
  var address = "";
  var latitude , longitude ,id , name , street;


 Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.DoorKnockingController.getAddressList}',
        recordid, 
        function(result, event){

        console.log('no. of records : '+result.length);
            if (event.status) {               
            for (var i=0; i< result.length; i++) {
                 id = result[i].Id;
                 name = result[i].Name;
                 street = result[i].Address_Street__c;
                var city = result[i].City__c;
                var country = result[i].Country__c;
                var State = result[i].State__c;
                var postalCode = result[i].Post_Code__c;
                address = street +", "+ postalCode;  
                console.log(address);  
                geocoder.geocode({ 'address': address}, function(results, status) {

                if(results == null){

                addMarker(12345, null , 37.762324 , -122.163301);

                }else{

                  for(var i =0 ; i < results.length ; i++){

                        if (status == google.maps.GeocoderStatus.OK) {
                            latitude = results[i].geometry.location.lat();
                            longitude = results[i].geometry.location.lng();
                            map.setCenter(results[0].geometry.location);                                                          
                            addMarker(12345, result[i].Address_Street__c , latitude , longitude);
                            } 
                           }
                         }
                        });               


                   }
                } else if (event.type === 'exception') {
                document.getElementById("responseErrors").innerHTML = 
                    event.message + "<br/>\n<pre>" + event.where + "</pre>";
            } else {
                document.getElementById("responseErrors").innerHTML = event.message;
            }
        }, 
        { buffer: false, escape: true, timeout: 120000 }
    );

   }

  function addMarker(id, name, lat, lng) {
   var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat , lng),
        map: map,
        title: name
});

marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
}

    var contentString = '<div id="content">'+          
        '<h5 id="name" class="firstHeading">Name</h5></br>'+
        '<h5 id="address" class="firstHeading">Address Street</h5></br>'+
        '<h5 id="city" class="firstHeading">City</h5></br>'+         
        '<select id="firstHeading" class="firstHeading">'+
        '<option>&nbsp;&mdash;&nbsp;select an article&nbsp;&mdash;&nbsp;        </option></select></br>'+
        '</div>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

  google.maps.event.addDomListener(window, 'load', initialize);

     </script>
  <style>
 #map-canvas {
   font-family: Arial;
    font-size:12px;
  line-height:normal !important;
   height:500px;
   background:transparent;
    }
 </style>
     </head>
 <body>
<div id="map-canvas"/>
   </body>

   </apex:page>
0

As I recall, Google maps API restricts api invocations (for free account) to a defined limit per day / per server. Also, if there is a limit on no. of requests which can be sent in a short span of time.

A better approach will be to conert address to location (lat/ long) when the record is saved (using triggers). So, when your page loads, it can simply make use of the co-ordinates to display locations on google map.

Refer to Google Maps API FAQ to know more about these limits https://developers.google.com/maps/faq

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.