appending div in JS as string(?)

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!

`$()` is jquery selector, which mean you can use that to select elements using `CSS selector`, not only for `id`. E.g: `$('body, .foo, #bar')` — Nanang Mahdaen El-Agung, Jun 18 '15 at 21:49

Guffa · Answer 1 · 2015-06-19T08:46:01.043

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.

I tried doing this (calling append on rootDiv instead of the massive string), but it doesn't work. — lalaloooo, Jun 18 '15 at 23:42
@lalaloooo: Appending the element works fine, but you are appending elements without any styling. See my edit above. — Guffa, Jun 19 '15 at 08:47

score 0 · Answer 2 · answered Jun 18 '15 at 21:44

0

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.

answered Jun 18 '15 at 21:44

Nanang Mahdaen El-Agung

1,404
10
14

This is my issue, I've tried calling $(".gm-style").append(rootDiv); but it doesn't work. It only works when I call append on the string. – lalaloooo Jun 18 '15 at 23:51

appending div in JS as string(?)

2 Answers2