谷歌地图接口 - "google is not defined" - Google Maps API - "google is not defined" 小贝子编程网

这让我发疯了。我有一个页面加载了包含谷歌地图的第二个页面。第二页本身可以完美运行，但在第一页中打开时，它只显示一个空白区域。

Javscript 控制台给出消息"ReferenceError：google is not defined"。

第一个(主)页面使用以下脚本加载地图页面：

$(document).ready(function(){
$("#maplink").click(function(){
var txt = $("#mapspace").is(':visible') ? 'See location map' : 'Hide location map';
$("#maplink").text(txt);
$("#mapspace").slideToggle(2000, function() {
$("#mapspace").load("/includes/map_hotel.php?hid=<?php echo $row_hotel['hid'] ?>");
});
$('html, body').animate({
scrollTop: $("#maplink").offset().top
}, 2000);
});
});

然后第二页将此脚本用于谷歌地图。

// global "map" variable
var map = null;
// InfoBox
var boxText = document.createElement("div");
boxText.style.cssText = "border:1px solid #3498db;border-radius:5px;margin-top:8px;background:white;padding:5px;";
var ibOptions = {
content: boxText
,closeBoxURL: ""
,disableAutoPan: false
,enableEventPropagation: true
,maxWidth: 0
,pixelOffset: new google.maps.Size(15, -50)
,boxStyle: { 
width: "240px"
}
};
// global "infobox" variable
var ib = new InfoBox(ibOptions);
function createMarker(latlng, html) {
var contentString = html;
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: "/images/hotel_grey_icon.gif",
zIndex: 9998
});
google.maps.event.addListener(marker, 'mouseover', function() {
boxText.innerHTML = contentString;
ib.open(map, marker);
});
google.maps.event.addListener(map, 'click', function() {
ib.close(map, marker);
});
}
function initMap() {
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("map_canvas"), mapOptions);
var hotelContentString = '<div class="thishotel"><?php echo $row_hotel['hotel_name'] ?></div>';
var hotelmarker = new google.maps.Marker({
position: thisLatlng,
map: map,
icon: "/images/hotel_icon.gif",
zIndex: 9999
});
// Infobox for this hotel
var hibOptions = {
content: boxText
,closeBoxURL: ""
,disableAutoPan: false
,enableEventPropagation: true
,maxWidth: 0
,pixelOffset: new google.maps.Size(-70, -75)
,boxStyle: { 
width: "140px"
}
};
var hib = new InfoBox(hibOptions);
google.maps.event.addListener(hotelmarker, 'mouseover', function() {
boxText.innerHTML = hotelContentString;
hib.open(map, hotelmarker);
});
google.maps.event.addListener(map, 'click', function() {
hib.close(map, hotelmarker);
});
var style_nopoi = [{"featureType": "poi", "stylers": [{"visibility": "off"}]}]; // Styles, removes 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);
}
});
}

我已经尝试过的事情：

