gistfile1.txt

import React from 'react';
import {Map,GoogleApiWrapper} from 'google-maps-react';
import './MapFilter.scss';
import Popup from './Popup';

var center= new google.maps.LatLng(52.3702,4.8952); //Defaults for amsterdam

var heatmap;


function togglePopup(){
  this.setState({open: !this.state.open});
}

function changeGradient() {
  var gradient = [
    'rgba(0, 255, 255, 0)',
    'rgba(0, 255, 255, 1)',
    'rgba(0, 191, 255, 1)',
    'rgba(0, 127, 255, 1)',
    'rgba(0, 63, 255, 1)',
    'rgba(0, 0, 255, 1)',
    'rgba(0, 0, 223, 1)',
    'rgba(0, 0, 191, 1)',
    'rgba(0, 0, 159, 1)',
    'rgba(0, 0, 127, 1)',
    'rgba(63, 0, 91, 1)',
    'rgba(127, 0, 63, 1)',
    'rgba(191, 0, 31, 1)',
    'rgba(255, 0, 0, 1)'
  ]
  heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}
function changeRadius() {
  heatmap.set('radius', heatmap.get('radius') ? null : 20);
}

function changeOpacity() {
  heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}

heatmap = new google.maps.visualization.HeatmapLayer({
  data: getPoints(),
  map: MapFilter
});

function getPoints(){
};

class MapFilter extends React.Component {
  constructor(){
    super();
    this.state = {open:false};
  }
  render(){
    var {hotels, google, onSelect} = this.props;
    return (
      <div className="mapFilter">;
      <Popup open={this.state.open} onClose = {this.togglePopup.bind(this)} onSelect={onSelect} hotels={hotels}/>
      <Map className="smallMap" onClick={this.togglePopup.bind(this)} google={google} libraries={visualization} zoom={14} width="100%" 		   
			center={center} height="100%" disableDefaultUI={true} options={()=>({panControl: false,
        mapTypeControl: false, fullScreen:false, disableDefaultUI:true})}/>

    </div>
  );
  }
}

export default GoogleApiWrapper({
apiKey: "AIzaSyA1h8DIDQNC6lHJDkrZj6_Wexsjj8nDbVI"
})(MapFilter);