I am using the following code to create an infowindow for the markers in the map. In the message variable i am sending a string with Html inside it. When i run my application inside the infobox i am getting the string without the Html styling. For example inside the box i see blah blah blah ... Does anyone know how to get the infobox with html styling inside?

 function attachSecretMessage(marker, number) {

         var infowindow  = new google.maps.InfoWindow(
      { content: message[number],
          size: new google.maps.Size(50, 50)
      });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map1, marker);
      });

I am using the following code to create an infowindow for the markers in the map. In the message variable i am sending a string with Html inside it. When i run my application inside the infobox i am getting the string without the Html styling. For example inside the box i see blah blah blah ... Does anyone know how to get the infobox with html styling inside?

 function attachSecretMessage(marker, number) {

         var infowindow  = new google.maps.InfoWindow(
      { content: message[number],
          size: new google.maps.Size(50, 50)
      });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map1, marker);
      });

• javascript
• google-maps
• google-maps-api-3

• did you try inline css for style? – Pragnesh Chauhan Commented Oct 3, 2012 at 6:51
• css style within html tag eg. <p style="color:sienna;margin-left:20px">This is a paragraph.</p> – Pragnesh Chauhan Commented Oct 3, 2012 at 6:58
• can you show the html for the infobox? – Pragnesh Chauhan Commented Oct 3, 2012 at 7:17
• This is the code that i am sending from Code behind: <p style=\"background-color:green;\">" + LiveAlerts.Tables[0].Rows[i][1].ToString() – user1292656 Commented Oct 3, 2012 at 7:38
• and this is the infowindow content <p style="background-color:green;">Window Violation Status:Under Review Level:Level 1</p> – user1292656 Commented Oct 3, 2012 at 7:39

3 Answers 3

Put all your custom html code in a variable and assign the value to "content" !!!

    var contentString = 
                '<div id="content" style="width:400px; background-color:red;">' +
                'My Text comes here' + 
                '</div>';

   var infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 400
        });

Instead of infoWindow try infoBox This can be stylised

It's pretty common in maps to show user submitted addresses there, so be careful about XSS attacks here. This was one of the vulnerabilities found by security auditors at my company.

It's very easy for someone to submit an address like this:

<img src onerror=alert('hello, I'm hacking you!') />

Even though some frameworks like React protect you from those in general, these 3rd party library may not!