我尝试将文本文件放在第一个脚本的 .load() 中以确保其正常工作。是的。
我已经注意确保对其他文件的所有引用都相对于根目录，即"/include/php-to-xml.php"。
我已经不得不摆弄脚本不同部分的顺序才能使其正常工作。我尝试将所有javascript放在initMap函数中，但这也没有帮助。
我尝试将脚本的全部内容包装在 window.onload = function() { 中，但这完全破坏了它。
最初，我使用异步延迟和对 initMap 函数的回调加载 API。我现在已经放弃了所有这些，改用body onload="initMap()"。指向 API 的链接和其他几个外部脚本(在我的服务器上)都在正文中。

最后要澄清的一点：我在自己的机器上的测试服务器上运行所有这些。

我敢打赌这是一件简单的事情(它总是如此！)，但我看不出是什么。

EDIT geocodezip要求提供最小，完整的代码。主页(以最小形式，即删除不相关内容)是

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/lightgallery.css" />
</head>
<body>
<!-- Header -->
<header id="header">
<div class="logo"><a href="index.html">BEST Small Hotels</a></div>
<a href="#menu">Menu</a>
</header>
<!-- Banner -->
<section id="banner" style="background-image: url(<?php echo '/images/'.$row_hotel['countryisocode'].'/'.$row_hotel['hid'].'/'.$row_hotel['mainphoto']; ?>)">
<div class="inner">
<header>
<h1><?php echo $row_hotel['hotel_name'] ?></h1>
<h2><?php echo $row_hotel['summary'] ?></h2>
</header>
<a href="#main" class="more">Learn More</a>
</div>
<!-- Main -->
<div id="main">
<!-- Map Section -->
<section class="wrapper style1" style="padding:0">
<div class="inner">
<!-- 2 Columns -->
<div class="flex flex-2">
<div id="mapspace"></div>
</div>
</div>
</section>
</div>
<?php include('footer.php'); ?>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<script src="/js/picker.js"></script>
<script src="/js/lightgallery.min.js"></script>
<script src="/js/lg-thumbnail.min.js"></script>
<script src="/js/tooltip.js"></script>
<link type="text/css" rel="stylesheet" href="/css/picker.css">
<script>
$(document).ready(function(){
$("#maplink").click(function(){
var txt = $("#mapspace").is(':visible') ? 'See location map' : 'Hide location map';
$("#maplink").text(txt);
$("#mapspace").slideToggle(2000, function() {
$("#mapspace").load("/includes/map_hotel.php?hid=<?php echo $row_hotel['hid'] ?>");
});
$('html, body').animate({
scrollTop: $("#maplink").offset().top
}, 2000);
});
});
</script>
</body>
</html>

地图页面是

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/main.css" />
<style>
html, body{height:100%;margin:0;padding:0}
#map_canvas{height:100%}
.info{font-family:Arial, Helvetica, sans-serif}
.info h1{font-size:1.2em;font-weight:bold;color:#3498db;line-height:normal;margin-bottom:.1em}
.thishotel{font-size:1.2em;font-weight:bold;color:#3498db;text-align:center}
</style>
</head>
<body> 
<div id="map_canvas"></div>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAVWhJbk79iVcXRDoaG75l7glsdS2hYRyo"></script>
<script type="text/javascript" src="/js/downloadxml.js"></script>
<script type="text/javascript" src="/js/infobox.js"></script>
<script type="text/javascript"> 
google.maps.event.addDomListener(window,'load',initMap);
// global "map" variable
var map = null;
// InfoBox
var boxText = document.createElement("div");
boxText.style.cssText = "border:1px solid #3498db;border-radius:5px;margin-top:8px;background:white;padding:5px;";
var ibOptions = {
content: boxText
,closeBoxURL: ""
,disableAutoPan: false
,enableEventPropagation: true
,maxWidth: 0
,pixelOffset: new google.maps.Size(15, -50)
,boxStyle: { 
width: "240px"
}
};
// global "infobox" variable
var ib = new InfoBox(ibOptions);
function createMarker(latlng, html) {
var contentString = html;
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: "/images/hotel_grey_icon.gif",
zIndex: 9998
});
google.maps.event.addListener(marker, 'mouseover', function() {
boxText.innerHTML = contentString;
ib.open(map, marker);
});
google.maps.event.addListener(map, 'click', function() {
ib.close(map, marker);
});
}
function initMap() {
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("map_canvas"), mapOptions);
var hotelContentString = '<div class="thishotel"><?php echo $row_hotel['hotel_name'] ?></div>';
var hotelmarker = new google.maps.Marker({
position: thisLatlng,
map: map,
icon: "/images/hotel_icon.gif",
zIndex: 9999
});
// Infobox for this hotel
var hibOptions = {
content: boxText
,closeBoxURL: ""
,disableAutoPan: false
,enableEventPropagation: true
,maxWidth: 0
,pixelOffset: new google.maps.Size(-70, -75)
,boxStyle: { 
width: "140px"
}
};
var hib = new InfoBox(hibOptions);
google.maps.event.addListener(hotelmarker, 'mouseover', function() {
boxText.innerHTML = hotelContentString;
hib.open(map, hotelmarker);
});
google.maps.event.addListener(map, 'click', function() {
hib.close(map, hotelmarker);
});
var style_nopoi = [{"featureType": "poi", "stylers": [{"visibility": "off"}]}]; // Styles, removes 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>
</body>
</html>

自动SO系统要求进行编辑，以解释为什么其他具有类似标题的帖子没有回答我的问题。我尝试了许多类似的帖子，并采取了几种似乎相关的解决方案，但没有一个奏效。

第二次编辑。进一步的调查似乎表明，问题是Jquery和谷歌地图之间的冲突，而不是我在地图页面中的脚本的问题。因此，为了避免这个问题再长，我在这里提出了一个新问题：https://stackoverflow.com/questions/43394074/conflict-between-jquery-and-google-maps-api

所以对我来说，问题似乎出在这一行代码中：

<script src="//maps.googleapis.com/maps/api/js? 
key=AIzaSyAVWhJbk79iVcXRDoaG75l7glsdS2hYRyo"></script>

这看起来不像是谷歌地图API链接的有效格式。我建议首先使用谷歌地图页面中的简单地图示例。我将在下面链接它：

https://developers.google.com/maps/documentation/javascript/examples/map-simple

我通常做的一件事是将我对谷歌地图 API 的引用放在我的 html 底部。首先尝试一下，这可能会解决您的问题。

我遇到了同样的问题，但是在控制台中进行深入调查后，我发现了这个 "UNKNOWN_ERROR"，OVER_QUERY_LIMIT："OVER_QUERY_LIMIT"，REQUEST_DENIED："REQUEST_DENIED" 要修复它，我必须在云控制台中激活计费。

谷歌地图接口 - "google is not defined"

相关内容

最新更新

热门标签：