Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Map acting jumpy (panning in response to interaction with map marker / infowindows) #301

Closed
Lilith-Palmer opened this issue Nov 30, 2016 · 11 comments
Labels
Milestone

Comments

@Lilith-Palmer
Copy link
Collaborator

If an icon is close to the map frame border, and the user hovers over it, the map shifts so the icon is more centred. this is happening even when the location/name is clear and does not require more space.

@techieshark techieshark added this to the Site launch milestone Nov 30, 2016
@techieshark
Copy link
Contributor

Yeah, I'm seeing this too - for example, this is about as close as a marker can be to the left side of the screen; if the marker is even 10px to the left and you hover over it, the map pans before opening the infowindow despite having plenty of room to display the infowindow.

image

I think behavior with markers near the top might be OK in terms the amount of space google maps tries to provide between the top of the infowindow and the top of the screen:

image

Getting the left margin between the infowindow and the side of the screen in the first example to match the top margin in the second example would be a start.

@techieshark
Copy link
Contributor

For comparison, here's mapbox:

map image showing very small gap between info window and screen

@techieshark techieshark changed the title Map acting jumpy Map acting jumpy (panning in response to interaction with map marker / infowindows) Nov 30, 2016
@techieshark
Copy link
Contributor

I'm not finding an easy way to deal with this in google maps; our best option may be to disable the auto-pan functionality.

There is no option in the InfoWindowOptions object specification to control the auto pan margin (but we could set disableAutoPan: true).

This jsfiddle shows the behavior we want (via a autopanMargin option), but I found that in this comment on js-info-bubble which is a retired and unmaintained library, not part of google maps. It'd be more work to switch to that library, and we'd have no guarantee that it wouldn't break in a future release of google maps.

I'll push a branch with autopan disabled so we can try that.

@Lilith-Palmer
Copy link
Collaborator Author

I had a feeling this would be annoying

techieshark added a commit that referenced this issue Dec 1, 2016
Fixes #301 (in a less than ideal way -- see #301 for discussion)
@techieshark
Copy link
Contributor

If we really needed to get this working, we could create our own auto-pan functionality and attach that to the mouseover event for the map marker.

I also thought maybe if we set the maxWidth for the marker, google maps might minimize the margin but no (here's with a zero width infowindow):

image

@Lilith-Palmer
Copy link
Collaborator Author

Disabling autopan works surprisingly well for icons close to the frame. It also seems to have slowed the autopan when you navigate away from schools altogether, which is quite nice.

@Lilith-Palmer
Copy link
Collaborator Author

Hm actually it's not stable - the navigation back to schools is slow (and nice) only sometimes. Not sure what the pattern is.

@techieshark
Copy link
Contributor

@Lilith-Palmer yeah I think #298 is a pretty different issue; wouldn't expect this would have any impact on it

@Lilith-Palmer
Copy link
Collaborator Author

@techieshark it does seem to be better for the frame issue

@Lilith-Palmer
Copy link
Collaborator Author

frame issue
Although.... maybe not. i think jumping at the bottom is a lesser issue than not reacting at all.

@Lilith-Palmer
Copy link
Collaborator Author

Disable for now - we can explore properly at a later point. Seeing how users interact with/react to the different options would be helpful.

techieshark added a commit that referenced this issue Dec 1, 2016
* the marker icons we use have a transparent fill in the bottom half of their image
  (the pointy part of the pin icon is in the center of the marker image, and there
   is a shadow "beneath" the pin that extends a bit below the pin's point).

* this change tells google maps to not change the mouse cursor when the mouse is
  hovering over that bottom half of the marker's icon (in that mostly transparent region)

* this isn't a fix for #301 but is sort of related; may help when markers are near
  bottom of screen
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants