Question

I displaying the page using load method which has a Map.
The problem is page is loaded but in the map div displays a grey color screen.
When i refresh a page the map is loaded.I call the map function in document ready function too. but no use.

My code is

<div class="public-view" id="map_canvass">
<script type="text/javascript">
// OnLoad function ...
initialize();
function initialize() {
    var fenway = new google.maps.LatLng(<?php echo $propertyValues->lat; ?>, <?php echo $propertyValues->lng; ?>);
    var mapOptions = {
        center: fenway,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvass"), mapOptions);
    var circleOptions = {
        center: fenway,
        map: map,
        strokeColor: "#BB0A68",
        strokeOpacity: 0.1,
        fillColor: "#BB0A68",
        fillOpacity: 0.35,
        radius: 200
    }
    var circle = new google.maps.Circle(circleOptions);
    google.maps.event.trigger(map, 'resize');
}
</script>
</div>

Answer 1

You need to call initialize() after you know google.maps has been loaded. Your code above will likely call initialize before google.maps has been loaded. It works the second time a page refresh because it has been cached. jQuery’s document ready function is not 100% reliable either.

This example from the Google Maps API docs shows you the best way of doing it:

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