We Keep Coding

I cannot get my HERE Map javascript code to work in a Thingsboard Widget

I am trying to build a custom map widget in Thingsboard using Here Maps API for JavaScript, as a base map for IoT device reporting on an interactive map. The code comes back as no error, but it does not load.
I am new to JavaScript and APIs. So I'm obviously missing something.
I have exhausted the HERE Maps API examples and have tried with no luck to find an answer on any forum.
function loadMap() {
var platform = new H.service.Platform({
'apikey': 'APIKEY_HERE'
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map, {
zoom: 14,
center: {
lat: 13.72,
lng: 100.56
}
});
}
function addCircleToMap(map) {
map.addObject(new H.map.Circle(
// The center or the circle will be on
// latitude 13.72 longitude 100.56
[13.7230949, 100.5699041],
// The radius of the circle in meters
200,
{
pen: {
strokeColor: '#4287f5', // Color of the perimeter
lineWidth: 2
},
brush: {
color: '#42ddf5' // Color of the circle
}
}
));
}
No error messages, just a widget that never loads, spinning orange circle as a result.

Google Maps Javascript API, how do you draw new markers and center without refreshing the page?

Google Maps Example
I want to add a button to my page that when clicked the map removes the old markers, adds new markers and centers over the last marker added.
For example, call update() and it posts to server and returns new data for map,
function update() {
$.post( '[website]', { post:'map' }, function(data) { if(data) { ??? }});
}
I know there is a way to modify the map by adding internal controls onto the map, but is there a way to basicaly create a new map with new data without reloading the page?

Found it, Listening to DOM events
function initMap() {
var myExternalButton = document.getElementById('myExternalButton');
var map = new google.maps.Map(mapDiv, {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
});
google.maps.event.addDomListener(myExternalButton, 'click', function() {
window.alert('External button was clicked!');
});
}

ArcGIS interactive KML layer

I am working on an ArcGIS map. I need to be able to interact with KML layers.
Here is a minimal version of my current code:
map = new Map("map", {
basemap: "topo",
center: [-108.663, 42.68],
zoom: 6
});
parser.parse();
var kmlUrl = "https://dl.dropboxusercontent.com/u/2142726/esrijs-samples/Wyoming.kml";
var kml = new KMLLayer(kmlUrl);
map.addLayer(kml);
kml.on("load", function() {
console.log("done");
});
Here is a fiddle
I'm looking to achieve something more like this map, which outlines the layer on hover. (This example is from the FeatureLayer class, but my KML is dynamically generated. Is it possible to create a featurelayer dynamically from KML data?)
How can I listen for mouseover on a KML shape?

I figured it out...
var kmlUrl = "https://dl.dropboxusercontent.com/u/2142726/esrijs-samples/Wyoming.kml";
var kml = new KMLLayer(kmlUrl);
map.addLayer(kml);
kml.on("load", function() {
var layers = kml.getLayers()
layers[0].on("mouse-over", function () {
alert("test");
});
});
Turns out the KML layer is actually composed of FeatureLayers. The solution is to get the Feature Layers from the KMLLayer wi the getLayers() method.

Preserving Google map zoom to kml layer on checkbox click

I'm attempting to add multiple kml layers to a map that can be turned on and off with check boxes. I got that part working (yay!). When I click on a layer to turn it on, it zooms in (this is fine), but when I unclick to turn the layer off, it zooms back out to my map extent. How do I get it to preserve the zoom of the last loaded layer? Code below.
<script>
var map;
var watershedLayer = new google.maps.KmlLayer ({
url: 'http://mvihes.bc.ca/mapping/watersheds.kmz'
});
var ere1949Layer = new google.maps.KmlLayer ({
url: 'http://mvihes.bc.ca/mapping/ere1949.kmz'
});
function initialize() {
var parksville= new google.maps.LatLng(49.316786, -124.308768);
var mapOptions = {
zoom: 9,
center: parksville
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
check();
}
function check()
{
if(document.getElementById('watersheds').checked)
{watershedLayer.setMap(map);}
else
{watershedLayer.setMap(null);}
if(document.getElementById('ere1949').checked)
{ere1949Layer.setMap(map);}
else
{ere1949Layer.setMap(null);}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I tried using the preserveViewport function but it just stopped the layer from zooming in, which is not what I wanted. I'm new to javaScript so possibly I'm missing something obvious...any help would be appreciated!
jsfiddle

Set the map-property of a selected layer only when it's not set yet:
function check()
{
if(document.getElementById('watersheds').checked)
{if(!watershedLayer.getMap())watershedLayer.setMap(map);}
else
{watershedLayer.setMap(null);}
if(document.getElementById('ere1949').checked)
{if(!ere1949Layer.getMap())ere1949Layer.setMap(map);}
else
{ere1949Layer.setMap(null);}
}
http://jsfiddle.net/jhagmq7L/16/

You can also attach max and min zoom levels to the map, something to consider the over all map zoom when loading kml layers.
// sets the min and max zoom levels of the map
var opt = { minZoom: 6, maxZoom: 18 };
map.setOptions(opt);

Geolocation marker not appearing, Google Maps API V3

I'm building a mobile map using the Google Map API V3. The is a little different than a standard map in that I have categories of markers than you can turn on/off. Everything works great, but I can't seem to get geolocation working. I've tried every combination and code snippet I can find and at most I can get it to register the location request, but it will not display a marker there no matter what I do. I'm sure I'm doing something very simple wrong, but I'm very new to Javascript so the answer is evading me.
Here is a shortened version of my current code (contains an example of everything, but cuts out a lot of the repetitive variables). This example doesn't include the geolocation functions since I've tried so many in different ways I'm not sure which one I would even put on here. The toggleMarkers() function is what I'm using to turn on/off the markers and I'm guessing that's where the problem is for the geolocation marker being displayed. If you could show me how to implement geolocation within this code I would greatly appreciate it!
var markers = [];
function initialize() {
//Setting Map
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(45.73158,-122.636277),
mapTypeId: 'satellite'
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(0);
//Marker Categories
var markerBuildings = {
category: 'buildings',
}
var markerParking = {
category: 'parking',
}
// Icons
var iconBuilding = new google.maps.MarkerImage('images/building.png',
new google.maps.Size(32, 37),
new google.maps.Point(0,0),
new google.maps.Point(16,32));
var iconAmphitheater = new google.maps.MarkerImage('images/amphitheater.png',
new google.maps.Size(32, 37),
new google.maps.Point(0,0),
new google.maps.Point(16,32));
//Coordinates
//Buildings
var vmcb = new google.maps.Marker({
position: new google.maps.LatLng(45.730513,-122.638106),
map: map,
url: 'http://www.google.com/',
icon: iconBuilding,
data: markerBuildings
});
markers.push(vmcb);
var vadm = new google.maps.Marker({
position: new google.maps.LatLng(45.730899,-122.637742),
map: map,
url: 'http://www.google.com/',
icon: iconBuilding,
data: markerBuildings
});
markers.push(vadm);
}
function toggleMarkers(attr,val) {
if (markers){
for (i in markers) {
if(markers[i].data[attr] == val){
var visibility = (markers[i].getVisible() == true) ? false : true;
markers[i].setVisible(visibility);
}
}
}
}

If you could show me how to implement geolocation within this code I would greatly appreciate it!
call getGeoLocation() (below) after you create the map object
function getGeoLocation() {
// http://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt
var options = null;
if (navigator.geolocation) {
if (!browserChrome) {
// By using the 'maximumAge' option, the position
// object is guaranteed to be at most 15 seconds old.
// FF and Safari seem to like these options; Chrome does not
options={enableHighAccuracy: false, maximumAge: 15000, timeout: 30000};
}
else {
// Request a position. We only accept cached positions, no matter what
// their age is. If the user agent does not have a cached position at
// all, it will immediately invoke the error callback.
// http://dev.w3.org/geo/api/spec-source.html
// Chrome will not allow this submitted via the file:// protocol
options={maximumAge:Infinity, timeout:0};
}
navigator.geolocation.getCurrentPosition(function(position) {
centerIsSet = true
canGeolocate = true;
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(pos);
},
getGeoLocationErrorCallback(true),
options);
}
else {
// browser doesn't support geolocation
getGeoLocationErrorCallback(false);
}
}