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.
Related
I am trying to add a bunch of markers to a map with show/hide buttons for each category of markers. Adding a marker from stored db data puts them on the map and makes them clickable, but they won't respond to setMap(null) unless that call is through google.event.addListener(marker, ...). Calling it from a standard js button onclick event, or via google.event.addDomListener(marker, ...) doesn't work.
Also maybe helpful to note is that when I call marker.setAnimation(BOUNCE) the marker starts bouncing but it looks like there is a duplicate marker under it. Similarly, if I drag the marker it's as if an unmovable duplicate is created right under it.
Thoughts? This is super frustrating!
Just like this taken from here ? Are you trying to avoid google maps api's google.maps.event.addDomListener? Why? You can use it to listen to your button's click event too. just as in:
var YourButton = document.getElementById('myButton');
function HideMarkers() {
// Hide us
}
google.maps.event.addDomListener(YourButton, 'click', HideMarkers);
customized for you from. For the second part, seeming like double markers I suppose we need some code..
This turned out to be purely user error. I am using firebase to store map data without a server backend and was adding duplicate markers. This explains the "inability to hide" and also the appearance of duplicate markers when dragging or animating.
The reason it was working from a click event on the marker was that both duplicate markers were receiving the click event and so both were being hidden.
setMap appears to be perfectly reliable when used in or out of google event handlers.
I have google maps embedded in my website. Its has markers and when clicked, it displays the property information at the position. (infobox).
Now the user wants the following functionality:
I search for a place , the map displays the place with properties. After I drag the map and get some other property, I would like to share this one to some body. can I get a link
to share the dragged position?
I know we can get the link in maps.google.com . It changes whenever we drag.
But how to do it in our website?
Is there a way in google maps api to get that link?
Listen to events on the Map
The idle event is particully useful, but can use say bounds_changed to get events while dragging (or even the drag event itself!).
In that event update whatever link you are talking about.
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.
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 am using the Google Maps API to code a campus map for my university. On the main map, when it is being viewed in the "Map" maptype, there is a custom overlay of the campus, which is set (by using GEvent.addDomListener) to be removed when the map is viewed in Satellite or Hybrid mode. When the user gets directions, through my map, to and from the campus, a polyline and 2 markers show up, like normal. When the marker is clicked, a small popup map is display, focused on the area of campus around that particular marker.
I was wondering if anyone knew of a way to set attributes of these mini-popup-maps. I need to extend the event listener to make sure that the overlay gets taken off when the mini map is clicked out of "Map" mode. I also need to be able to set the zoom level for these maps.
Any ideas?
(code can be provided as needed, wasn't really sure what parts would be needed and didn't want to post the whole f'n thing up here.)
Doesn't look like there are any built in options to modify the infoWindow you get from the GDirection markers, but you can explicitly replace the markers once you get them back.
This post describes the process.