CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
user1292656
user1292656

Reputation: 2560

InfoWindow with Html in google maps

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);
      });

Upvotes: 6

Views: 19797

Answers (3)

Florian Bienefelt
Florian Bienefelt

Reputation: 1578

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!

Upvotes: 0

david strachan
david strachan

Reputation: 7228

Instead of infoWindow try infoBox This can be stylised

Upvotes: 0

thomasbabuj
thomasbabuj

Reputation: 3919

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
        });

Upvotes: 13

Related Questions