Styling InfoWindow With Google Maps API

I'm currently working with Google Maps, and everything works fine by now. But I want to change the styling of the InfoWindow. I have been researching, but haven't find anything use

Solution 1:

use .gm-style .gm-style-iw classes for styling the text for example:

.gm-style .gm-style-iw {
   font-size: 16px;
   font-weight: bold;
   font-family: sans-serif;
   text-transform: uppercase;
}

Solution 2:

You can change it with java script as below

var contentString = '<div style="width: 94.2%; padding-left:10px; height: 25px;float: left;color: #FFF;background: #ed1e79;line-height: 25px;border-radius:5px 5px 0px 0px;"><strong><b>"You feild"</b></strong></div><div style="clear:both;height:0px;"><div style="float:left;width:90%;padding:5px 10px;border:1px solid #ccc;border-top:none;border-radius:0px 0px 5px 5px;"><div style="float:left;color:#666;font-size:18px;font-weight:bold;margin:5px 0px;"> <div style="padding: 0px;">]]..product_list[i].category..[[</div></div><div style="clear:both;height:0px;"></div><div style="float:left;line-height:18px;color:#666;font-size:13px;">"You feild"</div><div style="clear:both;height:0px;"></div><form action=\"navigat:"You feild"\"><input type=\"submit\"/ style=\"background:#7e7e7e;float:right;color:#FFF;padding:5px 7px;font-size:10px;font-weight:bold;border:none;margin:5px 0px; border-radius:0px !important;\" value=\"More Info\" ></form></div></div>';  

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

Solution 3:

From the API: https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows

The InfoWindow's content may contain either a string of text, a snippet of HTML, or a DOM element itself.

You can pass in styled HTML or you can create the InfoWindow itself, then pull it in JS as an object.