这让我发疯了。我有一个页面,它加载包含谷歌地图的第二个页面。第二个页面本身工作得很好,但是在第一个页面中打开它时,它只显示一个空白。
Javscript控制台给出的消息是"ReferenceError: google未定义“。
第一个(主)页使用此脚本加载映射页:
$(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);
}
});
}
我已经尝试过的事情:
最后要澄清的一点是:我正在我自己的机器上的一个测试服务器上运行所有这些。
我打赌这是很简单的事情(总是如此!)但我看不出是什么。
编辑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和Google之间的冲突,而不是地图页面中我的脚本的问题,因此,为了避免这个问题继续下去,我在这里打开了一个新的问题:https://stackoverflow.com/questions/43394074/conflict-between-jquery-and-google-maps-api
发布于 2017-04-12 15:09:17
因此,在我看来,问题就在这一行代码中:
<script src="//maps.googleapis.com/maps/api/js?
key=AIzaSyAVWhJbk79iVcXRDoaG75l7glsdS2hYRyo"></script>
这看起来不像是链接的有效格式。我建议首先使用google地图页面中的简单地图示例。我将把它连接到下面:
https://developers.google.com/maps/documentation/javascript/examples/map-simple
另外,我通常做的一件事是将我对google的引用放在html的底部。先试一试,这样可以解决你的问题。
https://stackoverflow.com/questions/43366289
复制相似问题