另一个未捕获的 ReferenceError：未定义 google答案

【问题标题】：Another Uncaught ReferenceError: google is not defined另一个未捕获的 ReferenceError：未定义 google
【发布时间】：2019-03-22 04:25:58
【问题描述】：

必须说明 Google Maps API 经常出现类似问题。但是我已经阅读了所有以前的内容，但找不到任何可以解决我的问题的内容。

我有一个谷歌地图在一个网站上成功运行（经过大量的痛苦和实验）。地图在浮动框中打开。现在我正在尝试将其转移到另一个网站，它将在父页面的 div 中打开。我已经复制了代码，但完全被“未捕获的 ReferenceError：google is not defined”错误所困扰。

更具体地说，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 上的 Google 地图脚本是

<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 脚本传输到父页面。现在我的想法快用完了。

使用 infowindow 而不是 infobox 的类似脚本可以正常工作。在测试时，我尝试了旧的（infowindow）脚本并添加了 infobox 调用，但我立即得到了 Uncaught ReferenceError，所以我怀疑这在某种程度上是问题所在。

【问题讨论】：

标签： javascript jquery api google-maps

【解决方案1】：

API 未加载，因此 google 未定义，您可以删除 v= Quarterly 吗？

请使用文档中的 URL

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

【讨论】：

【解决方案2】：

好吧，我终于找到了解决方案，所以对于后来出现的其他人，这就是我解决它的方法。

我的错误是尝试将单独的文件 (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);
});

现在这一切都是一种享受！

【讨论】：