Hi all,

google maps shows blank page.

page:

<apex:page Controller="AccountList" 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="{!objAccounts}" var="loc" id="addressesId">
                title_content.push("Name: "+"{!loc.Name}"+" \nClick for more Detail");                
                address.push("{!loc.BillingStreet}, {!loc.BillingCity},
                +"{!loc.BillingPostalCode},{!loc.BillingCountry}");
                popup_content.push("<b>Account Name: {!loc.Name}
                +"<br/>Street: {!loc.BillingStreet}"
                +"<br/>City: {!loc.BillingCity}<br/>Postal Code: {!loc.BillingPostalCode}"+
                +"<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: getMapIconUrl(position+1),
                        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(markerNumber){
            if(markerNumber > 21){
                markerNumber = markerNumber%20;
            }                   
            var mapIconUrl = "{!URLFOR($Resource.GoogleMarkers, 'GoogleMark/1.png')}";
            var newIcon = markerNumber+'.png';
            mapIconUrl = mapIconUrl.replace('1.png',newIcon);
            return mapIconUrl;
        }        
    </script> 
    <apex:pageMessages />
    <div id="map" class="roundCornerCss"></div>  
    <script>
         initialize();
    </script>
</apex:page>