Why isn't this an instance of map of google.ma

I am getting the error Assertion failed: InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama on a google map web page. I then read this question elsewhere here on Stack Overflow which told me I need an instance of the google.maps.MAP object. I thought that by calling that object in order to initialize the map that I would be calling that object.

Previously, I got the error i is not defined so I moved the createMarker function into the $.getJSON function where it has local scope.

Do I need to call google.mapsMap somewhere else?

What am I doing wrong?

HTML:

<body>
    <h1 style="text-align: center;">Hello World</h1>
    <div id="map"></div>
    <ul id="list"></ul>

</body>

CSS:

#map {
    height: 300px;
    width: 600px;
    border: 1px solid black;
    margin: 0 auto;
}

JavaScript:

function initialize(){
    var mapProp = {
        center: new google.maps.LatLng(38, -78),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map'), mapProp);
};

$(document).ready(function(){
    var url = 'https://opendata.howardcountymd.gov/resource/96q9-qbh7.json';
    initialize();
    $.getJSON(url, function (data){
        $.each(data, function(i, field) {
            $('#list').append("<li>" + data[i].location.longitude + " & " + data[i].location.latitude + "</li>");
            createMarker(data);

            function createMarker (data) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
                    map: map,
                    title: field.crossroad
                });
            };
        });
    });

});

标签： javascript google-maps object google-maps-api-3

3条回答

乱世女痞

2楼-- · 2020-07-06 03:35

The map variable that is an instance of a google.maps.Map is local to the initialize function. The map variable in the createMarker function is undefined. One option: define the variable in the global scope:

var map;

then just initialize it in the initialize function:

function initialize(){
    var mapProp = {
        center: new google.maps.LatLng(38, -78),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'), mapProp);
};

proof of concept fiddle

code snippet:

var map;

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(38, -78),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map'), mapProp);
};

$(document).ready(function() {
  var url = 'https://opendata.howardcountymd.gov/resource/96q9-qbh7.json';
  initialize();
  $.getJSON(url, function(data) {
    $.each(data, function(i, field) {
      $('#list').append("<li>" + data[i].location.longitude + " & " + data[i].location.latitude + "</li>");
      createMarker(data);

      function createMarker(data) {
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
          map: map,
          title: field.crossroad
        });
      };
    });
  });

});

#map {
  height: 300px;
  width: 600px;
  border: 1px solid black;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<h1 style="text-align: center;">Hello World</h1>

<div id="map"></div>
<ul id="list"></ul>

Another option would be to return the map from the initialize function

0人赞添加讨论(0) 举报

傲

3楼-- · 2020-07-06 03:50

The issue is definitely with js not being able to access the initialized map. For me in an angular project, the 'this.gmap' was giving an issue as 'this' was conflicting with some internal 'this' in the 'geocoder.geocode' stub. After breaking my head over this issue for a couple of hours, 'let that = this" outside the stub gave me access to the map initialized in another method.

        ngOnInit() {
        this.gmap = new google.maps.Map(document.getElementById('gmap'), {
          center: { lat: this.lat, lng: this.lng },
          zoom: this.zoom
        });
        this.getGeocode();
      }
       getGeocode() {
        debugger;
        let geocoder = new google.maps.Geocoder();
        let element= "Delhi";
        let that = this;
        geocoder.geocode({ 'address': element }, function (results, status) {
          console.dir(results);
          console.dir(status);
          if (status == google.maps.GeocoderStatus.OK) {
            that.results = results;
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
          that.setMarker();
        });
      }

      setMarker() {
        this.marker = new google.maps.Marker({
          position: this.results[0].geometry.location,
          map: this.gmap
        });
      }

0人赞添加讨论(0) 举报

劫难

4楼-- · 2020-07-06 03:53

For IE, If you are using InfoBox to display google maps marker. Please make sure that you put type="text/javascript" in the InfoBox script tag. Example:

<script type="text/javascript" src="../infobox.js"></script>

Hope it helpful

0人赞添加讨论(0) 举报

Why isn't this an instance of map of google.ma

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间