Why isn't this an instance of map of google.maps.Map? InvalidValueError: setMap: not an instance of Map;

Question

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 th

Answer 1

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
        });
      }

Answer 2

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

Answer 3

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