Styling Google Maps Infowindow

Styling Google Maps InfoWindow

Google wrote some code to assist with this. Here are some examples: Example using InfoBubble, Styled markers and Info Window Custom (using OverlayView).

The code in the links above take different routes to achieve similar results. The gist of it is that it is not easy to style InfoWindows directly, and it might be easier to use the additional InfoBubble class instead of InfoWindow, or to override GOverlay. Another option would be to modify the elements of the InfoWindow using javascript (or jQuery), like later ATOzTOA suggested.

Possibly the simplest of these examples is using InfoBubble instead of InfoWindow. InfoBubble is available by importing this file (which you should host yourself): http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

InfoBubble's Github project page.

InfoBubble is very stylable, compared to InfoWindow:

 infoBubble = new InfoBubble({
      map: map,
      content: '<div class="mylabel">The label</div>',
      position: new google.maps.LatLng(-32.0, 149.0),
      shadowStyle: 1,
      padding: 0,
      backgroundColor: 'rgb(57,57,57)',
      borderRadius: 5,
      arrowSize: 10,
      borderWidth: 1,
      borderColor: '#2c2c2c',
      disableAutoPan: true,
      hideCloseButton: true,
      arrowPosition: 30,
      backgroundClassName: 'transparent',
      arrowStyle: 2
});

infoBubble.open();

You can also call it with a given map and marker to open on:

infoBubble.open(map, marker);

As another example, the Info Window Custom example extends the GOverlay class from the Google Maps API and uses this as a base for creating a more flexible info window. It first creates the class:

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  this.offsetVertical_ = -195;
  this.offsetHorizontal_ = 0;
  this.height_ = 165;
  this.width_ = 266;

  var me = this;
  this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
      return me.panMap.apply(me);
    });

  // Once the properties of this OverlayView are initialized, set its map so
  // that we can display it.  This will trigger calls to panes_changed and
  // draw.
  this.setMap(this.map_);
}

after which it proceeds to override GOverlay:

InfoBox.prototype = new google.maps.OverlayView();

You should then override the methods you need: createElement, draw, remove and panMap. It gets rather involved, but in theory you are just drawing a div on the map yourself now, instead of using a normal Info Window.

Custom style for a googlemaps info window (background)

You need to use the following CSS attributes to correctly style the information window:

          /*style the box which holds the text of the information window*/  
         .gm-style .gm-style-iw {
            background-color: #252525 !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            min-height: 120px !important;
            padding-top: 10px;
            display: block !important;
         }    

         /*style the paragraph tag*/
         .gm-style .gm-style-iw #google-popup p{
            padding: 10px;
         }


        /*style the annoying little arrow at the bottom*/
        .gm-style div div div div div div div div {
            background-color: #252525 !important;
            margin: 0;
            padding: 0;
            top: 0;
            color: #fff;
            font-size: 16px;
        }

        /*style the link*/
        .gm-style div div div div div div div div a {
            color: #f1f1f1;
            font-weight: bold;
        }

JSfiddle Example: http://jsfiddle.net/hLenqzmy/18/

how to change infoWindow Style in react-google-maps reactjs

I'm not sure how to change your InfoWindow via element.style{} in the CSS file however I successfully override these values when I put it inside the .gm-style .gm-style-iw-c {} on the CSS file and appending !important on each line, like the following code:

.gm-style .gm-style-iw-c {
   padding-right: 10px !important;
    padding-bottom: 0px !important;
    max-width: 500px !important;
    max-height: 326px !important;
    min-width: 0px !important;
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    top: 0;
    left: 0;
    transform: translate(-50%,-100%);
    background-color: #dd9191;
    border-radius: 8px;
    box-shadow: 0 2px 7px 1px rgba(0,0,0,0.3);
}

Note: This might be what you are looking for, however it is possible that class names will be changed by Google Maps Platform in the future.

As for the maxWidth options in the InfoWindow, I tried using it in my reactjs code without overriding it in my CSS file and it worked properly. Here is how it looks like in my code:

<InfoWindow onCloseClick={this.props.handleCloseCall} options= {{maxWidth : 100 }}>
                 <span>This is InfoWindow message!</span>
             </InfoWindow>

Note: You need to change the YOUR_API_KEY_HERE string with your own API key in the index.js of the code provided for it to work properly.

Hope this helps!

customizing my google maps info window content

Also,

