获取“Uncaught ReferenceError：google未定义”使用Google Maps API发生错误 [英] Getting "Uncaught ReferenceError: google is not defined" error using Google Maps API

查看：137
本文介绍了获取“Uncaught ReferenceError：google未定义”使用Google Maps API发生错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在地图上自定义标记，但我一直在收到'google没有定义'。我尝试了不同的东西，但它仍然无法正常工作。我已经使用了API密钥，并且在初始化地图之前还包含了地图脚本。
这是我的html：

 < html class =no-jslang =en-US > 
< head> 
< meta charset =UTF-8/> 
< meta name =viewportcontent =width = device-width，initial-scale = 1.0/> 
< title> Home&＃8211;代数与LT; /标题> 
< 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'>< ; /脚本> 
< link rel ='https：//api.w.org/'href ='http：// localhost / algebra / wp-json /'/> 
  < / head> 
< body class =page page-id-4 page-template page-template-page-templates page-template-page-home page-template-page-templatespage-home-php登录offcanvas> ; 
 
 
 
< header id =mastheadclass =site-headerrole =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>您可以通过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 type ='text / javascript''> 
 var myCenter = new google.maps.LatLng（29.714954,32.368546）; 
函数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'>< /脚本> 
< / body> 
< / html>

感谢您的帮助。

async ， defer >，& callback = initMap ），您需要将所有依赖API的代码放在回调函数中（或者至少在某处它将不会执行，直到API已经加载）。现在，您的 myCenter 变量在回调函数外定义。



更改：

 < script type ='text / javascript''> 
 var myCenter = new google.maps.LatLng（29.714954,32.368546）; 
函数initMap（）{

收件人：

 < script type ='text / javascript''> 
函数initMap（）{
 var myCenter = new google.maps.LatLng（29.714954,32.368546）;

概念证明小提琴



代码段：



html，body，＃map-container，.map，.container {height：100％;宽度：100％; margin：0px; < header id =masthead

I'm trying to customize a marker on the map but I keep getting 'google is not defined'. I've tried different things but it's still not working. I have used an API key and also included the maps script before initializing the map. This is my 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>

I'd appreciate some help, thanks.

解决方案

If you are loading the API asynchronously (with async, defer, &callback=initMap), you need to put all code that depends on the API inside the callback function (or at least somewhere where it won't execute until the API has loaded). Right now your myCenter variable is defined outside the callback function.

Change:

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

To:

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

proof of concept fiddle

code snippet:

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" type="text/javascript"></script>

这篇关于获取“Uncaught ReferenceError：google未定义”使用Google Maps API发生错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