i have a problem on my map application, i am trying to put a coustom control on a Panorama and when users click to this custom button, panorama informations wll be saved.
For this purpose, i am using a function to check if there is a panaroma data exists
function checkforstreetview(mapid){
service.getPanoramaByLocation(markers[mapid].getPosition(), 50, function(r,status){
if(status==google.maps.StreetViewStatus.OK){
google.maps.event.addListener(markers[mapid], 'click', function (e) {
panorama[mapid].setVisible(true);
return false;
});
panorama[mapid].setPosition(markers[mapid].getPosition()); // custom control is moving to the left occurs here
}
});
}
as first, i am getting marker position on the map and check for panorama within 50m then if there is a panorama data, i am binding an click event to the marker for switching to panorama.
I am placing customdiv control via;
panorama[mapid].controls[google.maps.ControlPosition.TOP_CENTER].push(customdiv[0]);
Html markup of custom control is:
<div id="customdiv" title="Get data" style="height:10%;cursor:pointer;margin:0 auto;"><img src="/customdiv.jpg" style="height:100%;float:right;margin:5px;"/></div>
At the same time, i've assigned a function for drag and drop event for marker (with addlistener method), so if the marker drag'n drop to another position, checkforstreetview function is executed again.
So, what is the main problem?
In first execution there is no problem, when i click to the marker, panorama opens correctly and custom control is correctly placed but after close the panorama, drag'n drop marker to another position and click to marker again to show new panorama for new position, custom control moving to the left of panorama view.
Correct positioning (when system is initially loaded)
And buggy positioning (when i switch to panorama view in second time with marker click)
Extra information :
Because of google maps need to know height and width of container to work properly, i am using visibility: hidden rule for map container, not display:none but i think this cannot be problem bacause, on system load everything works correctly.
I've tested on Windows 7 / Firefox - Chrome - Opera - Safari - IE (lastest versions)
Tried solutions:
Many CSS hacks
Re-positioning custom control via google.maps.ControlPosition.TOP_CENTER
I've tried to put custom control to another positions BOTTOM_CENTER, LEFT_BOTTOM, .. etc but every time, custom control is moving to another position (shifting to the right, top, left )
Finally, i've commented out panorama[mapid].setPosition(markers[mapid].getPosition()); line and i've used standard packman to panorama/map switching then there is no problem on custom control positioning.
EDIT : Another interesting point is, after wrong positioning of custom control (and adress bar) when i click to next/previous arrows for next/previous images of panorama, custom control and adress bar becomes normal (correct position)
What can be the solution to stop shifting/moving costom control?
Thanks right now...
You cannot designate static CSS for the API, you must tell the maps API what you want your CSS to be (assign CSS properties in javascript):
https://developers.google.com/maps/documentation/javascript/examples/control-custom
I've resolved the issue by below function
google.maps.event.addListener(panorama[mapid], 'position_changed', function() {
google.maps.event.trigger(panorama[mapid],'resize');
});
Related
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.
I have a list widget with five rows per page. When the user goes to the next page I reload the page (by doing an unload/load on the data source with the new page number) and that works fine. However, the list stays scrolled to the bottom. How can I scroll the list to the top so the user does not have to?
I tried the ways that work in standard HTML but they do not work in AppMaker, and I cannot find any documentation on how to do this.
Thanks for any tips or pointers.
I realize this is an old post, but for future visitors, here's what worked for me - you need to set the index of the list to zero. App Maker ensures that it scrolls the last selected item into view, and maintains this across navigations.
You can do this by passing in a callback function that runs after loading the list. For me, I reload the list from a dropdown widget that filters the list, so in the onValueChange event I've added:
// Load datasource
widget.datasource.load(function() {
// Set index to 1 to ensure we scroll to top of list
app.datasources.YOURDATASOURCE.selectIndex(0);
});
You can achieve the desired behavior by doing the following:
In the outline, locate the TablePanel widget and select the List:TableBody widget
2.In the property editor, scroll to the Events section and click on the onDataLoad event value. Then click on Custom Action.
Type in this code var elem = widget.getElement(); elem.scrollTop = 0; so that it looks like this
Make sure the change is saved and then preview your app and it should work. Let me know if you need something else or if it don't work.
For me Morfinismo's answer didn't work, but the following did:
In the style editor add CSS for the List element:
.app-pageName-nameOfTheListWidget {
overflow-y: auto;
}
And in the Property Editor under Layout set a Max height.
Is it possible to add a listener for the click event on the icons and/or labels that appear for styled maps? I have a form that allows entry of Points of Interest. Since the poi styling shows icons and/or labels for many potential candidates, and clicking on one opens an infowindow with address info, etc, I would like to capture this address info to the fields on my form if the user clicks on one.
There is no API-based access to the POI's .
But there is a possible workaround.
When you click on a POI an InfoWindow opens. It's possible to modify the InfoWindow-prototype to be able to access the content of the InfoWindow without having a reference to the InfoWindow-instance.
//store the original setContent-function
var fx = google.maps.InfoWindow.prototype.setContent;
//override the built-in setContent-method
google.maps.InfoWindow.prototype.setContent = function (content) {
//when argument is a node
if (content.querySelector) {
//search for the address
var addr = content.querySelector('.gm-basicinfo .gm-addr');
if (addr) {
alert(addr.textContent);
//leave the function here
//when you don't want the InfoWindow to appear
}
}
//run the original setContent-method
fx.apply(this, arguments);
};
Demo: http://jsfiddle.net/doktormolle/Vkf43/
Note: The selectors for the infowindow are not documented, they may change in the future
I realize this is an old Q, but this was recently fixed in Maps API. You can now listen for click events on map icons.
Starting with version 3.26 you should listen to the "click" event on the Map object. If the user clicks on a POI, a IconMouseEvent is raised. This class extends the Regular MouseEvent and contains a property called placeId. So you can check if the event object has defined placeId. The placeId field contains of course a Place Id, that you can use with Places API to get more info on the icon that was clicked. Calling stop() on the event itself will prevent Maps API from showing the default info window.
I prepared a small demo which demonstrates how to capture the click event and display your own info window.
http://jsbin.com/parapex/edit?html,output
I'm using the Google Maps API v2 and I'd like to be able to print the map the same way as Google does on its Maps page.
You can click the little printer icon and it creates a new popup window with the same map but all the unprintable stuff (like the controls) is taken out.
I know that they use #media print to achieve that effect when you hit "Print preview" or "Print" in the navigator. However, the popup window isn't in print mode.
Is there any way of doing the magic trick they're doing, like setting the current media type to "print"? Or or they cheating and setting a custom CSS style cheat?
I've got a Silverlight plugin and a Google Map on the same page and I want to be able to create a popup window containing just the map ready for printing (like Google is doing).
Thanks to http://abcoder.com/google/google-map-api/print-button-for-google-map-api/ I know how to get the HTML content but I can only get the content with all the controls etc on it (which I don't want).
Any help will be appreciated.
Google maps put a class gmnoprint on all elements that they do not want to print .. so setting this to display:none in your print css file or popup window will hide them ..
.gmnoprint{
display:none;
}
Of'course this will hide whatever google deems as not-for-printing.. If you want to select other items you will have to somehow parse their html code :(
I was having the same problem with a custom map image overlay added via kml. Gaby's heads-up about the gmnoprint class was the key. In my case, the div with the gmnoprint class applied was the direct parent of my img element that was getting disappeared. I basically created a "make overlay printable link":
$("#printable-map").click(function() {
if($(this).text() == "Include overlay when printing") {
$(this).text("Exclude overlay when printing");
$("[src$=blah.png]").parent().removeClass("gmnoprint");
} else {
$(this).text("Include overlay when printing");
$("[src$=blah.png]").parent().addClass("gmnoprint");
}
});
Tested and works in Safari, FF, and Chrome.
Another useful approach for printing google maps is to use the Google Static Maps API. You can generate an static image based on a range of display paramters (location, zoom level, size, markers etc...) and include that image in your print view page.
I'm building a photo gallery in ASP.NET. The user can browse thumbnails along the left and select one, which brings a preview-sized version into the right pane of the page.
I'd like to fade between the images, so that the current one fades out and the next one fades in. I'm using jQuery to fade the preview image in after it is loaded, which works great. Unfortunately, I can't get the fadeOut script to run before the click event posts the page back to the server. The thumbnails are ASP.NET ImageButtons, which means they're <input> tags.
Is there a way to get the postback to delay just long enough for the image to fade out? I've seen some tricks with the form onSubmit and setTimeout() but that would affect all the links and buttons on the page. I want to delay postback for the thumbnails only.
TIA
EDIT: Based on my research, and trying the suggestions below, it may be possible to delay the postback to accomplish this but it's not the best approach on several levels. To get a clean fade transition between images, in the future I would not do any posting back at all. I would use jQuery exclusively for the fadeout, load, fadein.
Try adding a return false to your function that handles the fadein/out... It should prevent the page postback from occurring...
$('#<%= this.aspbutton.ClientId%>').click(function(){
$('#myDiv').fadeout("slow");
return false;
});
I'm not sure what you are getting on the PostBack where you would want to fade out an image and then fade one in. Have you considered using AJAX for that? You could even have the thumbnail image contain the necessary information within the image tags for the larger image.
Take a look at the jQuery Lightbox plugin. I have implemented this plugin and modified the .JS a bit to allow for viewing a higher resolution photo in addition to the web view. Check it out here.
$('#<%= this.aspbutton.ClientId%>').click(function(){
var $btn = $(this);
$('#myDiv').fadeout("slow", function() {
$btn.unbind('click').click();
});
return false;
});
Here's the solution I used:
Since I AM using MS AJAX with an UpdatePanel, I can use the client-side AJAX event handler.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(fadeOut);
function fadeOut() {
if ($('.mainImage').length > 0) {
$('.mainImage').fadeOut('normal');
}
}
This gives me the exact behavior I wanted- any time the user navigates between thumbnails, the image fades out, loads, then the new one fades in.
HOWEVER...
This is still not ideal, as there is a pause between fades while the page posts back. It will work for now but in the long run it would be better to use jQuery to set the preview image rather than the thumbnails posting back as ImageButtons.