I am trying to change style of the InfoWindow in the

This is the code that I use:

<InfoWindow options={{maxWidth: 900}} position={self.state.position} ref="infoWindow" onCloseclick={self.onLineWindowClose}>
    <div className="berlin" style={{height: '120px',width: '260px', fontFamily: 'Roboto'}}>
        <div style={{height: '20px'}}>
            <div style={{float: 'left', padding: '3px 0 0 6px'}}>From: </div>
            <div style={{float: 'left', padding: "3px", color: '#3497d9'}}>{self.state.startLocation.City}</div>
        </div>
        <div style={{height: '20px', clear: 'both'}}>
            <div style={{float: 'left', padding: '3px 0 0 6px'}}>To: </div>
            <div style={{float: 'left', padding: "3px", color: '#3497d9'}}>{self.state.endLocation.City}</div>
        </div>
        <LineList relationInfo={this.state.relationDetails} />
    </div>
</InfoWindow>

Question is simple. How do I change its appearance? I tried setting the className. I also tried to pass options to it. But nothing seems to work.

I am trying to change style of the InfoWindow in the

This is the code that I use:

<InfoWindow options={{maxWidth: 900}} position={self.state.position} ref="infoWindow" onCloseclick={self.onLineWindowClose}>
    <div className="berlin" style={{height: '120px',width: '260px', fontFamily: 'Roboto'}}>
        <div style={{height: '20px'}}>
            <div style={{float: 'left', padding: '3px 0 0 6px'}}>From: </div>
            <div style={{float: 'left', padding: "3px", color: '#3497d9'}}>{self.state.startLocation.City}</div>
        </div>
        <div style={{height: '20px', clear: 'both'}}>
            <div style={{float: 'left', padding: '3px 0 0 6px'}}>To: </div>
            <div style={{float: 'left', padding: "3px", color: '#3497d9'}}>{self.state.endLocation.City}</div>
        </div>
        <LineList relationInfo={this.state.relationDetails} />
    </div>
</InfoWindow>

Question is simple. How do I change its appearance? I tried setting the className. I also tried to pass options to it. But nothing seems to work.

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

Share Improve this question Follow edited Jul 5, 2016 at 12:09 István 5,1271010 gold badges4040 silver badges6767 bronze badges asked Jul 5, 2016 at 12:01 Amiga500Amiga500 6,1411111 gold badges7171 silver badges119119 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

For anyone who is using InfoBox and has trouble styling, the following worked for me:

JS

<InfoBox key={i}
    defaultPosition={new google.maps.LatLng(marker.lat, marker.lng)}
    options={{
        pane: "overlayLayer",
        pixelOffset: new google.maps.Size(-140, -60),
        alignBottom: true,
        boxStyle: {
            boxShadow: `3px 3px 10px rgba(0,0,0,0.6)`
        },
        closeBoxURL : ""
    }}
>
    <div className="google_map_infobox">
        {marker.txt}
    </div>
</InfoBox>

CSS

.google_map_infobox
{
    background: #fff;
    padding: 1em;
    text-align: center;
    font-size: 1.1rem;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.6);
    border: 1px solid #666;
}

This creates a box that is centred over the marker and has a box shadow, has no close button, etc. The boxStyle option was something I found just by chance on a google search.

I also did some styling of the box using CSS. Perhaps I could have done it all in the boxStyle attribute, but I'd rather keep as much of it in CSS as I can. The box-shadow is the only thing that wouldn't work via CSS.

Hope this helps someone using react-google-maps.

I remend to create your own ponent for google maps and create custom infowindow with "plain" javascript. This way you can use straight all google maps "native" properties etc. and don't need to play with any super plicated and limited ponent libraries :)

Example google maps wrapper for react (just quick example):

import React, { Component, PropTypes } from 'react';

class GoogleMap extends Component {

  ponentDidMount() {
    this.map = new google.maps.Map(this.refs.map, {
      scrollwheel: true,
      zoom: 13,
      draggable: true,
      mapTypeControl: false,
      streetViewControl: false,
      zoomControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT,
        style: google.maps.ZoomControlStyle.LARGE,
      },
      center: new google.maps.LatLng(60.16985569999999, 24.938379),
    });

    this.props.onGetMap(this.map);
  }

  render() {
    const mapStyle = {
      height: '100%',
      width: '100%',
    };

    return (
      <div ref="map" style={mapStyle}></div>
    );
  }
}

