jku-ba-react/src/Google.js

import React from "react";
import GoogleMapReact from 'google-map-react';
import "./css/maps.css";
import apiKey from './config/googleApiKey.js';
import {calcDistance} from './helpers/distance';
import {longitude, latitude, mapWidth, mapHeight, markerIcon, testPath} from "./config/variables";

const svgStyle = {
  fill: "#343a40",
  stroke: "none",
  top: "-20",
  left: "-8",
  position: "absolute"
};

const Marker = ({ text }) =>
  <div>
    <svg height={20} viewBox="0 0 24 24" style={svgStyle}>
      <path d={markerIcon}/>
    </svg>
    <p>{text}</p>
  </div>;

export default class Google extends React.Component{
  state = {
    latitude: latitude,
    longitude: longitude,
    zoom: 15,
    distance: 0,
    path: testPath,
    draggable: true
    }

  onMarkerInteraction = (childKey, childProps, mouse) => {
    this.setState({draggable: false});
  }
  
  addMarker = (event) => {
    const lng = event.lng
    const lat = event.lat
    console.log("Clicked at", lat, "/", lng)
    let pathCopy = this.state.path.slice();
    pathCopy.push([lat, lng]);
    this.setState({path: pathCopy})
    this.getDistance()
  }

  updateMarker = (childKey, childProps, mouse) => {
    const lng = mouse.lng
    const lat = mouse.lat
    console.log("new position (marker", childKey, "):", lat, lng)
    let pathCopy = this.state.path.slice();
    pathCopy[childKey] = [lat, lng]
    this.setState({path: pathCopy, draggable: true})
    this.getDistance()
  }

  getDistance = () => {
    let dst = calcDistance(this.state.path)
    this.setState({distance: dst})
  }

  clearPath = () => {
    this.setState({path: [], distance: 0})
  }

  render() {
    const position = [this.state.latitude, this.state.longitude]
    return (
      <div>
        <div className="map" style={{height: mapHeight, width: mapWidth}}>
          <GoogleMapReact
            bootstrapURLKeys={{ key: apiKey }}
            defaultCenter={position}
            defaultZoom={this.state.zoom}
            yesIWantToUseGoogleMapApiInternals
            layerTypes={['TrafficLayer', 'TransitLayer']}
            onClick={(e, c) => this.addMarker(e, c)}

            draggable={this.state.draggable}
            onChildMouseDown={this.onMarkerInteraction}
            onChildMouseUp={this.updateMarker}
            onChildMouseMove={this.onMarkerInteraction}
            onChildClick={() => console.log('child click')}
          >
            {this.state.path.map((pos, idx) =>
              <Marker
                lat={pos[0]}
                lng={pos[1]}
                text={idx}
                key={idx}
                draggable={true}
                onDragEnd={(e) => this.updateMarker(idx, e)}
              />
            )}

          </GoogleMapReact>
        </div>

        <div className="mapInfo">
          <button onClick={this.clearPath}>Clear path</button>
          <button onClick={this.getDistance}>Calculate Distance</button>
          <p>
            Distanz: {Math.round(this.state.distance*100)/100} km
          </p>
        </div>
      </div>
    );
  }
}