I am using KeyDragZoom
http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/2.0.5/docs/examples.html
I would like to put the control somewhere else on the page, not within the google map. I can not figure out how to do this. I would even be fine with having a button off the map that would just trigger a click of the button within the map. How can I activate the drag zoom?
P.S. I am using the Visual Drag Zoom Control instead of using a keyboard key like shift.
Ended up doing this $('img[src=http://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png]').click();
Thanks hookedonwinter
The accepted answer assumes that the zoom control is on the map. If visualEnabled is false, the dragzoom_btn image will not exist.
A hack that seems to work:
function onZoomClick() {
var myKeyDragZoom = map.getDragZoomObject();
myKeyDragZoom.hotKeyDown_ = !myKeyDragZoom.hotKeyDown_;
}
When clicked, the zoom mode is turned on. When clicked again or the rectangle is drawn, zoom mode is automatically turned off.
Related
I got the many markers solution on my website.
I noticed though that when I drag the map there seams to be an issue if I start dragging the map when holding the mouse over a many-markers icon.
The map zooms in on the position when I release the mouse button. This feature is suppose to be there when I click an icon.. but should´nt be there when I´m trying to drag the map?
It even looks like googles (own?) example has this issue so it might not be my code.
http://gmaps-samples-v3.googlecode.com/svn/trunk/toomanymarkers/toomanymarkers.html
Open the link
Check the "Many markers" box
Try to drag the map when the mouse is over a "many marker" icon.
Frustrating when the map zooms in when I try to scroll the map sideways.
google.maps.event.addListener(map,'dragstart',function(){
mc.zoomOnClick_=false;});
google.maps.event.addListener(map,'mouseup',function(){setTimeout(function(){
mc.zoomOnClick_=true;},50);});
These lines(mc is the MarkerClusterer-Instance) should help.
It disables the zoomOnClick-feature when you start dragging the map and re-enables it on mouseup(with a short delay, because mouseup fires before click)
I think this is a side effect of the intended functionality. The library will be detecting the mouseup event and zooming on the marker that was selected by mousedown I imagine.
I suppose the two options that you have are to either disable the zoom on click functionality entirely, or to alter the library yourself (possibly branch it if you think others will use it) to perhaps zoom on a different event, e.g. mousedown.
The answer from #Dr.Molle will work as long as sources are not minified (mangled names). I had to upgrade to MarkerClustererPlus which provides a method for changing zoom on click. MarkerClustererPlus ist mostly backwards compatible to MarkerClusterer.
google.maps.event.addListener(map, 'dragstart', function() {
mc.setZoomOnClick(false);
});
google.maps.event.addListener(map,'mouseup',function() {
setTimeout(function() {
mc.setZoomOnClick(true);
}, 50);
});
I'm trying to add videoView inside a infoWindow,is it possible?Can anyone give me an example. Thank you
From GoogleMap Api Docs... An info window is not a live View, rather the view is rendered as an image onto the map. As a result, any listeners you set on the view are disregarded and you cannot distinguish between click events on various parts of the view. You are advised not to place interactive components — such as buttons, checkboxes, or text inputs — within your custom info window. Sadly,it seems like it means no video on infowindow marker
hopefully someone prove me wrong
I'm displaying InfoWindow popups (using InfoBubble, a stylable subclass implemented by some open source badasses) when map elements are hovered. If the thing on the map is at the edge, then the InfoBubble will be truncated.
Of course, there is the autoPan option, but that makes the performance bad because of the constant panning. Instead, I would like to either:
have the contents of the InfoWindow / InfoBubble be visible even though it extends beyond the map edge, or
intelligently switch the position and dimensions of the InfoWindow depending on where the edge is.
Option 2 is not what I want to be coding right now.
Anybody know of a way to achieve Option 1?
(Google Maps API v3)
I would try to set high z-index(say 1000) on the div that wraps the info bubble.
I think I solved this by ... not using the info bubble. I made a custom info bubble that just displayed a regular DOM node (a div) at the position that I wanted. It was therefore not subject to the limit of being inside of the map pane.
You can see the result on https://givelocal.drivetoendhunger.org/stats (the pop up that is displayed when you hover over the map is not an 'info bubble').
The Google map info window will not appear when I click on a marker using the iphone. The same code works on the desktop on Android.
I need the map hidden by default and then loaded in only when the user clicks the view map button as I want to keep the weight of the page down as this is for a mobile site.
The click event handler is being fired as I put an alert on it and it worked. I think it might be something to do with the order of the code when I attacked the click handlers, but thats a guess. Also, when I add draggable: true to the markers the bubble appears but I dont want the markers to be draggable.
I have set up a test page http://www.clawg.co.uk/nearby/testmap.html
A run through of this is:
I scan the DOM for data attributes values which I use to create an array of data that will be used for info windows.
I create a button on the fly that will make the map appear when clicked
When the button is clicked the map api is loaded in if its not already available
The map is then loaded
The markers are positioned on the map
The default marker icons are too small for iphone 4 making them unclickable, so I used a custom marker that was 42x42 in size.
I'm fairly new to Google Maps API, so spare the flame :)
How do I disable the controls of a google map(i.e. scroll, drag etc.) untill a user clicks on the map itself? I want the user to be able to scroll down on a page without ending up scrolling on the map. Due to design decisions the map appears in a position often hit by a scrolling user.
I don't want to use a static map, since I still want the user to be able to use the map, when he feels the need to do so.
Any ideas?
The map has methods to enable and disable dragging. You could just create the map with dragging disabled, and call enableDragging() whenever you want.
Add a mouse click listener to the map div, which calls enableScrollWheelZoom. You could also destroy the listener after it's called the first time.
jQuery example:
$("#mapDiv").click(function() {
map.enableScrollWheelZoom();
});
The API reference indicates that scroll wheel zoom is disabled by default - if it's enabled because of any other calls you've made (such as setUIToDefault), just disable it first.