GoogleMap.propTypes = {
  onGetMap: PropTypes.func.isRequired,
};

export default GoogleMap;

Then you can use it like:

import React, { Component, PropTypes } from 'react';
import GoogleMap from 'ponents/GoogleMap';

class Some extends Component {

  constructor(props, context) {
    super(props, context);
    this.onMapReady = this.onMapReady.bind(this);
    this.state = {
      map: null,
      markers: [],
    };
  }

  onMapReady(map) {
    this.setState({
      map,
    });
    // Here add some markers etc..
  }

  render() {
    return (
      <div className="some">
        <GoogleMap onGetMap={this.onMapReady} />
      </div>
    );
  }
}

export default Some;

Example info window:

class BubbleOverlay extends google.maps.OverlayView {

  constructor(options) {
    // Initialize all properties.
    super(options);
    this.options = {};

    this.options.map = options.map;
    this.options.location = options.location;
    this.options.borderColor = options.borderColor || '#666666';
    this.options.borderWidth = options.borderWidth || 1;
    this.options.backgroundColor = options.backgroundColor || '#fff';
    this.options.arrowSize = options.arrowSize || 15;
    this.options.contentHeight = options.contentHeight || 200;
    this.options.contentWidth = options.contentWidth || 200;
    this.options.zIndex = options.zIndex || 1000;
    this.options.onClose = options.onClose;
    // Explicitly call setMap on this overlay.
    this.setMap(options.map);
  }

  /**
   * Convert number to pixels
   * @param  {number} num Number to convert
   * @return {string}     Number in pixels
   */
  px(num) {
    if (num) {
      // 0 doesn't need to be wrapped
      return `${num}px`;
    }
    return num;
  }

/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
  onAdd() {
    if (!this.bubble) {
      this.createDOMElements();
    }

    // Add the element to the "overlayLayer" pane.
    const panes = this.getPanes();
    if (panes) {
      panes.overlayMouseTarget.appendChild(this.bubble);
    }
  }

  createContent() {
    const content = document.createElement('div');
    content.style.borderStyle = 'solid';
    content.style.borderWidth = '1px';
    content.style.borderColor = this.options.borderColor;
    content.style.backgroundColor = this.options.backgroundColor;
    content.style.zIndex = this.options.zIndex;
    content.style.width = this.px(this.options.contentWidth);
    content.style.height = this.px(this.options.contentHeight);
    content.style.position = 'relative';
    content.className = 'bubble-overlay-content';

    return content;
  }

  createCloseBtn() {
    const btn = document.createElement('div');
    btn.className = 'bubble-overlay-btn-close';

    const iconClose = document.createElement('span');
    iconClose.className = 'glyphicon glyphicon-remove';
    btn.appendChild(iconClose);

    return btn;
  }

  createArrow() {
    const arrowSize = this.options.arrowSize;
    const borderWidth = this.options.borderWidth;
    const borderColor = this.options.borderColor;
    const backgroundColor = this.options.backgroundColor;


    const arrowOuterSizePx = this.px(arrowSize);
    const arrowInnerSizePx = this.px(Math.max(0, arrowSize - borderWidth));

    const arrow = document.createElement('div');
    arrow.style.position = 'relative';
    arrow.style.marginTop = this.px(-borderWidth);

    const arrowInner = document.createElement('div');
    const arrowOuter = document.createElement('div');

    arrowOuter.style.position = arrowInner.style.position = 'absolute';
    arrowOuter.style.left = arrowInner.style.left = '50%';
    arrowOuter.style.height = arrowInner.style.height = '0';
    arrowOuter.style.width = arrowInner.style.width = '0';
    arrowOuter.style.marginLeft = this.px(-arrowSize);
    arrowOuter.style.borderWidth = arrowOuterSizePx;
    arrowOuter.style.borderStyle = arrowInner.style.borderStyle = 'solid';
    arrowOuter.style.borderBottomWidth = 0;
    arrowOuter.style.display = '';

    arrowOuter.style.borderColor = `${borderColor} transparent transparent`;
    arrowInner.style.borderColor = `${backgroundColor} transparent transparent`;

    arrowOuter.style.zIndex = this.options.zIndex + 1;
    arrowInner.style.zIndex = this.options.zIndex + 1;

    arrowOuter.style.borderTopWidth = arrowOuterSizePx;
    arrowInner.style.borderTopWidth = arrowInnerSizePx;

    arrowOuter.style.borderLeftWidth = arrowOuterSizePx;
    arrowInner.style.borderLeftWidth = arrowInnerSizePx;

    arrowOuter.style.borderRightWidth = arrowOuterSizePx;
    arrowInner.style.borderRightWidth = arrowInnerSizePx;

    arrowOuter.style.marginLeft = this.px(-(arrowSize));
    arrowInner.style.marginLeft = this.px(-(arrowSize - borderWidth));

    arrow.appendChild(arrowOuter);
    arrow.appendChild(arrowInner);

    return arrow;
  }

/**
 * Create dom elements
 */
  createDOMElements() {
    const bubble = this.bubble = document.createElement('div');
    bubble.style.position = 'absolute';
    bubble.style.zIndex = this.options.zIndex - 1;
    bubble.style.boxShadow = '0px 0px 15px rgba(0,0,0,0.4)';

    const content = this.content = this.createContent();
    const arrow = this.arrow = this.createArrow();
    const closeBtn = this.closeBtn = this.createCloseBtn();

    closeBtn.style.zIndex = this.options.zIndex + 1000;
    closeBtn.onclick = this.options.onClose;
    bubble.appendChild(content);
    bubble.appendChild(arrow);
    bubble.appendChild(closeBtn);
  }


