Question

31

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

rated 0 times [ 36] [ 5] / answers: 1 / hits: 44042 / 9 Years ago, tue, november 10, 2015, 12:00:00

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

                });

            };

        });

    });



});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

denzelc

Add To Favorites

Follow

Total Points: 637

Total Questions: 89

Total Answers: 88

Location: Liechtenstein

Member since Wed, Dec 8, 2021

3 Years ago

answered 9 Years ago alejandro · Accepted Answer

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