首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >谷歌地图API --“谷歌没有定义”

谷歌地图API --“谷歌没有定义”
EN

Stack Overflow用户
提问于 2017-04-12 09:58:28
回答 1查看 6.5K关注 0票数 2

这让我发疯了。我有一个页面,它加载包含谷歌地图的第二个页面。第二个页面本身工作得很好,但是在第一个页面中打开它时,它只显示一个空白。

Javscript控制台给出的消息是"ReferenceError: google未定义“。

第一个(主)页使用此脚本加载映射页:

代码语言:javascript
运行
复制
$(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);
});
});

然后,第二页使用这个脚本作为谷歌地图。

代码语言:javascript
运行
复制
      // 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);
        }

      });
    }

我已经尝试过的事情:

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

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

我打赌这是很简单的事情(总是如此!)但我看不出是什么。

编辑geocodezip要求提供一个最小、完整的代码。主页(以最小形式(即删除的无关内容)是

代码语言:javascript
运行
复制
<!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>

地图页是

代码语言:javascript
运行
复制
<!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

EN

回答 1

Stack Overflow用户

发布于 2017-04-12 15:09:17

因此,在我看来,问题就在这一行代码中:

代码语言:javascript
运行
复制
<script src="//maps.googleapis.com/maps/api/js? 
 key=AIzaSyAVWhJbk79iVcXRDoaG75l7glsdS2hYRyo"></script>

这看起来不像是链接的有效格式。我建议首先使用google地图页面中的简单地图示例。我将把它连接到下面:

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

另外,我通常做的一件事是将我对google的引用放在html的底部。先试一试,这样可以解决你的问题。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43366289

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档