I'm using GAE Java and GWT together on a website which is primarily a large map with basic infowindows. I want to customize my info windows and I know how I want them to look-- but making this become a reality proving itself be tricky. Here's what I want it to look like:
Whenever a marker is click, a new info window will appear a few pixels to the right of the marker. The overlay will animate onto the screen, growing from nothing to about 300px by 300px. This overlay will contain information injected from the GWT portion of the code and will have a button to close the div in the top right corner.
Writing this in plain JS or jQuery would be no problem for me, but what I'm having trouble deciding is how and where I should inject the div into the proper position ON THE MAP CANVAS? Once i understand how I ought to do this, I believe i can finish the rest of the work myself.
Thanks so much!
probably too late for an answer but for anyone else who'll end up here,
the following link should get you going
http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html
Related
I am working on my first full-page map screen. I am adding a couple custom controls on the map. One being a legend, the other a way to query our system and place pins on the map. I have been able to place the controls on map and it works well. I have one in the TOP_RIGHT and one in the TOP_LEFT. I would like to make this responsive now. I would like the legend to take up the entire bottom of the map, and the inquiry control to go to the top. I can't find anything on how to make this responsive. How do I go about accomplishing this? Online resources would be great.
Update: I realized I didn't make this clear. On PC/tablet, I want the legend in the upper right and on the phone, I want this to be all the way across. Similar to how this page works.
It's quite simple, set the width of the HTML-elements to 100%.
Be sure that these controls dont overlap with the default-controls.
Demo: http://jsfiddle.net/doktormolle/16r1777q/
I'm making a very simple page which needs to do the following:
There will be a map, which is a background image in a div, and there will be some clickable images distributed on the map (each within a div of its own). The images, when clicked, should make some markers on the map appear or disappear, to indicate positions where that can be found on the map.
It's not supposed to be fancy, it's just supposed to work and be doable quickly (I'm inexperienced and don't have much time). What would you suggest?
I tried to find a way to do it with just css, but the best I can do is a very raw and impractical way of doing it, nothing simple and elegant. I'd like to avoid using any libraries, if possible.
Do Something Like This
document.getElementById('a1').addEventListener('click', toggle);
function toggle(a){
document.getElementById("i1").style.display='block';
setTimeout(function(){
document.getElementById("i1").style.display='none';
},500);
}
Fiddle:
Fiddle
The client doesn't want the photo to be downloaded if it is right clicked on. I explained if someone wants the photo they can get it off the site but he wants to make it a bit more difficult for a novice user to download the image. Hence if you right click you will get the blank 'photo' instead of the actual photo underneath.
Use logic:
Put the image you want to protect as a background image in a <div> or other block level element
Put an <img> that is transparent over that image in the <div>. Make sure it covers the entire image/div
A quick google has thrown this up for me, hope it can help you.
4) Prevent Downloads Using Tables: 'Right clicking' images is a fast shortcut to find, copy, and/or download images. For those that have their own website it is possible to prevent this action by placing images as a background to tables. The code is fairly simple in CSS, using the "background-image:url" style:
<table style="background-image:url('image.jpg');width:Wpx;height:Hpx"><tr><td></td></tr></table>
Another method might be,
5) Javascript Right Click Disable: Another measure to prevent right clicks on images is to use Javascript. These short scripts over-ride browser right clicks. Rather than recreate a script that has been widely published in various forms over the internet, I will leave it to the reader to search google for Javascript Disable Right Click. I will however mention that Javascript is client-side, and scripts such as these can not only effect the usability of a website, but can also readily be disabled by turning Javascript off.
I took the info above from this site --- http://www.naturefocused.com/articles/image-protection.html ---
People can just printscreen the image and put it in paint if they really wanted it though im afraid :(
Thanks,
Jack.
Have used google maps dozens of times but cannot get around this one. Doing google's simple hello world for map version 3 (http://code.google.com/apis/maps/documentation/javascript/tutorial.html#api_key)
However the tiles only appear in the upper left part of the map canvas and even when dragging / scrolling they continue to stay in the upper-left. See pic: http://sandbox.thecanarycollective.com/whiteboard/2012-03-05_073019.png
I have played with the CSS on the page quite a bit to see if it was getting screwed up by something else but no luck. Anyone ever see this before?
The individual tiles are div elements. Try turning off the css on your page and see if this problem still occurs. Then use a tool like firebug to examine the HTML of the page - see if the missing tiles appear in the HTML.
Using firebug, write this into the console:
google.maps.event.trigger(googleMap, 'resize');
where googleMap is the map element. This may fix things if you're resizing the map after it is created.
If none of these help, post your javascript, css and HTML - its hard to think of what to suggest when you just provide a fixed image.
I need to create an image gallery where the main image is centered, when you click down on it and "swipe" it to the left or right, the next/prev image will be center.
It should kind of imitate the feel of the iphone page swipe motion.
Here is an image link.
Does anyone know any good tutorials or how I can get started with AS3?
Although this isn't exactly the same, it will give you a fantastic starting point
http://active.tutsplus.com/tutorials/effects/iphone-page-transition-flash/
What you need is to create could be called "touch (kinetic) scrolling with a snapping". Take a look at Scroller class source from Flex 4.5 SDK (Hero) and make it better. You will need to spend time on it to make it work good enough. If you're doing this for a mouse-based input — just forget about it since this is a good idea for touch-based input only.