将div中的div作为字符串追加（？）

Question

I'm using the Google Maps API, and I'm trying to have a "card" appear (as apposed to a tooltip/infobox) when clicking on a marker. I followed this to get the card to appear. However, the method this person uses is appending a huge string that is the html for a white box with all the links/information hard coded into this string.

I'm trying to change this so it can dynamically insert the desired information (I've stripped down the code of the card so it simply displays a grey box when clicking on the marker, you can see the code here ).

The important bit of code is:`

google.maps.event.addDomListener(marker, 'click', function() {

    // Prevents card from being added more than once (i.e. when page is resized and 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);

      // this does not work
      // $(".gm-style").append(rootDiv);

      // this 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 to replace the str2 with actual div's... I've also tried it without calling String() which doesn't work either). I'm wondering if there is a better way than simply appending strings together to make this card appear.

Also, if someone could explain what $(".gm-style") does that would be lovely. (My understanding after much googling is that it is an alternative for document.getElementById , but .gm-style is a class name... and any substitute "get___by___" function I try just results in error).

Thanks!

Answer 1

It's possible to get the HTML code for the element as a string, but it's rather pointless. Appending the string will just recreate the element.

Just append the element that you have:

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

Your code for setting the styles are all wrong. An expression like ('position', 'absolute') uses the comma expression, so its value is just the string 'absolute' . Assigning that string to the style doesn't work, you would use the properties of the 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, I would suggest that you put the CSS in a style sheet, instead of adding all the styles directly to the element.

Answer 2

You can convert element to string by getting the element outerHTML .

$(".gm-style").append(rootDiv.outerHTML);

Btw, if you use jQuery why you should append that as string? Using

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

will work.