Libraries and resources used to build this app
- Google Maps API
- Google Geocoder API
- Google Places API
- jQuery Autocomplete
- Airports Open Data
- Nautical Distance algorithm
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
placeMarkerTo() if user inputs search query without using autocomplete.
- On page load,
initMap()is called from the script in
- 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.
- 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.