2015-10-17 32 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頁面獨立,我可以看到地圖和藍色標記。問題是當我從哦調用相同的頁面 –