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