什么导致使用v3 API的谷歌地图上的灰色空间？ [英] What is causing gray space on a Google Map using v3 API?

问题描述

我试图按照Google文档中的示例加载地图，但未加载。我尝试过使用 resize ，但没有正确加载。此映射位于使用magento使用的Prototype JavaScript Framework呈现的选项卡后面。它不在标签背后正确加载。

 < style type =text / css> 
 #map_container {height：500px; width：700px; margin：0;} 
< / style> 
< div id =map_container> 
< div id =map_canvasstyle =width：500px; height：500px;>< / div> 
< / div> 
< script type =text / javascript
 src =http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true> 
< / script> 
< script type =text / javascript> 
 Event.observe（window，load，function（）{
 var myOptions = {
 center：new google.maps.LatLng（-34.397,150.644），
 zoom ：6，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
;; 
 var map = new google.maps.Map（document.getElementById（map_canvas），
 myOptions ）; 
; 
 google.maps.event.trigger（map，resize）; 
}）; 
< / script> 
  

地图显示为灰色部分，覆盖大部分地图，UI元素未完全初始化。我尝试过使用 google.maps.event.trigger（map，resize）; ，但它似乎没有做任何事情。这个div在很多div里面。

解决方案

示例如何在MagentoProduct Edit中添加新选项卡GMaps新标签id是'product_info_tabs_GMaps'）

PHP部分

类My_Gmaps_Block_Adminhtml_Tabs_Gmaps extends Mage_Adminhtml_Block_Widget_Form

  public function __construct（）{
 $ b $ parent :: __ construct（）; 
 
 $ this-> setTemplate（'my / gmaps / tabs / gmaps.phtml'）; 
 
} 
  

/ ........ ..................... /

}

模板部分'pwron / gmaps / tabs / gmaps.phtml'：

 < style> #map_canvas {width：100％;高度：600px的;}< /风格> 
< div class =mapid =map_canvas>< / div> 
 
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?sensor=false>< / script> 
< script type =text / javascript> 
 var GMaps = Class.create（）; 
 GMaps.prototype = {....................} 
 var gmaps = null; 
 function switchGMapsTab（tab）{
 if（tab.tab.container.activeTab.id =='product_info_tabs_GMaps'）{
 if（！gmaps）{
 gmaps = new GMaps （{}）; 
 gmaps.update（）; 
} 
} 
} 
 varienGlobalEvents.attachEventHandler（'showTab'，switchGMapsTab）; <脚本> 
  

麻烦的方式
1.创建的地图
2.标签显示（不加载所有图块）

最佳方式
1.标签显示
2.创建地图

I'm trying to load a map as per the example in the Google documentation, but it's not loading. I tried using resize, but it's not loading correctly. This map is behind a tab rendered with the Prototype JavaScript Framework which magento uses. It loads correctly when not behind a tab.

<style type="text/css">
    #map_container { height:500px; width:700px;margin:0;}
</style>
<div id="map_container">
    <div id="map_canvas" style="width:500px;height:500px;"></div>
</div>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true">
</script>
<script type="text/javascript">
    Event.observe( window, "load", function() {
        var myOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
        ;
        google.maps.event.trigger(map, "resize");
    });
</script>  

The map is shown with grey parts that cover most of the map and the UI elements are not fully initialized. I tried using google.maps.event.trigger(map, "resize");, but it does not seem to do anything. This div is inside a lot of divs.

解决方案

Example how to add new tab "GMaps" in Magento "Product Edit" (new tab "id" is 'product_info_tabs_GMaps')

PHP part

class My_Gmaps_Block_Adminhtml_Tabs_Gmaps extends Mage_Adminhtml_Block_Widget_Form

public function __construct() {

  parent::__construct();

  $this->setTemplate('my/gmaps/tabs/gmaps.phtml');

}

/............................./

}

Template part 'pwron/gmaps/tabs/gmaps.phtml':

<style>#map_canvas {width:100%; height:600px;}</style>
<div class="map" id="map_canvas"></div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var GMaps = Class.create();
    GMaps.prototype = {       ....................        }
    var gmaps = null;
    function switchGMapsTab(tab){
        if ( tab.tab.container.activeTab.id == 'product_info_tabs_GMaps'){
            if (!gmaps){
                gmaps = new GMaps({});
                gmaps.update();
            }
        }
    }
    varienGlobalEvents.attachEventHandler('showTab', switchGMapsTab);     <script>

trouble way 1. Created Map 2. Tab showed (not loads all tiles)

best way 1. Tab showed 2. Created Map

这篇关于什么导致使用v3 API的谷歌地图上的灰色空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！