javascript - Google maps; add place card to marker -

javascript - Google maps; add place card to marker -

as u can see on next image, div (top left) shows current marker adress/directions/ save..

this done using embeed iframe code google map.. how can u same 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 not successful next reason: ' + status); } });

jsbin solution

background:

i needed improve solution mouse wheel scroll problem here , here. best way behaviour wanted stick api, card shown in embedded version.

method:

copied card code , associated css embedded version. in javascript, append card html rendered map when it's ready

my customizations:

took off "save" alternative because doesn't work. positioned card on top right - @ html appended in javascript, it's hardcoded absolute position, can alter or associate class if prefer.

hope works you!

javascript google-maps google-maps-api-3