谷歌地图在左上角显示为小答案

【问题标题】：google map is displaying to small in top left corner谷歌地图在左上角显示为小
【发布时间】：2013-06-10 08:01:37
【问题描述】：

在 web 应用程序中，我正在使用 ajax 加载页面（带有地图的 googlemap.asp）。

我正在使用 jquery.load 在 div 中加载“googlemap.asp”，它只在左上角显示一个小地图，因此它没有像我在 div 中设置的那样获得 320 x 600 的大小. 当我以这种方式加载地图时，它无法正确渲染地图。

但是如果我直接在浏览器中加载“googlemap.asp”（没有ajax）那么它会正确显示，所以我想当我用ajax加载它时我必须以某种方式重新刷新它？

这就是我所拥有的：

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

window.onload=googleMaploadScript();


function googleMaploadScript() {
    var script =document.createElement("script");
    script.type="text/javascript";
    script.src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);  
    }

var address1 = document.getElementById('address').value;


var geocoder;
var map;
function initialize() {

  geocoder = new google.maps.Geocoder();
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(57.109577,12.286513),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);  
  codeAddress(address1);

}

function codeAddress(address) {
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);

      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
      });    
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

}

我想我以某种方式以错误的顺序加载它，这就是为什么它不能正确渲染，或者是不是 div 在开始时不可见？

感谢任何意见。

【问题讨论】：

标签： google-maps

【解决方案1】：

尝试通过脚本更改高度和宽度。

【讨论】：

我尝试在“mapOptions”中设置高度和宽度，但没有成功。
好的，我在 mapOptins 中设置了高度和宽度，它适用于 iPhone，但不适用于桌面 safari。但是现在不是居中了吗？中心在左上角？

【解决方案2】：

为了居中，将此脚本添加到您的地图脚本中，它将居中。但是我也很难将它从左上角带到中心。在我的情况下，当我更改地图加载并居中的方向或大小时

//居中脚本

google.maps.event.addDomListener(window, "resize", function() {
                                var center = map.getCenter();
                                google.maps.event.trigger(map, "resize");
                                map.setCenter(center); 
                            });

让我知道它是否有效。这是LINK了解更多信息

【讨论】：