javascript - 另一个未捕获的 ReferenceError: google is not defined

问题描述

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

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

更具体地说，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 脚本传输到父页面。现在我几乎没有想法了。

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

标签： javascriptjqueryapigoogle-maps

javascript - 另一个未捕获的 ReferenceError: google is not defined

问题描述

解决方案

推荐阅读