javascript - appending div in JS as string(?) -


i'm using google maps api, , i'm trying have "card" appear (as apposed tooltip/infobox) when clicking on marker. followed this card appear. however, method person uses appending huge string html white box links/information hard coded string.

i'm trying change can dynamically insert desired information (i've stripped down code of card displays grey box when clicking on marker, can see code here).

the important bit of code is:`

google.maps.event.adddomlistener(marker, 'click', function() {      // prevents card being added more once (i.e. when page resized , google maps re-renders)     if ( $( ".place-card" ).length === 0 ) {        var rootdiv = document.createelement('div');       rootdiv.style = ('position', 'absolute');       rootdiv.style = ('right', '0px');       rootdiv.style = ('top', '0px');        var seconddiv = document.createelement('div');       seconddiv.style = ('margin', '10px');       seconddiv.style = ('padding', '1px');       seconddiv.style = ('-webkit-box-shadow', 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px');       seconddiv.style = ('box-shadow', 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px');       seconddiv.style = ('border-radius', '2px');       seconddiv.style = ('background-color', 'white');       seconddiv.style = ('width', '200px');       seconddiv.style = ('height', '150px');         rootdiv.appendchild(seconddiv);        // not work       // $(".gm-style").append(rootdiv);        // works       $(".gm-style").append('<div style="position: absolute; right: 0px; top: 0px;"><div style="margin: 10px; padding: 1px; -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; border-radius: 2px; background-color: white; width: 200px; height: 150px"></div></div>');     }   }); 

(you can see i'm trying replace str2 actual div's... i've tried without calling string() doesn't work either). i'm wondering if there better way appending strings make card appear.

also, if explain $(".gm-style") lovely. (my understanding after googling is alternative document.getelementbyid, .gm-style class name... , substitute "get___by___" function try results in error).

thanks!

it's possible html code element string, it's rather pointless. appending string recreate element.

just append element have:

$(".gm-style").append(rootdiv); 

your code setting styles wrong. expression ('position', 'absolute') uses comma expression, value string 'absolute'. assigning string style doesn't work, use properties of style object:

var rootdiv = document.createelement('div'); rootdiv.style.position = 'absolute'; rootdiv.style.right = '0px'; rootdiv.style.top = '0px';  var seconddiv = document.createelement('div'); seconddiv.style.margin = '10px'; seconddiv.style.padding = '1px'; seconddiv.style.webkitboxshadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px'; seconddiv.style.boxshadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px'; seconddiv.style.borderradius = '2px'; seconddiv.style.backgroundcolor = 'white'; seconddiv.style.width = '200px'; seconddiv.style.height = '150px'; 

however, suggest put css in style sheet, instead of adding styles directly element.


Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -