Question

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>	
	<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">
 			/* CONSTANTS */
			var geocoder = null;
			var map = null;
			/* INITIALIZATION */
			function initialize() {
					alert("initialize");
					geocoder = new google.maps.Geocoder();

					// Draw the map	
					/*var startPoint = parseCoordinate(VALUE_SITE_COORDINATE);
					alert(startPoint);*/
					var startPoint = new google.maps.LatLng(24.886, -70.268);
					  var mapProp = {
						center:startPoint,
						zoom:5,
						mapTypeId:google.maps.MapTypeId.ROADMAP
					};
					map =new google.maps.Map(document.getElementById("map_canvas"),mapProp);
					alert("after new map");
					google.maps.event.addListenerOnce(map, 'idle', function() {
						google.maps.event.trigger(map, 'resize');
						alert("in idle");
					});
					var bimage = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";

					// Set up our GMarkerOptions object
					//markerOptions = { icon:blueIcon };
					 var marker = new google.maps.Marker({
						position: startPoint,
						map: map,
						icon: bimage
					});
					marker.setVisible(true);  // visible_changed triggered
					marker.setMap(map);       
					
			}
		//google.maps.event.addDomListener(window, 'load', initialize);
		google.setOnLoadCallback(initialize);
    </script>
</head>
<body>
	<div id="map_canvas" style="width:850px;height:850px;">	
		<!--<div>
			<h:form id="geomap">
				<div class="title-bar">
					<h:outputText value="Geo Fence Maintenance"/>
				</div>	
				<div style="width:50%;float:left;"> 
					
				</div>
				<div style="width:50%;">

				</div>
				<div style="width:50%;float:left;">
				
				</div>
				<div style="width:50%;"> 

				</div>
				<div style="width:100%;padding-bottom:10px;">
					<div style="float:left;">
					</div>
					
				</div>
				<div>
					<div id="divCoordinates" style="width:200px;height:200px;float:left;padding-top:5px;padding-left:5px;">
					</div>
					<div>
							<div id="map_canvas" style="width:400px;height:400px;"></div>	
					</div>
				</div>
			</h:form>
		</div>-->
	</div>
</body>
</html>

进一步分析我认为我找到了根本原因而不是解决方案。问题是我的谷歌地图是通过JSF调用的。我想IE11中的一些更新正在破坏功能。我在下面的链接中遇到的类似问题。 http://www.mashups4jsf.com/gmaps4jsf-examples2-3.0.0/pages/mapAjax.xhtml它在IE 11中隐藏了Google地图，但在Firefox中打开时显示出来。我和IE11有类似的问题。有任何建议如何修复它？

Answer 1

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

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

google.setOnLoadCallback(initialize);

您没有加载Google API，因此调用它时google.setOnLoadCallack（）不存在。

在谷歌地图的脚本标记之前将其添加到您的页面：

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

如果您希望它在部署到您的服务器时适用于您的应用程序，则需要添加API密钥。

或者，您可以在google地图脚本的网址中添加回调函数：

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

使用XHTML文件的Google Map问题

1 个答案: