Google Maps not rendering completely on page?

I have a google maps on my page with a search pane I built myself which can be displayed and hidden at will. It covers like lets say 200 pixels of the map on a side. The thing is that when I resize my map or so the area where the pane overlaps is unrendered i.e the map doesn't render there for some reason.

Check out this link

In the Box type in lets say OMDB which is an icao code for an airport and press enter.

The results are shown and you see the pane. Now click on the full screen link and then click on the airports tab to make the panel go away - you see now that part of the m开发者_C百科ap hasn't rendered at all...I have to drag the map around and that only partially renders that area. How can I fix it?

FYI I've run it on Google Chrome, Firefox and IE8 on Windows XP. Is there a way to like force complete rendering of a map or so? This is quite an erratic problem and could it be concerne with my code or is it a host issue? Or does Google just don't like me? :(

EDIT: See the big ugly patch on the side. Its unrendered area where the map should have been rendered as well. No amount of zooming in and panning is helping clear this :(

I'm not able to reproduce the issue you are having, but it looks similar to another issue I've seen with google maps.

It looks like you might be running afoul of the way google maps determines which tiles are in view. It calculates this only once, when the map is loaded into the div the first time, and if the div grows, then not enough map will be drawn. Fortunately, this is easy to deal with. any time the container may have resized, use the checkResize() method on the map instance, and the clipping area will be recomputed from the container's current size.

Yes, you MUST supply a real pixel height and width of the container DIV. This is in fact detailed in the Google API.

By using something like this:

<div id="map_canvas" style="width:500px;height:500px;"></div>

instead of

<div id="map_canvas"></div>

you'll be home free !

As far as I can see it works fine on OS X 10.6.2 in Google Chrome.

http://i33.tinypic.com/sfe3ah.png

Only problem is that Copenhagen Airport is nowhere near the location your application implies. And LAX is in the middle of the ocean ;-)

Edit:
I see your screenshot, and it would appear to me that somehow Google Maps does not render the part of the map that was covered by the search and search results pane, and afterwards the rendering is not triggered correctly upon hiding the search pane.

I haven't been able to find a decent render triggerer in the Google Maps API, but I think you should try something like programatically zooming in and out or moving the center of the map somewhere else and back, in order to maybe force the re-rendering of the map.

Alternatively you could try manually triggering some of the events that you think might set off a rerendering of the map, for example google.maps.event.trigger(map, 'resize').

I know these suggestions feel like a terrible hacking way of making it work, and I am highly unsure whether it would work, but it is my best shot ;-)

In Google Maps V3, the little bit of magic you need is documented here: https://developers.google.com/maps/documentation/javascript/reference#Map under events

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize')

The trick is knowing when to call this which will be situational depending on your code. If you're using Bootstrap 3 Modals, this works beautifully.

$("#modal-map")
    .modal()
    .on("shown.bs.modal", function() {
        google.maps.event.trigger(gmap, 'resize');
    });

Where gmap is the google.maps.Map object you created.

I faced same issue when i tried to load google map in dialog. It was like google map was not rendered properly. so i find out below solution which may be solve your problem.

I have triggered google map resize event after initialize dialog please check below snipped code.

google.maps.event.trigger(map, 'resize', function () {
    // your callback content
});

Example:

I have loaded map by ajax call then initialized dialog and at last triggered google map resize event.

$.ajax({
    url:"map.php",
    type:"POST",
    success:function(data){
        $("#inlineEditForm").html(data);

        $('#inlineEditPopUp').dialog('open');
        google.maps.event.trigger(map, 'resize', function () {
            // your callback content
        });
    }
});

If you are using the jQuery plugin goMap, then you should use:

google.maps.event.trigger($.goMap.map, 'resize');

Although you should wrap this in an event so that it runs when the map is shown. This how i do it in my code :

$(document).on('click', '#mapClicker', 'initmap', function() {
   setTimeout(function() {
         google.maps.event.trigger($.goMap.map, 'resize');
      $.goMap.fitBounds();
   }, 100)
});

I know this question is a bit old, but I just came across a similar problem. However, in my case, I was setting the map to be loaded from the body (for a full screen effect) within an iframe.

Like Jay mentioned on his answer a width and height must be specified which I had not done then.

I changed:

<body style="margin:0;">

to:

<body style="margin:0;width:100%;height:100%">

and now it loads perfectly on Chrome, Firefox and Internet Explorer 10.

Hopefully this helps anyone out there who also came across this problem. You must specify width and height for it to work across different clients.

Regards

I had the same problem and solved it simply by changing the width of the containing div to "px" instead of "%" (e.g width="700px" instead of "80%"). I guess that google can do better size calculation that way... I don't guarantee for this but it helped me

I had this issue and I found the only solution (in my instance) was to trigger the resize inline after the element. I can't say why but I found a thread where somebody also had this solution. (sorry no ref.) My setup was a tad different; it was from a jQueryMobile injected page so the late instantiation may have something to do with my issue. Hopefully this helps someone.

<div id="my-map"></div>
<script type="text/javascript">
  $('#my-map').height($("#my-map-container").height());
  $('#my-map').width($("#my-map-container").width());
  google.maps.event.trigger($('#my-map'), 'resize');
</script>

In my case, same issues for Mac devices on: Safari 5.1.7 (Os Windows 10[Sorry]) Safari 5.1 (Ipad 1 [Old Sorry]) Safari 10 (Iphone 6 Plus) Here my solution work for me: 1) capture Browser width detect.min.js 2) change attr style width parameter 3) resize map

/* Of course insert detect.min.js and Jquery in your HTML ;)*/
var user = detect.parse(navigator.userAgent);
var browserFamily=user.browser.family;
var browserVersion=user.browser.version;
if ( browserFamille=="Mobile Safari" || browserVersion.substr(0,3)=="5.1") {
    canvasWidth = $(window).width(),
    $(".macarte").attr("style","width:"+canvasWidth+"px")
    google.maps.event.trigger(map, 'resize');
}
/* browserFamily returns "Mobile Safari" for tablet and mobile devices; "Safari" for desktop devices */

I faced the same issue when setting the map centre manually. I solved it by the below code:

google.maps.event.trigger(map, "center_changed");

function initialize(lon,lat) {
var largeLatlng = new google.maps.LatLng(lon,lat);
var largeOptions = {zoom: 18, center: largeLatlng,mapTypeId:     google.maps.MapTypeId.ROADMAP};
var largeMap = new google.maps.Map(document.getElementById("map"), largeOptions);
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});

google.maps.event.addListenerOnce(largeMap, 'idle', function(){
    google.maps.event.trigger(largeMap, 'resize');
    largeMap.setCenter(largeLatlng);
});
largeMarker.setMap(largeMap);

}