谷歌地图与Jquery对话框

Question

我想在一个页面中显示两个谷歌地图。一个是小地图，然后点击视图大地图出现。 它在jquery对话框中显示较大的地图。我面临的问题是，一旦我点击查看大图，就会显示jquery对话框，但谷歌地图不是居中对齐的。我尝试将它做成中心对齐但不起作用

以下是我的代码：

var map,map2;
  jQuery(document).ready(function () {

    var ipDialog = $("#dialog").dialog({
        modal: true,
        width: 900,
        height: 470,
        autoOpen: false,
        title: "Attractions",
        resizeStop: function (event, ui) { google.maps.event.trigger(map, 'resize') },
        open: function (event, ui) { google.maps.event.trigger(map, 'resize'); },
    });

    $("#opener").on("click", function () {
        $('#dialog').dialog('open');
        return false;
    });


});

    var gmarkers = [];

    var locations = <?php echo json_encode($location); ?>;

    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    var icons = <?php echo stripslashes(json_encode($category_data)); ?>;   

    //Set Map
    var myOptions = {
          zoom: 10,
          center: new google.maps.LatLng(43.253205,-80.480347),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
    map = new google.maps.Map(document.getElementById("map"),
    {
        zoom: 9,
        center: new google.maps.LatLng(43.253205,-80.480347),
        mapTypeId: google.maps.MapTypeId.ROADMAP

    });
    map2 = new google.maps.Map(document.getElementById("map2"),
    {
        zoom: 10,
        center: new google.maps.LatLng(43.253205,-80.480347),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });  

    /*show('ClothingStore');
    show('Restaurant');*/
    <?php echo $cat; ?>

    var infowindow = new google.maps.InfoWindow();
    var geocoder = new google.maps.Geocoder();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      loc = new google.maps.LatLng(locations[i][2], locations[i][3]);
      map.setCenter(loc);
      map2.setCenter(loc);
      createMarker(loc,"<div id='infoWindow'><strong>"+locations[i][0]+"</strong><br>"+locations[i][1]+"</div>",icons,locations[i][4]);

    }


    function createMarker(latlng,html,icons,category){

      var marker = new google.maps.Marker({
        position: latlng,
        icon: icons[category].icon,
        map: map
      }); 

     var marker2 = new google.maps.Marker({
        position: latlng,
        icon: icons[category].icon,
        map: map2
      }); 

      marker.mycategory = category; 
      gmarkers.push(marker);


      google.maps.event.addListener(marker, 'click', function() { 
        infowindow.setContent(html);
        infowindow.open(map, marker);
      });

      google.maps.event.addListener(marker2, 'click', function() { 
        infowindow.setContent(html);
        infowindow.open(map2, marker2);
      });

      /*google.maps.event.addListener(marker, 'mouseout', function() { 
        infowindow.close();
      });*/

      return marker;
    }

    // == shows all markers of a particular category, and ensures the checkbox is checked ==
  function show(category) {
    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
        gmarkers[i].setMap(map);
      }
    }
    // == check the checkbox ==
    document.getElementById(category+"box").checked = true;
  }


    // == hides all markers of a particular category, and ensures the checkbox is cleared ==
  function hide(category) {

    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
        gmarkers[i].setMap(null);
      }
    }
    // == clear the checkbox ==
    document.getElementById(category+"box").checked = false;
    // == close the info window, in case its open on a marker that we just hid
   infowindow.close();
  }


// == a checkbox has been clicked ==
  function boxclick(box,category) {
    if (box.checked) {
      show(category);
    } else {
      hide(category);
    }
  }

好的，但是当我改变autoOpen：true时，在jquery对话框中，它显示的标记是我想要的中心。我不知道我的代码中有什么问题。

HTML是：

<div id="dialog">
                                <div style="float:left;width:180px;">
                                    <ul class="ulMap">

                                        <li>
                                             <?php echo clean($marker_category->cat_title); ?>: 
                                            <input type="checkbox" id="<?php echo clean($marker_category->cat_title); ?>box" onclick="boxclick(this,'<?php echo clean($marker_category->cat_title); ?>')" />
                                        </li>
                                         <?php endwhile; ?>
                                    </ul>    
                                </div>
                                <div id="map" style="height:380px;width:680px;"></div>
                                <div style="clear:both;"></div>
                              </div>
<a href="javascrip:void(0);" id="opener">Large map</a>

我在这里做错了什么？