谷歌没有定义谷歌地图答案

【问题标题】：google is not defined google maps谷歌没有定义谷歌地图
【发布时间】：2017-05-04 20:13:54
【问题描述】：

我正在尝试从 google.maps.Map 对象扩展我的原型函数。但我得到了无法读取未定义的属性“firstChild”。

基本上我只想添加一个自定义原型对象，它也是 google.maps.Map 的一个实例下面是我的代码

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap&libraries=drawing" async defer></script>

function Map(id, options) {
    this.id = id;
    this.latlng = options.center;
}

Map.prototype = new google.maps.Map;

function initMap()
{
    map = new Map('map', mapOptions);
}

这是我收到的错误

所以我喜欢的是当我运行 'new Map('map', mapOptions)' 这将创建一个新的 google.maps.Map();实例，这将呈现一个地图。但我不确定我在这里缺少什么，因为我对在 javascript 中使用原型还很陌生。希望你能帮我解决这个问题。谢谢

【问题讨论】：

标签： javascript google-maps prototype

【解决方案1】：

您现在遇到的错误是由于 script 标签上的 async 和 defer 属性，看看这里http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/

评论后更新“我尝试删除异步和延迟，但出现找不到'firstchild'的新错误”

由于 google maps API 密钥，以下 sn-p 仅适用于 w3schools try it editor。

更新以使用继承

<!DOCTYPE html>
<html>
  <body>

    <h1>My First Google Map</h1>

    <div id="googleMap" style="width:100%;height:400px;"></div>
    
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU"></script>
    <script>
      function Map(id, options) {
      	var element = document.getElementById(id);
        // Call constructor of superclass to initialize superclass-derived members.
        google.maps.Map.call(this, element, options);
        
        this.id = id;
        this.latlng = options.center;

        this.customAddMarkerAtCenter = function(){
          return new google.maps.Marker({
            position: this.latlng,
            map: map,
            title: 'Hello World!'
          });
        }
      }

      Map.prototype = Object.create(google.maps.Map.prototype);
      Map.prototype.constructor = Map;


      function initMap()
      {
        map = new Map( "googleMap" , {
          center:new google.maps.LatLng(51.508742,-0.120850),
          zoom:5
        }, "mapId");
       
     	map.customAddMarkerAtCenter();
    
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(50.508742,-0.120850),
          map: map,
          title: 'Hello World!'
        });
        
        alert(map.id )
        alert(map.latlng )
      }
     
      
      
      initMap();
    </script>


    <!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->

  </body>
</html>

【讨论】：

我尝试删除 async 和 defer，但是出现了一个新错误，即找不到 'firstchild'
是的，但这是另一个错误，我已经解决了您的要求，我将使用工作演示更新我的答案
试过你的方法，但还是一样。此外，我想让新的 Map 原型的行为就像 google.maps.Map 对象一样。简而言之，我希望它继承 google.maps.Map 对象的所有内容
运气还是一样
您使用的是哪种浏览器？