Hi All

I have created a google map to display more than 100 Account address in a visualforce page. But the problem is when i  tab it display blank page. Can anyone help me to reslove this issue. What i did a mistake here?

This is My Controller

public class AssetMapController
{
public List<Account> AllAddreess {get;set;}
public AssetMapController()
{

AllAddreess = [select id,Name,BillingStreet,BillingCity,BillingState,BillingCountry from Account];
}
}


This my Visualforce Page




 <apex:page controller = "AssetMapController" sidebar = "false">
 <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <style>    
        #map {
            font-family: Arial;
            font-size:12px;
            line-height:normal !important;
            height:400px;        
            padding: 20px;
        }       
        .roundCornerCss{ 
            /* outer shadows  (note the rgba is red, green, blue, alpha) */
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
            -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
            
            /* rounded corners */
            -webkit-border-radius: 12px;
            -moz-border-radius: 7px; 
            border-radius: 7px;
            
            /* gradients */
            background: -webkit-gradient(linear, left top, left bottom, 
            color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5)); 
            background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); 
        }   
    </style>
    <script type="text/javascript">                   
        var geocoder;
        var map;
        var infowindow = new google.maps.InfoWindow();
        var places = [];
        var title_content = new Array();                    
        var popup_content = new Array();                    
        var address = new Array();
        var address_position = 0;                    
        var timeout = 600;
        function initialize(){
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(29.01, 77.38);
            var myOptions = {
              zoom: 2,
              center: latlng,
              mapTypeId: 'roadmap'
            } 
            <apex:repeat value="{!AllAddreess}" var="loc" >
                title_content.push("Name: "+"{!loc.Name}"+" \nClick for more Detail");                 
                address.push("{!loc.BillingStreet}, {!loc.BillingCity}, 
                +"{!loc.BillingState},{!loc.BillingCountry}");
                popup_content.push("<b>Account Name: {!loc.Name}
                +"<br/>Street: {!loc.BillingStreet}"
                +"<br/>City: {!loc.BillingCity}<br/>Postal State: {!loc.BillingState}"+
                +"<br/>Country: {!loc.BillingCountry }</b>");                                                    
            </apex:repeat>    
            map = new google.maps.Map(document.getElementById("map"), myOptions);
            addMarker(address_position);
        }        
        function addMarker(position){
            geocoder.geocode({'address': address[position]}, function(results, status){
                if (status == google.maps.GeocoderStatus.OK) {
                    places[position] = results[0].geometry.location;                                    
                    var marker = new google.maps.Marker({
                        position: places[position],
                        title:title_content[position],
                        icon: marker.setIcon('nostarch-logo.png', [27,31]);
                        map: map
                    });
        
                    google.maps.event.addListener(marker, 'click', function() {
                        if (!infowindow) {
                            infowindow = new google.maps.InfoWindow();
                        }
                        infowindow.setContent(popup_content[position]);
                        infowindow.open(map, marker);
                    });
                }
                else{
                    if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT){
                        setTimeout(function() { addMarker(position); }, (timeout * 3));
                    }
                }
                address_position++;
                if (address_position < address.length){
                    setTimeout(function() { addMarker(address_position); }, (timeout));
                }
            });
        }
        /*
            @Description: To Put diffren color image on Google Map
            @Param: Marker Number to Add on map.
        */
        function getMapIconUrl(){
            var mapIconUrl = "{!$Resource.GoogleMarker}";
            return mapIconUrl;
        }         
    </script>  
    <apex:pageMessages />
    <div id="map" class="roundCornerCss"></div>   
    <script>
         initialize();
    </script>
    </apex:page>