Jquery Dialog box with gmaps.js

Question

i'm facing a problem to show google map in a dialog box, the map shows in the dialog box like below

i'm using gmaps.js library to show google map and jquery ui for the dialog box

Here is my code snippet

<?php if ( ! empty( $latitude ) && ! empty( $longtitude ) ): ?>

    <li class="click-n-pick-span">
       <a href="#" id="opener-<?php echo $branch->ID ?>">
          <?php _e( 'Our location on map', \Click_And_Pick\Click_And_Pick::TEXTDOMAIN ) ?>
                            </a>
    </li>

    <div class="modal-header">
        <div class="dialog" id="map-<?php echo $branch->ID ?>-content"
                                 style="width:500px !important; height:500px !important"></div>
        </div>
<?php endif; ?>

and the js like the following :

<?php if ( ! empty( $latitude ) && ! empty( $longtitude ) ): ?>

    // google map
    var map = new GMaps({
    div: '#map-<?php echo $branch->ID ?>-content',
    lat: <?php echo $latitude ?>,
    lng: <?php echo $longtitude ?>
    });

    map.addMarker({
        lat: <?php echo $latitude ?>,
        lng: <?php echo $longtitude ?>
    });

    $("#map-<?php echo $branch->ID ?>-content").dialog({
        autoOpen: false,
        zoom: 12,
        width: 'auto'
    });

    $("#opener-<?php echo $branch->ID ?>").click(function (e) {
        e.preventDefault();
        map.refresh();
        $("#map-<?php echo $branch->ID ?>-content").dialog("open");
    });


    <?php endif; ?>

Answer 1

Run this on it once your html elements height and width are set.

google.maps.event.trigger(map, 'resize')

Taken from this page.. Gmaps API v3 Under events, it says this ...

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

Or maybe try this..

Size()

This page seems pretty helpful...

GMAPS API V3 Github.io

Have you tried setting height and width of the map object when you create it ?

    // google map
    var map = new GMaps({
        div: '#map-<?php echo $branch->ID ?>-content',
        lat: <?php echo $latitude ?>,
        lng: <?php echo $longtitude ?>,
        width: 500,
        height: 500
    });

Or set inline style to set width on your modal header div ?

<div style="width: 500px;" class="modal-header">