javascript - google is not defined google maps

I'm trying to extend my prototype function from google.maps.Map object. But I'm getting the Cannot read property 'firstChild' of undefined.

Basically I just want to add a custom prototype object that is also an instance of google.maps.Map Below is my code

<script src=";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);
}

and here's the error I'm getting

So what I like is when I run 'new Map('map', mapOptions)' this will create a new google.maps.Map(); instance and this will render a map. But I'm not sure what I'm missing here as I'm fairly new to using prototype in javascript. Hope you can help me with this. Thanks

I'm trying to extend my prototype function from google.maps.Map object. But I'm getting the Cannot read property 'firstChild' of undefined.

Basically I just want to add a custom prototype object that is also an instance of google.maps.Map Below is my code

<script src="https://maps.googleapis./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);
}

and here's the error I'm getting

Share Improve this question asked May 4, 2017 at 20:13 MadzQuestioning 3,78212 gold badges54 silver badges84 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

The error you are having right now is because of the async and defer attribute on the script tag, take a look here http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/

Update after ment "I tried removing the async and defer but a new error of cannot find 'firstchild'"

The following snippet will only work from w3schools try it editor because of the google maps API key.

Update to use inheritance

<!DOCTYPE html>
<html>
  <body>

    <h1>My First Google Map</h1>

    <div id="googleMap" style="width:100%;height:400px;"></div>
    
    <script src="https://maps.googleapis./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./graphics/google_maps_basic.asp
-->

  </body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - google is not defined google maps - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)