numediaweb numediaweb - 2 years ago 223
Javascript Question

Google maps; add place card to marker

As you can see on the following image, the

(top left) shows the current marker address/directions/ save..

enter image description here

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

geocoder = new google.maps.Geocoder();

"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 Source

jsbin with my solution


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.


  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!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download