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

This was done using the embedded iframe code from google maps. But how can you do the same with custom "coded" map?

geocoder = new google.maps.Geocoder();

geocoder.geocode({
    "address": nw.google_pointer
}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

        var myOptions = {
            zoom: parseInt(nw.google_zoom),
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
            title: nw.google_pointer
        });
    } else {
        console.log('Geocode was not successful for the following reason: ' + status);
    }
});

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!