I am writing a google heatMap application and I need to delete the data which heatmap layer contains. Is there some solution? I went trough all stack overflow and can not find the proper solution. Everywhere they advise to do something like this:
heatmap.setMap(null) but this only hides the map, and when I do heatmap.setMap(map) the layer appears again
You can't delete a variable in javascript but you can assign as undefined
heatmap = undefined;
so heatmap is not a valid object
You can easily just set the data to an empty array
heatmap.setData([])
heatmap.setMap(this.map)
Related
Been trying to get my head around this for some time although clearly i'm missing something
what i am trying to do is not draw a new map although provide a src link to say (https://www.google.com/maps/d/u/0/embed?mid=1xI_dALvs0A-oySG-dkf4BYeDyBk) to something of the below
https://developers.google.com/maps/documentation/javascript/styling
I want to embed my custom map with the markers to my site and styling it
I guess map = new google.maps.Map(document.getElementById('map') has something to do with the drawing of the new map although not too sure as to take it out or what.
is there anyway to use the custom map + .json code rather than hard coding an array of poi's as would like to rely on it pointing through to the custom map link for the markers
is there any better way to get around this
Google Maps JavaScript API can load data that were stored in GeoJSON format. So you have to look into GeoJSON specification and create corresponding file for your markers (or polylines, polygons, etc.).
The Google Maps JavaScript API documentation explains how to load the GeoJSON data via Data layer of maps:
https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson
You should combine the styling example with GeoJSON example from the documentation to achieve your goal.
Here is the github link - https://github.com/hpi1hpi/custom-google-map-with-json
Add google map with custom color and data from JSON with slider
I load data for my Google Maps v3 with GeoJSON:
that.map = new google.maps.Map($('#map')[0], mapOptions);
that.map.data.loadGeoJson('http://localhost/geoserver/...');
Now, at some point on some user event I need to get one marker and paint it blue.
I can set different color with setIcon.
My idea is to get all features, then iterate through them, find the right feature (based on UNIQUE feature data field) and find marker behind that feature and change icon. I found some approaches that store all markers in array, but don't know why I need another array. Computer resources are important and I don't want to duplicate things.
I need help with, how to get features and how to get Marker object associated with selected feature. If there is a better way to do it, please...
UPDATE
I found this:
var feature = this.map.data.getFeatureById(ID);
I just need to get feature Marker. How? Doesn't look that Feature class has method for that?
There is no method/property that gives you access to the shape(marker,polygon,etc.) that has been created by the API.
To set a new icon-property for a particular feature use overrideStyle:
map.data.overrideStyle(feature, {icon: newIconSettings});
Another option is:
that.map.data.setStyle(function(feature)
{
var color = 'red';
if (feature.getProperty('color'))
{
color = feature.getProperty('color');
}
return ({ // #type {google.maps.Data.StyleOptions}
icon: 'http://maps.google.com/mapfiles/ms/icons/' + color + '-dot.png',
});
});
But it is not as good as Dr. Molle solution, because it needs to iterate through entire features set. I found it on google api documentation (look for title Change Appearance Dynamically).
I've googled, looked through S.O., and even just ran through the javascript properties using firebug, but I just can't find a way to get the maxIntensity property in a google heatmap. I can set maxIntensity, when instantiating the new map.
According to the docs here: https://developers.google.com/maps/documentation/javascript/3.10/reference#HeatmapLayer
there's no method for getting to the heatmap options object either, just setting as well.
Any ideas?
You can get it, assuming heatmap is the heatmap layer:
heatmap.get('maxIntensity')
First, would suggest taking a look at the Google Maps Documentationj. The provided solution seems correct, you can double check with the
heatmap section.
let heatmap = new google.maps.visualization.HeatmapLayer({
data: locations,
map: map,
maxIntensity: maxI,
radius: rad,
opacity: opac
});
Yes, I did research here and found so far only references to the MarkerClusterer plugin, or pointers to using KML or Fusion table layers.
This: https://developers.google.com/maps/articles/toomanymarkers#markermanager
was also an interesting read.
I'm thinking this should be relatively easy, no? Let me try to express what I'm doing in pseudo-code:
WILE event: "drag the map"
get current viewport bounds
load ajax call to look up markers that are located inside current viewport
remove previously visible markers
add newly visible markers to the display
END WHILE
I'm not that great at proper computer-science programming type stuff and struggle with the necessary structure for performing an efficient loopable action like this that continuously updates the marker array.
Somehow my gut feeling tells me this might be an inefficient way - should I approach this differently? What I'd like to avoid is updating the marker array on drag end.
Thanks for any help.
After some fiddling and further searching, the solution is buried here: google maps v3 duplicate markers - using an array to manage markers but still get duplicates
Is it possible to create custom layers/overlays in google maps?
As an example, would it be possible to have one layer with polygons, another with circles, and a third with markers? and then hide/show these layers individually?
I tried looking at the documentation, but the layers seems to only be a fixed set of predefined layers. And overlays seems to only support image overlays.
Any help on this is appreciated.
I'm not sure if there exists a better way to do this, but I've found a workaround to a similar problem. My example utilizes markers and polylines, but it should be easy to extend the functionality to circles and polygons too.
Link to JSFiddle
Basically it works like this:
Initialize the map.
User selects an option what he would like to see on the map.
Click triggers a method (see HTML part of the fiddle) in the map object that first clears the map and then pushes new overlays on map.
The data that is currently shown on map is stored in arrays, and the map clearing method simply goes through these arrays and checks if there exists any content on map, and removes them if does.
Hope this helps. Cheers!