Downvote people: Note that this question is n̲o̲t̲ about Google Maps API V3. <google-map> is a GoogleWebComponent that displays a map automagically upon declaration in dom.
var map = document.createElement("google-map");
By only executing this line, it throws an error saying:
Uncaught TypeError: latitude must be a number
I don't even get a chance to set the latitude property.
Is this because I'm creating multiple google-maps (in different dom-modules) within the same page? If not, why is this happening and how do I solve this?
Added
Even doing something like this still yields the same error:
var map = document.createElement("span");
map.innerHTML = "<google-map latitude='1'></google-map>";
Related
I am using the Ionic Framework for an app I am creating and got stopped by this. I'm using the Geolocation module to get the user's current position. I have an object that stores the latitude and longitude as so:
location_coordinate: {
latitude: number;
longitude: number;
}
But when I try to save the latitude and longitude to my object (this.location_coordinate.latitude = resp.coords.latitude;) this doesn't work and an error is thrown.
Error getting location TypeError: Cannot set property 'latitude' of undefined
If I set it to a variable, for example:
latitude: number;
And then:
this.lat = resp.coords.latitude;
This works. Why is this so? Am I missing something?
Note: The resp.coords.latitude is what is returned from the get request.
Error getting location TypeError: Cannot set property 'latitude' of undefined.
This error probably means location_coordinate is undefined. Check the code where you have defined [or maybe never defined?] this.location_coordinate. Once this is set to some object, you should definitely be able to use this.location_coordinate.latitude = resp.coords.latitude;
In order to validate my hypothesis, you can do following:
Assign a constant instead to see if error persists: this.location_coordinate.latitude = 0;
Print the value of this.location_coordinate before accessing this.location_coordinate.latitude
I'm trying to persist an observable array to localStorage. To do this I'm using ko.toJSON.
var that = this;
this.items = ko.observableArray();
this.items.subscribe(function(){
localStorage.setItem("items", ko.toJSON(that.items()));
});
All that gets persisted to localStorage is false.
It throws a very random looking error: knockout-3.4.2.js:55 Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules.
Any idea what's going on here?
I get the error as well with a simple var json = ko.toJSON(that.items()); so it clearly comes from that. However, I do not get that error when simply doing this: var json = ko.toJSON([{'key': 'value'}]);.
UPDATE: Here's the full error message:
Uncaught DOMException: Failed to read the 'cssRules' property from
'CSSStyleSheet': Cannot access rules
at http://localhost:8080/js/knockout-3.4.2.js:55:405
at c (http://localhost:8080/js/knockout-3.4.2.js:56:172)
at b (http://localhost:8080/js/knockout-3.4.2.js:55:380)
at http://localhost:8080/js/knockout-3.4.2.js:56:23
at c (http://localhost:8080/js/knockout-3.4.2.js:56:172)
at b (http://localhost:8080/js/knockout-3.4.2.js:55:380)
at http://localhost:8080/js/knockout-3.4.2.js:56:23
at c (http://localhost:8080/js/knockout-3.4.2.js:56:172)
at b (http://localhost:8080/js/knockout-3.4.2.js:55:380)
at http://localhost:8080/js/knockout-3.4.2.js:56:23
UPDATE2: Here's the actual section of code where the problem lies:
This is the exact context of the problem:
this.savedPlaces.subscribe(function() {
// Add all places to filteredPlaces
that.filterPlaces();
// Reinitialize the filter
that.filterString("");
// Update the markers
that.updateMarkers();
// Store itself in localStorage
localStorage.setItem("savedPlaces", ko.toJSON(that.savedPlaces()));
});
When I comment out that last line, I get no issue.
I also get no issue if I replace it with: localStorage.setItem("savedPlaces", ko.toJSON([{item: "item"}]));
I tried to give an example of content for items but apparently observableArrays are deep (recursive) objects, making it impossible for me to copy paste for the DevTools console on Chrome. However it looks something like:
[{'marker': a_google_maps_marker_object,
'place': {data: mostly strings...}]
I found the issue.
My observable array contained a Google Maps marker. These are recursive arrays, which cannot be JSONified.
I removed the Google Maps marker from my array and everything was fine.
Still strange though that Knockout throws this cryptic error.
According to the Cesium API, to toggle the visibility of an asset's billboard (or label) you can simply assign the billboard.show property to false. When I attempted to do this, Cesium would error with
An error occurred while rendering. Rendering has stopped.
TypeError: undefined is not a function
...
This discussion from the cesium-dev google group includes some example code to toggle billboard visibility on/off. The same code does not work if you attempt show = false on an entity from CZML (this example does not use CZML).
Here is what I tried
var asset = loadedCZML.entities.getById(id);
asset.billboard.show = false; //Error!
(loadedCZML is a Cesium.CzmlDataSource)
The API doc's don't mention that the show property of your entity might not always be a simple boolean property (as the API describes).
When working with a CzmlDataSource's entity, the show property is considered a TimeIntervalCollectionProperty (at least it was with my CZML).
All properties in Cesium must implement a getValue function, and when you go to set your show = false, the setter for the property is unable to apply false to a TimeIntervalCollectionProperty and instead replaces the entire property with a simple value of false.
The error undefined is not a function is a result of the cesium render call attempting to call getValue() on our show property. Regardless, the fix is simple:
Instead of this:
asset.billboard.show = false; //error
Do this:
asset.billboard.show = new Cesium.ConstantProperty(false);
PS: This applies for other Cesium properties, see the following example:
entity.billboard.image = pinBuilder.fromColor(Cesium.Color.CRIMSON, 48); //error
//do this instead
entity.billboard.image = new Cesium.ConstantProperty(pinBuilder.fromColor(Cesium.Color.CRIMSON, 48).toDataURL());
I have been trying to figure out this particular problem in my developer tools, but I've had no luck thus far. I have an error on one of my js files that says
Uncaught TypeError: Cannot read property 'value' of null
The following error refers to the 1st variable of dt_version below. The particular thing is if I comment out the first line of code. I get the same error on the following variables of offload1 and offload2. The variable is a number that I am trying to get passed over. I run this function on my body when the page loads...onload=updatetotal();
function updatetotal() {
var dt_version = document.getElementById("dt_version").value-0;
var offload1 = document.getElementById("capacity_offload1").value-0;
var offload2 = document.getElementById("capacity_offload2").value-0;
var offload3 = document.getElementById("capacity_offload3").value-0;
}
If a run an if statement looking for document.getElementByID("dt_version");...it defaults to false..so its not being carried over though on the previous page, I can see its input fine with the value in it. What am I missing here guys?
This error means that the id dt_version does not exist. Check your html to make sure it is there:
var dt = document.getElementById("dt_version");
if (dt){
// do your stuff
}else {
console.log("dt does not exist")
}
Another cause for this error may be- as you are calling the javascript function on page load there is a possible chance that your control is not yet completely rendered to the page. A simple solution is just move that control to the beginning of the page. If it doesn't work then an reliable solution is, call the function inside jquery $(document).ready().
I have been trying to get my geocoder working this morning for the following URL but can't seem to figure out what I am doing wrong: http://www.dlplaw.com/media/map.html
When clicking encode, the geocoder is doing it's job and returning the correct Lat / Long coordinates but it gets hung up on setCenter.
Uncaught TypeError: Cannot call method 'setCenter' of undefined
I tried to follow the Google example here and can't understand why this won't work:
http://code.google.com/apis/maps/documentation/javascript/examples/geocoding-simple.html
Thanks in advance.
map is not in scope. You declare map twice – once in the global scope and once in initialize, but you only set the map in initialize (the global map is shadowed).
Remove the var from var map = new google.maps.Map(...); (but not the var map; at the top).