它必须说明一些关于Google Maps API的事情，类似的问题经常出现。但是我已经阅读了所有以前的内容，并且找不到任何可以解决我的问题的方法。
我有一个谷歌地图在一个网站上成功工作(经过很多痛苦和实验(。在那里，地图在浮点框中打开。现在我正在尝试将其转移到另一个网站，它将在父页面的div 中打开。我已经复制了代码，但完全陷入了"未捕获的引用错误：谷歌未定义"错误。
更具体地说，Chrome控制台报告：
Uncaught ReferenceError: google is not defined
at eval (eval at <anonymous> (eval at <anonymous> (jquery.min.js:2)), <anonymous>:1:959)
at eval (eval at <anonymous> (jquery.min.js:2), <anonymous>:1:1)
at eval (<anonymous>)
at jquery.min.js:2
at Function.globalEval (jquery.min.js:2)
at text script (jquery.min.js:4)
at Xb (jquery.min.js:4)
at y (jquery.min.js:4)
at c (jquery.min.js:4)
at Object.send (jquery.min.js:4)
映射文件中没有 jquery 调用，因此它大概引用回父页面，该父页面确实使用 jquery 进行各种操作，包括使用
$("#mapsee").click(function(){
$("#mapsee").hide();
$("#maphide").show();
$("#mapspace").slideDown(2000, function() {
$("#mapspace").load("/includes/map_hotel_dev.php?hid=<?php echo $row_hotel['hid'] ?>");
});
$('html, body').animate({
scrollTop: $("#mapspace").offset().top
}, 2000);
});
我在map_hotel_dev.php上的谷歌地图脚本是
<script>
function initMap() {
var map;
var image = {
url: '../images/hotel_grey_icon.gif',
size: new google.maps.Size(32, 37),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(16, 35)
};
var hotelimage = {
url: '../images/hotel_bigicon.gif',
size: new google.maps.Size(32, 37),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(16, 37)
};
function createMarker(point, html) {
var timer;
var html;
var contentString = html;
var ibOptions = {
content: contentString
,closeBoxMargin: "-8px"
,disableAutoPan: true
,enableEventPropagation: false
,alignBottom: true
,pixelOffset: new google.maps.Size(-120, -36)
};
var ib = new InfoBox(ibOptions);
if(point.equals(thisLatlng)){
var thisicon = hotelimage;
var zed = 9999;
}else{
var thisicon = image;
var zed = Math.round(point.lat()*-100000)<<5
}
var marker = new google.maps.Marker({
map: map,
position: point,
icon: thisicon,
zIndex: zed
});
marker.addListener('mouseover', function() {
timer = setTimeout(function(){
ib.open(map, marker);
}, 500);
});marker.addListener('mouseout', function() {
clearTimeout(timer);
});
marker.addListener('click', function() {
ib.open(map, marker);
});
google.maps.event.addListener(map, 'click', function() {
ib.close(map, marker);
});
}
var lat = <?php echo $row_hotel['latitude'] ?>;
var lng = <?php echo $row_hotel['longitude'] ?>;
var zoom = 10;
var thisLatlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
center: thisLatlng,
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
scaleControl: true,
zoomControl: true
}
map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
var style_nopoi = [{"featureType": "poi.business", "stylers": [{"visibility": "off"}]}]; // Styles, removes business points-of-interest. Lots of other possibilities.
map.setOptions({styles: style_nopoi}); // Applies the style to the map
var loadcnt = 0;
google.maps.event.addListener(map, 'tilesloaded', function() {
if (loadcnt==0) {
map.setCenter(thisLatlng); // Seems to fix random centring problem on mobiles
loadcnt=loadcnt+1;
}
});
downloadUrl("/includes/php-to-xml.php?iso=<?php echo $row_hotel['countryisocode'] ?>", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html=markers[i].getAttribute("html");
createMarker(point, html);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=quarterly&key=MYKEY&callback=initMap"></script>
<script type="text/javascript" src="../js/infobox.js"></script>
我已经尝试了各种可能的解决方案：异步加载、延迟、将 API 和信息框脚本放在页面顶部，甚至将 API 脚本传输到父页面。现在我几乎没主意了。
使用信息窗口而不是信息框的类似脚本工作正常。在测试时，我尝试了旧的(信息窗口(脚本并添加了信息框调用，我立即得到了未捕获的参考错误，所以我怀疑这就是问题出在哪里。
API 没有加载，因此谷歌未定义，你能删除 v=quarterly 吗？
请使用文档中的网址
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap
好吧，我终于找到了解决方案，所以对于后来出现的任何其他人来说，这就是我解决它的方式。
我的错误是尝试将一个单独的文件 (map_hotel_dev.php( 加载到父页面的div 中。我将代码从 map_hotel_dev.php 复制到父页面，然后更改为 jquery 以打开映射到以下内容：
$("#mapsee").click(function(){
$("#mapsee").hide();
$("#maphide").show();
$("#mapspace").slideDown(2000, function() {
initMap();
});
$('html, body').animate({
scrollTop: $("#mapspace").offset().top
}, 2000);
});
现在这一切都是一种享受！