2015-10-17 35 views
1

我正在面对Google Map API V3的一个奇怪问题。我有一个以前版本的代码,我已经迁移到V3的新版本。扩展名是XHTML,因为此特定文件在其他应用程序中用作控件。我创建了一个示例代码,当我单独运行时运行良好并显示谷歌地图,但是当通过另一个应用程序调用相似文件时,它导致地图加载但不可见的问题。仅供参考,我从Informatica IDD应用程序使用此文件。下面是一个片段。寻找任何一种领先。与XHTML文件相关的Google地图问题

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> \t 
 
\t <script src="https://maps.googleapis.com/maps/api/js?&amp;3.21&amp;key=AIzaSyBO11CFgFCL8GnV3-tWZyQOmA8mbO9MP8E&amp;sensor=false" 
 
    type="text/javascript"></script> 
 
    <script type="text/javascript"> 
 
    \t \t \t /* CONSTANTS */ 
 
\t \t \t var geocoder = null; 
 
\t \t \t var map = null; 
 
\t \t \t /* INITIALIZATION */ 
 
\t \t \t function initialize() { 
 
\t \t \t \t \t alert("initialize"); 
 
\t \t \t \t \t geocoder = new google.maps.Geocoder(); 
 

 
\t \t \t \t \t // Draw the map \t 
 
\t \t \t \t \t /*var startPoint = parseCoordinate(VALUE_SITE_COORDINATE); 
 
\t \t \t \t \t alert(startPoint);*/ 
 
\t \t \t \t \t var startPoint = new google.maps.LatLng(24.886, -70.268); 
 
\t \t \t \t \t var mapProp = { 
 
\t \t \t \t \t \t center:startPoint, 
 
\t \t \t \t \t \t zoom:5, 
 
\t \t \t \t \t \t mapTypeId:google.maps.MapTypeId.ROADMAP 
 
\t \t \t \t \t }; 
 
\t \t \t \t \t map =new google.maps.Map(document.getElementById("map_canvas"),mapProp); 
 
\t \t \t \t \t alert("after new map"); 
 
\t \t \t \t \t google.maps.event.addListenerOnce(map, 'idle', function() { 
 
\t \t \t \t \t \t google.maps.event.trigger(map, 'resize'); 
 
\t \t \t \t \t \t alert("in idle"); 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t var bimage = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"; 
 

 
\t \t \t \t \t // Set up our GMarkerOptions object 
 
\t \t \t \t \t //markerOptions = { icon:blueIcon }; 
 
\t \t \t \t \t var marker = new google.maps.Marker({ 
 
\t \t \t \t \t \t position: startPoint, 
 
\t \t \t \t \t \t map: map, 
 
\t \t \t \t \t \t icon: bimage 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t marker.setVisible(true); // visible_changed triggered 
 
\t \t \t \t \t marker.setMap(map);  
 
\t \t \t \t \t 
 
\t \t \t } 
 
\t \t //google.maps.event.addDomListener(window, 'load', initialize); 
 
\t \t google.setOnLoadCallback(initialize); 
 
    </script> 
 
</head> 
 
<body> 
 
\t <div id="map_canvas" style="width:850px;height:850px;"> \t 
 
\t \t <!--<div> 
 
\t \t \t <h:form id="geomap"> 
 
\t \t \t \t <div class="title-bar"> 
 
\t \t \t \t \t <h:outputText value="Geo Fence Maintenance"/> 
 
\t \t \t \t </div> \t 
 
\t \t \t \t <div style="width:50%;float:left;"> 
 
\t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t <div style="width:50%;"> 
 

 
\t \t \t \t </div> 
 
\t \t \t \t <div style="width:50%;float:left;"> 
 
\t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t <div style="width:50%;"> 
 

 
\t \t \t \t </div> 
 
\t \t \t \t <div style="width:100%;padding-bottom:10px;"> 
 
\t \t \t \t \t <div style="float:left;"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t <div> 
 
\t \t \t \t \t <div id="divCoordinates" style="width:200px;height:200px;float:left;padding-top:5px;padding-left:5px;"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div> 
 
\t \t \t \t \t \t \t <div id="map_canvas" style="width:400px;height:400px;"></div> \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </h:form> 
 
\t \t </div>--> 
 
\t </div> 
 
</body> 
 
</html>

进一步分析 我想我找到了根本原因,但不是解决办法。问题是我的谷歌地图是通过JSF调用的。我想在IE11中的一些更新正在打破功能。我在下面的链接遇到类似的问题。 http://www.mashups4jsf.com/gmaps4jsf-examples2-3.0.0/pages/mapAjax.xhtml谷歌地图在IE 11中不可见,但在Firefox中打开时显示。我与IE11有类似的问题。任何建议如何解决它?

回答

1

你有“amp”在你的脚本src url中,但我认为这可能是你的复制/粘贴的结果。绝对检查您的src网址,以确保您实际上正在加载谷歌地图api。

我的猜测是,你真正的问题是这一行:

google.setOnLoadCallback(initialize); 

你不加载谷歌API,所以当你在呼唤它不存在google.setOnLoadCallack()。

只是为谷歌地图脚本标记之前给你的页面添加:

<script src="https://www.google.com/jsapi"></script> 

您将需要如果你想为你的应用程序工作,以增加你的API密钥时,它被部署到服务器。

或者,你可以把一个回调函数中的URL谷歌地图脚本:

<script src="https://maps.googleapis.com/maps/api/js?callback=initialize" async defer></script> 
+0

谢谢答复泰勒。我相应地修改了代码。我正在使用google.maps.event.addDomListener(窗口,'加载',初始化);调用初始化函数。初始化函数正在调用。如果我运行该XHTML页面独立,我可以看到地图和蓝色标记。问题是当我从哦调用相同的页面 –