google map not work properly for a big group of accounts

Script to show Account in map is not showing all recods when there is a large number of Accounts. Can anybody help me?
Code :
<apex:page standardController="Account" sidebar="false" recordSetVar="Accounts">

    <html>
        <head>
            <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
            <style type="text/css">
                html { width:100%;height: 100% }
                body { width:100%;height: 100%; margin: 0; padding: 0 }
                #map-canvas { width:1000;height:1000;margin:0 auto; }
                div{vertical-align:middle;}
                .wrapper{max-width:1200px;margin:auto;}
                .legend-container{width:200px;margin-left:5px;display:inline-block}
                .legend-tile{color:#777;font-size:10px;padding:5px; width:195px; max-height:50px; display:inline-block; margin:10px; border:4px solid; border-radius:4px;}
                .legend-tile img{ width:20px;}
            </style>
            <script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3&key=AIzaSyDD1LnFxjvmx06ik9HlRtk5jW2wPY_XvPY&sensor=false&callback=initialize"></script>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            <script>

                function initialize(){
                    var map = new google.maps.Map(document.getElementById('map_canvas'), {
                        zoom: 2,
                        minZoom:2,
                        center: new google.maps.LatLng(43.253205,-80.480347),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    });
                    var infowindow = new google.maps.InfoWindow();
                    var geocoder = new google.maps.Geocoder();
                    var marker, i=0;
                    var rating;
                    var type;
                    var markercolor;
                    var address="";
                    var shippingstreet;
                    var shippingcity;
                    var shippingstate;
                    var shippingpostalcode;
                    var shippingcountry;

                    <apex:repeat value="{!Accounts}" var="accnt">
                        rating = "{!accnt.Active__c}";
                        type = "{!accnt.Type}";
                        i = i+1;
                        alert("{!accnt.BillingLatitude}");
                        alert("{!accnt.BillingLongitude}");

                        if( rating == "true" && type == "Competitor/Chemical Supplier"){
                            markercolor = "{!URLFOR($Resource.VianceMapPin,'VianceMap/red.png')}";
                        }
                        else if ( rating == "true" && type == "Treater"){
                            markercolor = "{!URLFOR($Resource.VianceMapPin,'VianceMap/yellow.png')}";
                        }
                        else if( rating == "false" && type == "Competitor/Chemical Supplier"){
                            markercolor = "{!URLFOR($Resource.VianceMapPin,'VianceMap/blue.png')}";
                        }
                        else if ( rating == "false" && type == "Treater"){
                            markercolor = "{!URLFOR($Resource.VianceMapPin,'VianceMap/green.png')}";
                        }

                        shippingstreet = "{!accnt.ShippingStreet}";
                        shippingcity = "{!accnt.ShippingCity}";
                        shippingstate = "{!accnt.ShippingState}";
                        shippingpostalcode = "{!accnt.ShippingPostalCode}";
                        shippingcountry = "{!accnt.ShippingCountry}";

                        if(shippingstreet != "undefined"){
                            address = address + shippingstreet +",";
                        }
                        if(shippingcity != "undefined"){
                            address = address + shippingcity +",";
                        }
                        if(shippingstate != "undefined"){
                            address = address + shippingstate +",";
                        }
                        if(shippingpostalcode != "undefined"){
                            address = address + shippingpostalcode +",";
                        }
                        if(shippingcountry != "undefined"){
                            address = address + shippingcountry;
                        }


                        geocodeAddress("{!accnt.Name}, "+address ,markercolor,i);
                        setInterval(geocodeAddress, 2000);
                        address = "";
                    </apex:repeat>
                    function geocodeAddress(location,markercolor,i) {
                        //alert(location);

                        geocoder.geocode( { 'address': location}, function(results, status) {
                            //alert(status);
                            if (status == google.maps.GeocoderStatus.OK) {
                                //alert(results[0].geometry.location);
                                map.setCenter(results[0].geometry.location);
                                createMarker(results[0].geometry.location,"<b>"+location+"</b>",markercolor);
                            }
                            else
                            {
                                //alert("some problem in geocode" + status);
                                if (status == "OVER_QUERY_LIMIT"){
                                    //    sleep(1000);
                                    //startTimer();
                                   // setTimeout(function(){ geocodeAddress(location,markercolor,i),2000 });
                                }
                            }
                        });
                    }

                    function createMarker(latlng,html,markercolor){
                        var marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            icon: new google.maps.MarkerImage(markercolor)
                        });

                        google.maps.event.addListener(marker, 'mouseover', function() {
                            infowindow.setContent(html);
                            infowindow.open(map, marker);
                        });

                        google.maps.event.addListener(marker, 'mouseout', function() {
                            infowindow.close();
                        });
                    }
                }
            </script>
        </head>
        <body style="margin:0px; padding:0px;">
          <div class="wrapper">
            <div id="map_canvas" style="width: 990px; height: 400px; display:inline-block;"/>
            <script>initialize();</script>
            <div class="legend-container">
                <div class="legend-tile" style="border-color:#EDB6B6;">
                    <div style="display:inline-block;"><apex:image url="{!URLFOR($Resource.VianceMapPin,'VianceMap/red.png')}"/></div><div style="display:inline-block;/*width:213px;*/">Active Competitor/Chemical Supplier</div>
                </div>
                <div class="legend-tile" style="border-color:#BFD5EC;">
                    <div style="display:inline-block;"><apex:image url="{!URLFOR($Resource.VianceMapPin,'VianceMap/blue.png')}"/></div><div style="display:inline-block;/*width:213px;*/">Inactive Competitor/Chemical Supplier</div>
                 </div>
                <div class="legend-tile" style="border-color:#F1F5A8;">
                    <div style="display:inline-block;"><apex:image url="{!URLFOR($Resource.VianceMapPin,'VianceMap/yellow.png')}"/></div><div style="display:inline-block;/*width:213px;*/">Active Treater</div>
                 </div>
                <div class="legend-tile" style="border-color:#CCEBAF;">
                    <div style="display:inline-block;"><apex:image url="{!URLFOR($Resource.VianceMapPin,'VianceMap/green.png')}"/></div><div style="display:inline-block;/*width:213px;*/">Inactive Treater</div>
                </div>
            </div>
           </div>
        </body>
    </html>

</apex:page>

December 1, 2015
·
Answer
·
Like
0
·
Follow
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

google map not work properly for a big group of accounts

You need to sign in to do that.