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.
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 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?
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?
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.