just by glancing at your code I can see a code error and you are also forgetting to set your content.

make these adjustments...

var infowindow = new google.maps.InfoWindow({
 content :  'Latitude: ' + location.lat() + '<br>' + 'Longitude: ' + location.lng()+ '' });

infowindow.setContent(content);
infowindow.open(map, marker);

http://jsbin.com/tixini/edit?html,css,js,console,output

How can I style this Google Maps infoWindow?

One option:
Add the title and description to the locations array:

// address,   latitude,  longitude,   title,     description
[["1 Severn", 45.489886, -73.595116, "Title 1", "description for marker #1"],
  ...

Then put it in the infowindow from there.

var locations = [      ["1 Severn", 45.489886, -73.595116, "first title", "description 0<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris eros, fermentum eu venenatis sed, aliquet in tortor. Etiam urna turpis, varius sed cursus vel, pretium eget sapien. Vestibulum ut vehicula nisi, ultricies pretium lectus. Praesent elementum lacus a purus cursus, quis laoreet risus semper. Morbi condimentum pellentesque tortor, eget dictum ligula cursus sit amet. Vestibulum fermentum, tellus non aliquam tristique, ligula neque eleifend nisl, nec condimentum sapien magna id tellus. Mauris commodo at nibh in hendrerit. Nunc lacinia lobortis pellentesque. Curabitur quis tincidunt ligula. Sed vel vestibulum lorem. Aliquam nec porttitor dolor. Suspendisse potenti. Sed et vestibulum ipsum, nec ullamcorper leo. Mauris mollis pellentesque arcu. Etiam et sem dictum augue bibendum pretium. Donec id justo orci."],      ["16 Grenville", 45.486391, -73.607096, "second title", "description 1"],      ["17 Winchester", 45.477646, -73.603917, "third title", "description 2"],      ["19 Winchester", 45.477607, -73.603962, "fourth title", "description 3"],      ["52 Brookfield", 45.514604, -73.632722, "fifth title", "description 4"],      ["317 Chemin du Golf", 45.467418, -73.548665, "sixth title", "description 5"],      ["319 Chemin du Golf", 45.467418, -73.548665, "seventh title", "description 6"],      ["447 Mt. Stephen", 45.483900, -73.600203, "8th title", "description 7"],      ["449 Mt. Stephen", 45.483933, -73.600179, "9th title", "description 8"],      ["603 Lansdowne", 45.484876, -73.609120, "10th title", "description 9"],      ["649 Belmont", 45.485654, -73.609270, "12th title", "description 10"],      ["652 Roslyn", 45.484788, -73.611407, "13th title", "description 11"],      ["1235 Bishop", 45.496458, -73.575373, "14th title", "description 12"],      ["1355 Scarboro", 45.523431, -73.639453, "15th title", "description 13"],      ["2184 De Cologne", 45.515823, -73.704550, "16th title", "description 14"],      ["2302 Brookfield", 45.514738, -73.632688, "17th title", "description 15"],      ["3013 De Breslay", 45.492288, -73.590195, "18th title", "description 16"],      ["3019 De Breslay", 45.492092, -73.590437, "19th title", "description 17"],      ["3021 Jean Girard", 45.493183, -73.590212, "20th title", "description 18"],      ["3025 De Breslay", 45.492075, -73.590771, "21st title", "description 19"],      ["4389 Decarie", 45.480705, -73.620274, "22nd title", "description 20"]    ];
    var map = new google.maps.Map(document.getElementById('map'), {      zoom: 12,      center: new google.maps.LatLng(45.484876, -73.609120),      mapTypeId: google.maps.MapTypeId.ROADMAP,      scrollwheel: false    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < locations.length; i++) {      marker = new google.maps.Marker({        position: new google.maps.LatLng(locations[i][1], locations[i][2]),        title: locations[i][0],        map: map      });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {        return function() {          infowindow.setContent("<h3 class='title'>" + locations[i][3] + "</h3><div style='text-align: center'>" + locations[i][0] + "</div><div class='description'>" + locations[i][4]+"</div");          infowindow.open(map, marker);        }      })(marker, i));    }

html,body,#map {  height: 100%;  width: 100%;}h3 {  text-align: center;}.title {  color: blue;  }.description {  color: green;  font-face: "Courier";  }

<script src="http://maps.google.com/maps/api/js"></script><div id="map"></div>

Styling Google Maps Infowindow