How to show stars inside a Google Map callout box?

Question

Expected: See 1-5 stars in Google Maps callout box
Actual: Page blinks and shows only a long list of stars on the top of the page.

I suspect I shouldn't be using document.write?

<html>
    <head>

    <script type="text/javascript">

    //some Google Maps API code

         function showstar(x)
       {
        var i = 0;
        while (i < x)
        {
         document.write("<img src=\"img/star.gif\" width=\"15\" height=\"15\" />");
         i++;
        }
       }

       var html = "Review stars: " showstar(star)

       GEvent.addListener(marker, 'click', function() {
          marker.openInfoWindowHtml(html);
          });
          return marker;
        }

      </script>
    </head>

      <body onload="load()" onunload="GUnload()">
        <div id="map" style="width: 700px; height: 500px"></div>
      </body>

    </html>

score 1 · Accepted Answer · edited May 23 '17 at 12:04

Correct, you should not be using document.write like this - document.write Replaces All Body Content when executed before page load completed.

Rather than document.write, return the HTML string at the end of the function:

function showstar(x) {
    var i = 0, starsHTML = "";
    while (i < x) {
        starsHTML += "<img src=\"img/star.gif\" width=\"15\" height=\"15\" />";
        i++;
    }
    return starsHTML;
}

PS I'm assuming that star is defined and assigned a value somewhere before it is used, that you have not supplied in the code herein.

How to show stars inside a Google Map callout box?

1 Answers1