Lovely front-end app utilizing Google Maps to deliver nautical distances between 2 points.
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Place to Place Nautical Distance Calculator

This mini app uses a variety of lovely JavaScript libraries to build a lightweight single-page app that calculates distances between two searched locations.

Libraries and resources used to build this app


placeMarkerFrom() and placeMarkerTo(): initiated by selection made from dropdown autocomplete menu list, or on 'enter' keypress from either input. Closes any previous infoWindows (marker labels) and markers present on the map respective to input (e.g., placeMarkerFrom() removes previous placeFrom markers and infoWindows), which allows for multiple searches without refreshing the page. Makes a call to Geocoder API to get information about the search term. Pushes result into bothLocations object to save latitude and longitude, as well as pushes result into LatLngList object. Ensures map view includes marker location, formats marker label, and drops marker on the map. Checks if both points are already on the map and triggers showNauticalDistance() if so.

distance(): an algorithm developed by GeoDataSource, taking two sets of latitude and longitude coordinates and returning nautical distance between them.

showNauticalDistance(): takes both search results, triggers distance(), appends result to DOM. Uses location coordinates to create new Polyline, append to DOM, and remove any previous Polylines.

initMap(): triggered on page load/refresh. Initializes the Google map, creates LatLngList array to allow map to stretch to cover both searched points, creates initial markers, listens for keydown on input and triggers placeMarkerFrom() and placeMarkerTo() if user inputs search query without using autocomplete.

Program flow:

  1. On page load, initMap() is called from the script in index.html.
  2. On user input, Google Maps/Places triggers to show a drop-down menu of potential matches. User selects from list by clicking or via up/down arrows, or by pressing 'enter' on their own inputted search term, sees a marker drop onto the map to mark their search result.
  3. Once user submits both inputs, map boundaries stretch to cover both points. Additionally, showNauticalDistance() is triggered, which calls distance() with both sets of coordinates to calculate nautical distance, appends result to DOM, and charts the Polyline flight path, deleting any previous Polylines present on the map.