Menu
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
});
};
});
});
});
977
Google Map Integration Related Configuration :Create one project and name as per your choice. Enable Google Map SDK for Android & iOS Platforms in Google Developers Console. You will get Google Map API Key through Credential Page. Select your project and then click on Create Credentials button and choose the API key.
The Google Maps APIs now support you in creating beautiful styled maps for your Android and iOS apps as well as your website using the same JSON style object.
The pricing system has also changed, but in practice, the services are still free for limited use. The maps now come with the watermark with “For Development Purposes Only.” This is showing because of one of the following reasons: The request is missing an API key. Billing has been disabled on your account.
With Google Maps you can develop customized map-based applications for your company. Whether a static or interactive map, mobile or browser-based, with the Google Maps Platform you can integrate customizable maps into shops, websites, apps, and business software.
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
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
