How can I clear a Map of all custom overlays?
I do not want my markers removing, instead, I only want the custom shape overlays that I have created to be removed. (circles, polygons, ect)
upd:resolved
If you have a collection of the overlays you want to remove simply iterate over that collection calling setMap(null):
function RemoveOverlays() {
for (var i = 0; i < overlays.length; i++) {
overlays[i].setMap(null);
}
}
Related
Thanks in advance. I'm trying to figure out how to add client faces (images) to certain locations on a map using the Nokia Here Map Image API.
I am able to do this via the Javascript API, but unfortunately I also need to be able to download an image for use in a generated PDF file, and I can't figure out how to add external images to the map.
Any help would be much appreciated. :)
I didn't exactly understand your requirement but if you want to convert the canvas which shows the map to an Image, you can do that with the map caprutre event, something like following should work
map.capture(function(canvas) {
if (canvas) {
var img = new Image();
img.src = canvas.toDataURL("img/jpeg");
window.open(img.src);
} else {
// For example when map is in Panorama mode
alert('Capturing is not supported');
}
}, [ui], 0, 0, document.getElementById("mapContainer").offsetWidth, document.getElementById("mapContainer").offsetHeight);
When a user drags the little yellow man onto the screen, it transitions into a full screen street view. This is good. However, it also litters the screen with my map markers. This is bad.
The hard way of solving this is for me to loop through every possible marker I could have on the map, storing which were visible before street view was initiated, and then restoring them when street view is done. But I can't find a street view initiation event anywhere in the API documentation.
The better and easier solution would be to set some option like "Don't show my markers while in street view."
Edit: managed to find a way to monitor the state of street view. How to detect enter and exit streetView in Google Maps API v3
However, I'd still like to know if there's a way to just... not show markers when in street view.
Final edit:
I'm including the 'solution'. This is a simplified version of what I ended up writing, because the layers each touch various modules throughout the application, so they aren't as simply handled as is shown.
Final solution:
// Add listener for when we go into street view.
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function() {
var setAllMap = function (mapObjects, state) {
for (var i = 0, len = mapObjects.length; i < len; i++) {
mapObjects[i].setMap(state);
}
};
// If street view was just activated
if (this.getVisible()) {
// hide everything
setAllMap(LayerOne, null);
setAllMap(LayerTwo, null);
setAllMap(LayerThree, null);
// If we're leaving street view
} else {
// show the marker layers that were on
setAllMap(LayerTwo, true);
setAllMap(LayerThree, true);
// If visibility state was true
if (LayerOne.getVisible()) {
setAllMap(LayerOne, true);
}
if (LayerTwo.getVisible()) {
setAllMap(LayerTwo, true);
}
if (LayerThree.getVisible()) {
setAllMap(LayerThree, true);
}
}
});
Using the listener in the answer you posted, see when street view is active and do setAllMap(null); to hide the markers. When it leaves street view, do setAllMap(map); to show the markers again.
Edit (from the Google Maps documentation):
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
I was fiddling a bit with Here Maps and with some some of the examples Here Javascript API Explorer and Here Maps on GitHub.
I tried to see if there's already a way to just add a visual bearing attribute in addition to longitude and latitude and have something like a small tip appear to the marker. This feels like something that many would like to have, so just to check I haven't missed anything obvious...
Is there a way to add visual bearing information to markers?
If not, does anyone know if there's an example of using a custom marker to achieve this I just couldn't locate?
There is no bearing/heading control ready available within the API - you will have to create a custom map component of your own. The usual way of doing this would be to inject some HTML as a new DOM element within the map control.
Firstly define your custom HtmlControl as shown:
function extend(B, A) {
function I() {}
I.prototype = A.prototype;
B.prototype = new I();
B.prototype.constructor = B;
}
function HtmlControl (html, id) {
nokia.maps.map.component.Component.call(this);
this.init(html, id);
}
extend(HtmlControl,
nokia.maps.map.component.Component);
HtmlControl.prototype.init = function (html, id) {
that = this;
that.id = id
that.set("node", document.createElement("div"));
that.node.innerHTML = html;
};
HtmlControl.prototype.getId = function() {
return "HtmlControl." + this.id;
};
HtmlControl.prototype.attach = function(map) {
map.getUIContainer().appendChild(this.node);
};
HtmlControl.prototype.detach = function(display) {
map.getUIContainer().removeChild(this.node);
};
Then set up the map and add the custom component as shown:
htmlControl = new HtmlControl(
"<img id='compass' style='left:4em;top:1em;width:100px;height:100px' src='...'/>", "Compass");
map.components.add(htmlControl);
The source file for the <img> element will need to hold the compass image. This is most likely to be an image with due North pointing upwards since the map control is based on the Normalized Mercator projection
Alternatively look at using the Map Image API and investigate the ra parameter to rotate the map.
The new feature for StreetView API 3 is that there is a label (called description) over the links (arrows of possible movement direction) on panorama.
I can turn on/off the links by the StreetViewPanoramaOptions.linksControl option, but I've found no way to display links without the labels, like in API 2.
I tried to intercept link-change event and overwrite link definitions, but it seems that the StreetViewPanorama.getLinks() returns a copy of the list: there is no effect on panorama image when I change the result array.
Is it possible to do it?
Well, I tried again and find out that my original statement about the links being unmodifiable was incorrect. With the following code, I was able to erase all the labels:
this.displayInContainer = function( container ) {
validatePano = new google.maps.StreetViewPanorama(
document.getElementById(container),
this.currentPanoramaOptions);
var obj = this;
google.maps.event.addListener(validatePano, 'links_changed', function() {
var links = obj.panoObject.getLinks();
for(var i = 0; i < links.length; i++ ) {
links[i].description = "";
}
});
}
How i can remember in older versions of Gmaps API was it possible, to make a custom Overlay for adding a Markers on it and than add or remove from main map. Also it was possible to make different groups of results and show/hide it in only one command. In the new reference i can not find it, did they have rename it?
You're talking about a GLayer - https://developers.google.com/maps/documentation/javascript/v2/reference#GLayer
It has, in fact, been removed from the v3 API.
In API v3, it's been left up to the developer to keep track of their overlays and add/remove them from the map as they wish.
The best way to do this is keep your overlays in an array (or an object) and loop through them.
For example, if you had two distinct sets of overlays (infoWindows and markers), you could do something like this:
var overlays = {
markers : [],
infoWindows : []
};
//create a marker and put it in markers
var marker = new google.maps.Marker();
overlays.markers.push(marker);
//create an infoWindow and put it in infoWindows
var infoWindow = new google.maps.InfoWindow();
overlays.infoWindows.push(infoWindow);
//remove all infoWindows from the map
for(var i=0;i<overlays.infoWindows.length;i++) {
overlays.infoWindows[i].setMap(null);
}
//remove all markers from the map
for(var i=0;i<overlays.markers.length;i++) {
overlays.markers[i].setMap(null);
}
It's a simplistic example, but hopefully you get the idea: that adding, managing, and removing "groups" of overlays in v3 is left up to the developer.