import React from 'react'
import ReactDOM from 'react-dom'

const KRUEMELKISTE_POSITION = {
  lat: 52.54846,
  lng: 13.4653
}

class MapContainer extends React.Component {

  constructor() {
    super()
    this.loadJS = this.loadJS.bind(this)
    this.initMap = this.initMap.bind(this)
  }

  componentDidMount() {
    // Connect the initMap() function within this class to the global window context,
    // so Google Maps can invoke it
    window.initMap = this.initMap;

    // Asynchronously load the Google Maps script, passing in the callback reference
    this.loadJS('https://maps.googleapis.com/maps/api/js?key=AIzaSyCwRVzrL4nSTZ0xkgLgkZgi7Q1TLOUoEao&callback=initMap')
  }

  loadJS(src) {
    var ref = window.document.getElementsByTagName("script")[0];
    var script = window.document.createElement("script");
    script.src = src;
    script.async = true;
    ref.parentNode.insertBefore(script, ref);
  }

  initMap() {
    this.map = new google.maps.Map(ReactDOM.findDOMNode(this.refs.map), {
      center: KRUEMELKISTE_POSITION,
      zoom: 15,
    });

    var marker = new google.maps.Marker({
      position: KRUEMELKISTE_POSITION,
      map: this.map,
      title: 'Steffis Krümelkiste - Gounodstr. 101'
    });
  }

  panToHome() {
    this.map.panTo(KRUEMELKISTE_POSITION);
  }

  render() {
    return (
      <div>
        <div 
          ref='map'
          style={{
            height: this.props.height, 
            width: this.props.width,
          }}>
        </div>
      </div>
    )
  }
}

export default MapContainer
import React from 'react'
import ReactDOM from 'react-dom'

class MapContainer extends React.Component {

  render() {
    return (
      <div css={{
        display: 'flex',
        minHeight: '30em',
      }}>
        <iframe src="https://www.openstreetmap.org/export/embed.html?bbox=13.462725877761843%2C52.54733633046878%2C13.467746973037722%2C52.54960019277862&amp;layer=hot&amp;marker=52.548471504454746%2C13.46523642539978"
          css={{
            flex: 1,
            margin: 0,
            border: 0
          }}
        />
      </div>
    )
  }
}

export default MapContainer
Replace google maps with openstreetmaps
Replace google maps with openstreetmaps
