Question

它必须说一些有关Google Maps API的问题，经常会出现类似的问题。但是我已经阅读了之前的所有文章，却找不到解决我问题的方法。

我在一个网站上（经过大量的痛苦和尝试）成功地制作了Google地图。在那里，地图在浮动框中打开。现在，我正在尝试将其转移到另一个网站，该网站将在父页面的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上的Google Maps脚本是

<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，因此我怀疑这是问题所在。

Answer 1

API尚未加载，因此Google未定义，您能否删除v =每季度？

请使用文档中的URL

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

Answer 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);
});

现在一切都可以治疗了！

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

2 个答案: