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