javascript - 使用 Google Maps API 时出现 "Uncaught ReferenceError: google is not defined"错误

我正在尝试自定义 map 上的标记，但我一直收到“未定义谷歌”的提示。我尝试了不同的方法，但仍然无法正常工作。在初始化 map 之前，我使用了 API key 并包含了 map 脚本。这是我的 HTML:

 <html class="no-js" lang="en-US" >
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Home &#8211; Algebra</title>
    <link rel='dns-prefetch' href='//ajax.googleapis.com' />
    <link rel='dns-prefetch' href='//s.w.org' />
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js?ver=2.1.0'></script>
    <link rel='https://api.w.org/' href='http://localhost/algebra/wp-json/' />
    <link rel="alternate" type="application/json+oembed" href="http://localhost/algebra/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Falgebra%2Fhome%2F" />
    <link rel="alternate" type="text/xml+oembed" href="http://localhost/algebra/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Falgebra%2Fhome%2F&#038;format=xml" />
        </head>
        <body class="page page-id-4 page-template page-template-page-templates page-template-page-home page-template-page-templatespage-home-php logged-in offcanvas">



    <header id="masthead" class="site-header" role="banner">
        <div class="top-strip"></div>
        <div class="top-nav"></div>
    </header>

    <section class="container">
<section class="map">
    <div id="map-container"></div>
  <div class="contact-container">
    <div class="contact">
      <img src="" alt="mail-icon">
      <span>You can contact us at info@algebraventures.com</span>
    </div>
  </div>
</section>
        </section>
        <div id="footer-container">
            <footer id="footer">
            </footer>
        </div>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKX-BAa2bSAiC89C38o8ir29Q7iOWdQ94&callback=initMap"
  type="text/javascript"></script>
<script type='text/javascript''>
var myCenter = new google.maps.LatLng(29.714954,32.368546);
    function initMap() {
  var mapProp = {
    center:myCenter,
    zoom:13,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("map-container"),mapProp);
  var marker=new google.maps.Marker({
  position:myCenter,
  title: "AZHA"
  });
  marker.setMap(map);
  var infowindow = new google.maps.InfoWindow({
  content:"AZHA"
  });
  infowindow.open(map,marker);
}
// google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script type='text/javascript' src='http://localhost/algebra/wp-includes/js/wp-embed.min.js?ver=4.6.1'></script>
</body>
</html>

非常感谢您的帮助，谢谢。

最佳答案

如果您正在异步加载 API(使用 async、defer、&callback=initMap)，您需要将 all 代码依赖于回调函数中的 API(或者至少在 API 加载之前它不会执行的某个地方)。现在您的 myCenter 变量是在回调函数之外定义的。

改变:

<script type='text/javascript''>
var myCenter = new google.maps.LatLng(29.714954,32.368546);
function initMap() {

收件人:

<script type='text/javascript''>
function initMap() {
  var myCenter = new google.maps.LatLng(29.714954,32.368546);

proof of concept fiddle

代码片段:

html,
body,
#map-container,
.map,
.container {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<header id="masthead" class="site-header" role="banner">
  <div class="top-strip"></div>
  <div class="top-nav"></div>
</header>

<section class="container">
  <section class="map">
    <div id="map-container"></div>
    <div class="contact-container">
      <div class="contact">
        <img src="" alt="mail-icon">
        <span>You can contact us at info@algebraventures.com</span>
      </div>
    </div>
  </section>
</section>
<div id="footer-container">
  <footer id="footer">
  </footer>
</div>
<script type='text/javascript'>
  function initMap() {
      var myCenter = new google.maps.LatLng(29.714954, 32.368546);
      var mapProp = {
        center: myCenter,
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map-container"), mapProp);
      var marker = new google.maps.Marker({
        position: myCenter,
        title: "AZHA"
      });
      marker.setMap(map);
      var infowindow = new google.maps.InfoWindow({
        content: "AZHA"
      });
      infowindow.open(map, marker);
    }
    // google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" type="text/javascript"></script>

关于javascript - 使用 Google Maps API 时出现 "Uncaught ReferenceError: google is not defined"错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40403251/

javascript - 使用 Google Maps API 时出现 "Uncaught ReferenceError: google is not defined"错误

上一篇：html - 如何在html css中显示左侧文本和右侧图标？

下一篇：java - 使用 Java 将 HTML 转换为树