React - google maps

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import styles from './styles.css';

const loadScript = src => {
  const ref = global.document.getElementsByTagName('script')[0];
  const script = global.document.createElement('script');
  script.src = src;
  script.async = true;
  ref.parentNode.insertBefore(script, ref);
};

class GoogleMap extends Component {
  static defaultProps = {
    selectedLocation: {
      geolocation: [],
      title: '',
    },
    zoom: 16,
    mapCenterCoords: [],
    youAreHereCoords: [],
  };

  static changeMarkerPosition(coords = [], title = '') {
    const { Marker, LatLng, Animation } = global.google.maps;
    const marker = new Marker({
      position: new LatLng(...coords),
      title,
      animation: Animation.DROP, // bounce is also cool
    });
    marker.setMap(global.Map); // display current marker
  }

  constructor(props) {
    super(props);
    this.setYouAreHere = this.setYouAreHere.bind(this);
    this.getMapOptions = this.getMapOptions.bind(this);
    this.mapLoadedCallback = this.mapLoadedCallback.bind(this);
  }

  componentDidMount() {
    global.mapLoadedCallback = this.mapLoadedCallback; // assign instance method to glonal so it can be called by loaded script
    const apiUrl =
      'http://maps.googleapis.com/maps/api/js?&callback=mapLoadedCallback';
    loadScript(apiUrl); // load script and trigger callback
  }

  componentWillReceiveProps({ selectedLocation }) {
    const userSelectedNewLocation =
      selectedLocation.title !== this.props.selectedLocation.title;
    if (userSelectedNewLocation) {
      GoogleMap.changeMarkerPosition(
        selectedLocation.geolocation,
        selectedLocation.title,
      );
    }
  }

  setYouAreHere() {
    const { Marker, LatLng } = global.google.maps;
    const marker = new Marker({
      position: new LatLng(...this.props.youAreHereCoords),
      title: 'You are Here',
    });
    marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
    marker.setMap(global.Map);
  }

  getMapOptions() {
    const { LatLng } = global.google.maps;
    return {
      zoom: this.props.zoom,
      center: new LatLng(...this.props.mapCenterCoords),
    };
  }

  mapLoadedCallback() {
    const { Map } = global.google.maps;
    global.Map = new Map(ReactDOM.findDOMNode(this), this.getMapOptions());
    this.setYouAreHere();
  }

  render() {
    return <div className="maps__google_maps" />;
  }
}

const Map = props =>
  (<div className={styles.mapContainer}>
    <GoogleMap {...props} />
  </div>);

export default Map;