Question
I'm working with Adobe Scene7 BasicZoomViewer and I'm looking for a way to tell the ZoomViewer to reset the zoom so that the user is no longer zoomed in on an image but instead will show the default "zoom" level.
What I've found
The closest thing I found to what I need is this reset property ZoomView.reset which "Resets the viewport when the frame (image) changes. If set to 0 it preserves the current viewport with the best possible fit while preserving the aspect ratio of the newly set image".
This looks close to something I need but it states that it will reset or preserve the aspect ratio when a new image has been inserted but I am not inserting new images.
Demo from Adobe
There is a button on the image that the API inserts into the page that resets the zoom level. Adobe provides a demo page that shows what I'm working with. If you look at the bottom left, the right-most button is the reset button. When clicked, it has to make some kind of API call and I need to figure out which one it is.
Edit
I've been able to find a minified version of the BasicZoomViewer and I am currently attempting to make sense of the code.
There is an event listener placed on the "Zoom Reset Button" that just simply calls a reset() method on line 274 in the uglified version of the file. Currently, I am trying to make sense of the file and figure out how to access this method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
I will be answering my own question. If someone finds a better way please feel free to answer as well.
tldr;
Create a variable to hold the instance of your s7viewers.BasicZoomViewer() and inside of that you can access the event handlers and much more.
Example of calling the reset zoom handler
// instantiate the s7viewers class and save it in a variable
var s7BasicZoomViewer = new s7viewers.BasicZoomViewer({
containerId: 's7viewer',
params: {
asset: assetUrl,
serverurl: serverUrl
})
// example of how to call the "zoomReset()" method
s7BasicZoomViewer.zoomResetButton.component.events.click[0].handler()
Explanation
After digging through the minified code that was uglified I found an event listener on the s7zoomresetbutton DOM class name, or perhaps it's watching for the ID of that DOM element which is the same ID as the container div for your S7 BasicZoom Viewer plus some added text to make this ID unique. For example, if the container div is s7viewer then the reset zoom button will have an ID of s7viewer_zoomresetbutton.
Now, going through the code I found this event listener which let me know there must be some way to call the zoomReset() method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
In the code above, the value of c is this or in other words it's the instance of your S7 BasicViewerZoom and in my case I have multiple depending on how many images I need to zoom on.
When instantiating the s7viewers class you can then reference that instance later and access the event handlers on each button and other properties and methods.
From there it was just looking through the object returned from the instance and calling the handler for the reset button.
When using MarkerClustererPlus - I would like to hang some code on an event that is triggered when a marker that is in a cluster is shown / hidden by the markerClusterer.
MC+ Doco doesn't seem to indicate such an event.
Looking at the MC+ code it appears that the clusterer uses marker.setMap() and markers don't have a "map_changed" event.
I could add code to the clusterer to trigger an event whenever a marker.setMap is invoked but I'd rather not alter code that works so well - don't want to create a configuration management problem whenever markerClustererPlus is updated.
Any suggestions?
Shortly after posting the question, I discovered that I could hang an event on marker, 'map_changed'.
google.maps.event.addListener(myMarker, 'map_changed',
function() { do stuff });
I think this is an MVC state change event rather than an explicit marker event (i.e. it isn't defined as a marker event in the documentation).
(see Google event doco here) and Google marker event doco here
The only remaining question is - it would be nice to verify that this is an MVC state change event rather than an undocumented / unsupported marker event that could break or disappear - How can I do that?
As of Google Maps API v3.6, maps now include "points of interest", which are gray markers embedded into a map. When the user clicks on this icon, an InfoWindow appears with information about that business (or park, hospital, etc.)
These can be turned off by setting the Styling. (See "Style Array Example")
https://code.google.com/apis/maps/documentation/javascript/styling.html
Once they are turned off, the icons, names, and shaded regions (for parks and hospitals) go away.
Before Google Maps API v3.6, there were no icons; only the names and regions.
The question: is there a way to remove the "click icon to open info window" behavior of these points of interest? I still want to keep the icons, names, and regions; only want to remove the click behavior.
Alternate question: is there a way to download/save the JavaScript of the v3.5 of Google Maps API to store on my server? At present, v3.5 is working fine for what I need. In February, Google will no longer provide v3.5 of the code and will instead provide only v3.6, v3.7, v3.8.
Retiring of minor versions of Google Maps API v3, and using the "frozen" version of an API:
https://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning
Things I've tried and considered: Adding an event listener when the map is clicked does not work, because the embedded markers are clicked instead of the map. Adding "clickable: false" as a property was a shot in the dark, with no result. Setting "visiblility: off" removes it all, leaving the map with less content. Setting "visibility: simplified" removes the name of the location, though the onclick behavior is still present. Putting an invisible DIV overlaying the map might work, though it would remove the ability to pan/zoom/drag the map without increasing complexity.
Setting a style so that featureType: poi, elementType: labels, visibility: off will result in showing the pink/gray/green regions for hospitals/cemeteries/parks, without the marker or name. It returns more color to the map.
I'm not sure if this is still relevant to you, but Google did, indeed, solve the issue on April, 2016, all you need to do is clickableIcons to false in MapOptions
This issue has been logged with google at:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3866
Please star and comment your needs on this issue there.
I'm not sure this is not a violation of the Google Maps TOS, it's a bit hacky, and doesn't work on IE < 9, but you can listen on dom event,
to detect the creation of the window, using Mutation Observer
Here is a plunkr to demonstrate : http://plnkr.co/edit/pGep9OZFligLhRtHlhgk
You can check in the console, an event is fired (actually twice) when you click on a POI, and the window is hidden
By referencing this URL (https://stackoverflow.com/a/24234818/6160436), I somehow managed to hide the Info windows of POI and call the click event listener of map when the user clicks on the POI.
But I'm not sure whether this violates TOS or not, so use at your own risk.
//keep a reference to the original setPosition-function
var fx = google.maps.InfoWindow.prototype.setPosition;
//override the built-in setPosition-method
google.maps.InfoWindow.prototype.setPosition = function () {
//this property isn't documented, but as it seems
//it's only defined for InfoWindows opened on POI's
if (this.logAsInternal) {
if (this.getPosition()) {
console.log(this.getPosition());
google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
}
else{
google.maps.event.addListenerOnce(this, 'map_changed',function () {
console.log(this.getPosition());
google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
// var map = this.getMap();
// //the infoWindow will be opened, usually after a click on a POI
// if (map) {
//trigger the click
var removeInfoWindow = null;
removeInfoWindow = setInterval(function(){
if ($('.gm-style-iw').parent().length) {
$('.gm-style-iw').parent().hide();
clearInterval(removeInfoWindow);
};
},1);
// }
});
};
}
//call the original setPosition-method
fx.apply(this, arguments);
};
google.maps.event.addListener(map,'click',function(e){
alert('clicked #'+e.latLng.toString())
console.log('ok');
});
A couple of things to be aware of:
1)
If your map is high traffic, you may find yourself in violation of the Google Maps TOS. You're supposed to use an official version. If it's your own blog or something else low traffic, nobody will notice or care.
2)
This is only conjecture on my part, but I noticed these POI's myself and got annoyed by them. I am pretty sure these are paid-for "inline ads", so to speak. Some gas stations and diner chains have them, so you will soon see Google maps being spammed with these POI markers. If they allow those to be turned off in the API, it kind of goes against the business interests of those who paid for the POI icon... so I highly doubt that you will be able to remove them.
If you do find a way,please please DO POST the solution! Thanks.
I'm removing an UIComponent but parts of it last being visible.
It redraws only when I move mouse around or something. I tried to do validateNow() on its parent, tried to do setTimeout(validateNow, 100) but it doesn't help. When I call it by setTimeout it seems these artifacts shown more rarely but it doesn't solve a problem in all cases. Please guide me someone to read about validateNow(), how it works and how to make these things correctly.
The code is below:
protected var bubble: SpeechBubble;
// creation
bubble = new SpeechBubble();
map.addChild(bubble);
//...
// removing
bubble.visible = false;
map.removeChild(bubble);
map.validateNow();
setTimeout(map.validateNow, 100);
map is Google Map for Flex.
The reason this is happening is because you're messing with the Google Maps drawing logic. You should look at the developer guide provided by google. It mentions in the controls section that to create a custom control, you need to extend ControlBase.
You may need to trigger invalidation before calling validateNow(). The call to validate now causes the code to check if any of the invalidation flags are set (properties, display list, or size) then for each calls the appropriate method to correct the invalidation (commitProperties, updateDisplayList, measure) in your case it sounds like it's just not doing the clear call to the graphics or redrawing appropriately so you may need to call
bubble.invalidateDisplayList();
bubble.validateNow();
Also hope one of these solutions works out for you, generally speaking forcing validation at a given time is not usually a good idea as the framework components should trigger the appropriate invalidation and subsequent validation in it's life cycle, but I can't say I haven't done this myself :).
Shaun
You may use includeInLayout property
bubble.visible = false;
bubble.includeInLayout = false;
Example demonstrates this property
The Beauty of includeInLayout
hopes that helps
I am able to render a google map on a flex canvas. I create the map using the code below and then place markers on it in the onMapReady method (not shown)
var map:com.google.maps.Map=new com.google.maps.Map();
map.id="map";
map.key="bla bla";
_mapCanvas.addChild(map);
map.addEventListener(MapEvent.MAP_READY,onMapReady);
It all works fine. However, if I remove the map and then set _mapCanvas to null, then run exactly the same code again, the onMapReady event does not fire. It is weird, but once a map has been created and deleted, the onMapReady event never seems to fire again.
Anyone got any ideas?
Thanks.
I still don't know why this was happening, but I worked around the issue by creating the map as an application-level variable, only instantiating it once, and then adding and removing it from canvases as required. Not ideal, but at least I can now display and remove a map dynamically, even if it exists in memory between invocations.