Google map is not open properly

I am working on a task wherein user need to search hotel in my project. In the search result list there is an option to see the map of that particular hotel. Now what happens is when i click to see the map the map doesn't load properly. Now i have marked something else. If i close the dialogbox and click again to see the map it doesn't load but if i try to see the map without closing dialogbox then it shows map perfectly and 开发者_StackOverflow中文版quickly.

I am using jquery-ui-1.8.5.min.js for dialog box.In that google map is loaded.

Can anyone please guide me how to sort this issue...

I think you are trying to initialize map before the popup is shown.

Google Maps code tries to get the size of it's wrapper element. So when your popup is not open yet, the width and height of all children are zero, so Google Maps fails to initialize correctly.

Solution is simple, just use:

google.maps.event.trigger(YOUR_MAP_VARIABLE_HERE, 'resize');

when the popup is shown, everything would be great I hope...

GOOGLE MAP API V3

use document ready before initializing... see this example:

HTML

<div id='map_canvas'></div>

JQUERY/JAVASCRIPT

$(document).ready(function() {
    var myOptions = {
        zoom: 12,
        center: new google.maps.LatLng(36.158251, -115.137405),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});