  /* Pan the map to fit the InfoBox.
   */
  panMap() {
    // if we go beyond map, pan map
    const map = this.options.map;
    const bounds = map.getBounds();
    if (!bounds) return;

    // The position of the infowindow
    const position = this.options.location;

    // The dimension of the infowindow
    const iwWidth = this.options.contentWidth;
    const iwHeight = this.options.contentHeight;

    // The offset position of the infowindow
    const iwOffsetX = Math.round(this.options.contentWidth / 2);
    const iwOffsetY = Math.round(this.options.contentHeight + this.options.arrowSize + 10);

    // Padding on the infowindow
    const padX = 40;
    const padY = 40;

    // The degrees per pixel
    const mapDiv = map.getDiv();
    const mapWidth = mapDiv.offsetWidth;
    const mapHeight = mapDiv.offsetHeight;
    const boundsSpan = bounds.toSpan();
    const longSpan = boundsSpan.lng();
    const latSpan = boundsSpan.lat();
    const degPixelX = longSpan / mapWidth;
    const degPixelY = latSpan / mapHeight;

    // The bounds of the map
    const mapWestLng = bounds.getSouthWest().lng();
    const mapEastLng = bounds.getNorthEast().lng();
    const mapNorthLat = bounds.getNorthEast().lat();
    const mapSouthLat = bounds.getSouthWest().lat();

    // The bounds of the infowindow
    const iwWestLng = position.lng() + (iwOffsetX - padX) * degPixelX;
    const iwEastLng = position.lng() + (iwOffsetX + iwWidth + padX) * degPixelX;
    const iwNorthLat = position.lat() - (iwOffsetY - padY) * degPixelY;
    const iwSouthLat = position.lat() - (iwOffsetY + iwHeight + padY) * degPixelY;

    // calculate center shift
    const shiftLng =
        (iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) +
        (iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
    const shiftLat =
        (iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) +
        (iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);

    // The center of the map
    const center = map.getCenter();

    // The new map center
    const centerX = center.lng() - shiftLng;
    const centerY = center.lat() - shiftLat;

    // center the map to the new shifted center
    map.setCenter(new google.maps.LatLng(centerY, centerX));
  }

  draw() {
    // Resize the image's div to fit the indicated dimensions.
    const bubble = this.bubble;

    // Position the overlay
    const point = this.getProjection().fromLatLngToDivPixel(this.options.location);

    if (point) {
      bubble.style.left = this.px(point.x - Math.round(this.options.contentWidth / 2));
      bubble.style.top = this.px(point.y - Math.round(this.options.contentHeight + this.options.arrowSize + 10));
    }
  }

  // The onRemove() method will be called automatically from the API if
  // we ever set the overlay's map property to 'null'.
  onRemove() {
    this.bubble.parentNode.removeChild(this.bubble);
    this.bubble = null;
  }
}

export default BubbleOverlay;