Awesome map popup with animation (updated)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Looking to get a concept of this design running on a google map

http://imgur.com/cnxVm4N

The animation shoukd be that the user clicks on a pin on a Google map and the modal drop in from the top of the screen. The dark view of the modal is its edit view. We can make a click event on something and have the pin flip over to this view.

Solution has to work in modern IE 10+, FF and Chrome

The data in the tooltip will likely come from json but we can worry with that in a different bounty

Could you be more specific about the animation? An example would be nice. What do you have in mind a slide left/right or a transformation?
stm over 4 years ago
I'm having a tough time finding any sort of similar animation other than a bunch of unrelated d3js stuff. Let me add an alternative style here with less complex and lofty goals. Thx!
Qdev over 4 years ago
Okay I have edited the bounty to make its purpose more clear and also changed designs so it's easier to do.
Qdev over 4 years ago
Do you need the markup and CSS built as well, or just the JavaScript required to make this interaction?
JoshuaTyree over 4 years ago
awarded to Wikimedia

Crowdsource coding tasks.

1 Solution


The following is an example of marker interactions with google maps. Is this what you were looking for?

Active Demo http://codepen.io/JoshuaTyree/full/PqqGPq/

Source Code
https://gist.github.com/JoshuaTyree/fb6ee0a0c3d7daa1ec17

This looks good but the popover seems to be a static image, we need code for it as well
Qdev over 4 years ago