Google maps; add place card to marker

Question

As you can see on the following image, the div (top left) shows the current marker address/directions/ save..

Answer 1

jsbin with my solution

Background:

I needed a better solution to the mouse wheel scroll problem here and here. The best way to get the behaviour I wanted was to stick with the API, but I really like the card shown in the embedded version.

Method:

1. Copied card code and associated css from embedded version.
2. In javascript, append card html into the rendered map when it's ready

My Customizations:

1. Took off the "Save" option because it doesn't work.
2. Positioned card on the top right - look at the html that is appended in javascript, it's hardcoded with absolute position, you can change this or associate it with a class if you prefer.

Hope this works for you!

Answer 2

I added second map in @jcsmesquita answer but there are same place cards on two maps : http://jsbin.com/vixehodaka/edit?html,css,js,output

so I changed javascript code a bit : jsbin.com/dezorezohe/edit?html,css,js,output