Google Maps API v3.0 and react-google-maps snippets

DraggableMarker.md

Kind of a barebones approach to draggable markers, saving the new position in state By Franklin Harvey

interface MarkerProps {
    position: google.maps.LatLng
    onDragMarker(e: google.maps.MouseEvent): void
}

DraggableMarker = (props: MarkerProps) => (
    <Marker
        position={props.position}
        draggable
        onDragEnd={props.onDragMarker}
    /> 
)

... in some component class ...

render() {
    return (
        <DraggableMarker 
            position={this.state.markerPosition}
            onDragMarker={this.onDragMarker}
        />
    )
}

onDragMarker = (e: google.maps.MouseEvent) => {
    this.setState({
        markerPosition: e.latLng
    })
}

HeadingBetweenTwoPoints.ts

/* 
* 
* Get an angle between 0 and 360 degrees from an input of two points 
* Can be used to measure angles on a map using markers
* Example: https://imgur.com/a/sU4NwCX
* 
* By Franklin Harvey
* 
*/

const getAngle = (points: [google.maps.LatLng, google.maps.LatLng]): number => {
    let angle: number = google.maps.geometry.spherical.computeHeading(points[0], points[1])

    // google maps always spits out (-180, 180]
    if (angle < 0) {
        angle += 360
    }

    return angle
}

PositionAlongHeading.ts

/* 
* 
* Get some position which is x distance and n heading from origin position
* Can be used to rotate one marker around another
* Example: https://imgur.com/a/sU4NwCX
* 
* By Franklin Harvey
* 
*/

const onAngleChange = (points: [google.maps.LatLng, google.maps.LatLng], angle: number): [google.maps.LatLng, google.maps.LatLng]  => {

    const origin = points[0]

    // get distance, so pivoting is consistent distance
    const distance: number = google.maps.geometry.spherical.computeDistanceBetween(origin, points[1])

    // get new google LatLng
    const newPosition: google.maps.LatLng = google.maps.geometry.spherical.computeOffset(origin, distance, angle)

    return [origin, newPosition]
}