how to styling google map infoWindow

Question

i have a vue-google-map which need to display some content when clicked on the marker. how can i set the style for the infoWindow? this is my code which called the id iw-container into the css sheets.

    this.infoWindow.position = location;
    this.infoWindow.template = '<div class="iw-container"><div 
      style="width:100%;">NAME OF PIN</div>'
      + '<div style="width:100%;">name and info</div></div>';
    this.infoWindow.open = true;

this is the css:

#iw-container {
  background-color:pink;
}

but there are nothing happen to the infoWindow.

i also has try to set the style straight into the content like this :

this.infoWindow.position = location;
this.infoWindow.template = '<div style="background-color:pink;"><div 
  style="width:100%;">NAME OF PIN</div>'
  + '<div style="width:100%;">name and info</div></div>';
this.infoWindow.open = true;

but the colour is not completely fulfilled the infoWindow. can anyone suggest what can i do or anything that i should change?

Did you see [this part of the documentation](https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/infowindows#customize)? And [this example](https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/overlay-popup) (to which it refers)? — geocodezip, Nov 20 '19 at 04:26
@geocodezip , from this example, i think it can be like this way right. `` but there is nothing happen. what is the best variable for the background color? i tried background and background-color & both not working — Khairul Habib, Nov 20 '19 at 06:18
This was my example changing the infowindow background (and stem/arrow) to green: https://jsfiddle.net/geocodezip/1oyertb2/1/ — geocodezip, Nov 20 '19 at 06:31
thank you, i'll take a look on it and need time to understand it because it quite hard for me to think how to applied this pure JS into vue.js stuff. — Khairul Habib, Nov 20 '19 at 06:51
Possible duplicate of [Styling Google Maps InfoWindow](https://stackoverflow.com/questions/5634991/styling-google-maps-infowindow) — Awais, Nov 20 '19 at 07:31

score 0 · Answer 1 · answered Nov 20 '19 at 06:33

0

In your code in css you use '#' for class selector use '.'

.iw-container {
  background-color:pink;
}

answered Nov 20 '19 at 06:33

Avni

106
5

actually i have tried both class and id. but both are not working. in that my code example i forget to change it back – Khairul Habib Nov 20 '19 at 06:49

score 0 · Answer 2 · answered Nov 20 '19 at 06:58

I'm using this code in my current project and working fine for me.


 map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: {lat: 72.231444,lng: 23.443423 }
});

 var infowindow = new google.maps.InfoWindow();
 var lat = 72.231444;
 var lng = 23.443423;
 var marker = new google.maps.Marker({
         position: {lat, lng},
         map: map,
 });
 var infocontent = "<div class='map-box-content'>"+
                "<h4>name</h4>"+
                "<p>address</p>" +
                "</div>";

 google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(map,marker);
     infowindow.setContent(infocontent);
 });

css:

.map-box-content{
    width: 230px;
}

yes it worked but the background-color set for the infoWindow is not fully covered. it's only covered the
content and left white space at the outer layer — Khairul Habib, Nov 20 '19 at 07:14

how to styling google map infoWindow

2 Answers2