how to display all accounts on google maps

Question

i integrated google maps in salesforce and it works fine. when i select an account it shows me the location.. Now i want to create a new page where all the accounts will be displayed in the same map. I have been trying some codes but still not working for me. I am new in salesforce and apex and i couldn't manage to make it. anyone can help please ? Here is my code

<apex:page standardController="Account">
    <!-- Import Necessary Jquery js File and StyleSheets-->
    <apex:includeScript value="https://maps.googleapis.com/maps/api/js?sensor=false"/>
    <apex:includeScript value="{!URLFOR($Resource.jQuery_BlogForce9_162, 'js/jquery-1.6.2.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQuery_BlogForce9_162, 'js/jquery-ui-1.8.16.custom.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jqPlugin, '/jquery.blockUI.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQuery_BlogForce9_162, 'css/ui-lightness/jquery-ui-1.8.16.custom.css')}"/>
    <script>
          var map,geocoder,infowindow;
          var latLngs = [];
          $j = jQuery.noConflict();  
          $j(document).ready(function(){
              initialize();
          });

         function initialize() {
            geocoder = new google.maps.Geocoder();
            //initial cordinates for map init
            var latlng = new google.maps.LatLng(37.09024, -95.712891);
            var myOptions = {
                zoom: 4,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            //load the map
            map = new google.maps.Map($j('#map')[0], myOptions);
            codeAddress();

         }

         /*This function codes the address using the Billing Address in the Acoount*/
         function codeAddress(){
              //prepare a string for geocoding
              var address = '{!JSENCODE(Account.BillingStreet)},{!JSENCODE(Account.BillingCity)},{!JSENCODE(Account.BillingCountry)},{!JSENCODE(Account.BillingPostalCode)}';
              console.log(address);
              //geocode the address
              geocoder.geocode( { 'address': address }, function(results, status) {
                 //if it is a success
                  if (status == google.maps.GeocoderStatus.OK) {
                      var location = results[0].geometry.location;
                      var marker=addMarker(location );
                      //attach info window to the marker
                      attachInfoWindow(marker,results[0]);

                  }
                  else {
                      alert(status);
                  }
              }); 
         }

         /*
         *This method adds a marker to the provided location
         **/
         function addMarker(location) {
            marker = new google.maps.Marker({
                    position: location,
                    map: map
                });
               //set the bounds and initial zoom
            var latlngbounds = new google.maps.LatLngBounds();
            latlngbounds.extend(marker.getPosition());
            map.fitBounds(latlngbounds);
            map.setZoom(11);
            return marker;
         }

        //this function shows the address of a marker when it is clicked
        function attachInfoWindow(marker,address){

             google.maps.event.addListener(marker, 'click', function() {
                 if(infowindow!=null)
                    {
                        infowindow.close();
                    }
                //HTML formated string that is used to dispaly info window over the map markers currently showing the name and the formated address

                var contentString = '<div class=" ui-state-active ui-corner-top" style="font-size: 1em; padding: 5px;">Name</div>'
               +'<div class="ui-widget-content ui-corner-bottom" style="font-size: .9em; padding: 15px;">{!Account.Name}</div>'  
               +'<div class=" ui-state-active ui-corner-top" style="font-size: 1em; padding: 5px;">Address</div>'
               +'<div class="ui-widget-content ui-corner-bottom" style="font-size: .9em; padding: 15px;">'+address.formatted_address+'</div>';
                infowindow = new google.maps.InfoWindow({
                    content: contentString
                });
                 infowindow.open(map,marker);
             });
        }

    </script>
    <style>
        #map {

            width:100%;
            height:200px; 

            margin-left:1.5%;
        }
    </style>
    <div id="map" class="ui-widget-content ui-corner-all ui-state-default"></div>
</apex:page>

i found this solution in a forum but i didn't know how to implement it in my code

You need to loop through all accounts in the page and add those to javascript object and use that for population of MAP.

<apex:repeat
> value="{!accs}" var="acc">
>               <script type="text/javascript">
>                 accs.push(["{!acc.Name}","{!acc.BillingStreet}","{!acc.BillingCity}","{!acc.BillingCountry}",""{!TEXT(acc.Latitude__c)}","{!TEXT(acc.Longitude__c)}","{!acc.Id}"]);
>             </script>
>         </apex:repeat>

Thank you very much for your help.

Answer 1

You should get list of your accounts and create markers in for loop.

To get records you can use controller or ajax toolkit. Since you have everything at your page, lets try toolkit.

Create function to pull accounts:

function getAccounts() {
    sforce.connection.sessionId='{!GETSESSIONID()}';
    var query = "Select Name, BillingStreet, BillingCity, BillingCountry ";
        query += "from Account order by LastModifiedDate desc limit 6";
    result = sforce.connection.query(query);
    return result.getArray("records");
}

Wrap codeAddress body with for loop and update address initialization:

function codeAddress() {

    var addresses = getAccounts();

    for (item in addresses) {
        var address = addresses[item].BillingStreet +','+ addresses[item].BillingCity +',';
            address += addresses[item].BillingCountry;
        //var address = '{!JSENCODE(Account.BillingStreet)},...

        //-//-
        } 
}