I have Google map with markers.
I have shown a custom popup on marker click.Popup adjust its position as map is dragged, So to adjust its position i have used bound_changed event of Google maps.
Issue is:- bounds_changed event fire continuously as map dragged so i adjust popup position which is perfect for Desktop browser.But in mobile device this bounds_changes event fire only after drag is completed ,same as 'idle' event of Google maps. Here is link :- link
I faced this same problem a while back and had to use the center_changed event instead as I needed to restrict the users visible bounds if they tried to drag the map out of a certain visible area.
I am actually switching between using the bounds_changed and center_changed event depending on whether the user is on a desktop or mobile device. Are you able to do this in whatever framework you are using?
Related
I am using Google Maps to display markers on the map and other widgets to describe each marker on the map. I have successfully implemented when the user tab on a widget, the map area will change to make the matching marker to be the center of the map.
I also have the 'Search this area' button to search the map area.
The hard part is to control how to hide/display the 'Search this area' button.
So far, I have implemented it to display when the map area is changed. However, it causes the button to appear every time the map area changed by the user tab on a widget.
I would like to only detect the map area change by the user manually such as pinch zoom in / out, drag etc.
You can use the Listener widget to listen for onPointerMove on your map. Like this,
Listener(
onPointerMove: (move) {
// This will trigger when a user will drag the map
},
child: map);
Mind that onPointerMove is called many times during user drag and is not called when the user taps on map buttons like the map zoom buttons.
If you want only one call after the end of the user interaction and to also get events from the map buttons, you can use onPointerUp instead.
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 building a page that displays 5 small Google Maps using the Google Map API v3. Each map has a marker using a custom image and each marker bring the user to a custom URL on the click event on the marker. This part works in all browsers.
Under each of these maps, there is a "Enlarge map" link that display a zoom of the map in a "lightbox" like popup on the click event. These are actually placed in 5 hidden div that are displayed on the "Enlarge map" click event ( using $("#div").show(); ). On the click event, I also call the "resize" and "set center" events to make the display right.
In all browsers, when I click on the marker on the map zoom, it brings me to the custom url, BUT NOT IN CHROME. It's like Chrome has "flushed" the click event listener after the call of $("#div").show(); .
I also tested it with only 1 small map and 1 enlarge map link, still the same issue.
How can I fix this issue in Chrome?
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.