Search code examples
javascriptgoogle-mapsobjectgoogle-maps-api-3

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

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

});
Solution

  • 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