JSFiddle - React, Tailwind, and code Playground

by Chris Hughes

JavaScript

//Sets properties types for the station object
function station(name, id, lat, lon, elevation) {
    this.name = name;
    this.id = id;
    this.lat = lat;
    this.lon = lon;
    this.elevation = elevation;
    this.marker = new google.maps.LatLng(lat, lon);
}


//Creating station objects
var NUF = new station("Newark Univ Farm", "USC00076410", 39.6694, -75.7514, 90);
var WNC = new station("Wilmington New Castle", "USW00013781", 39.6728, -75.6008, 79);
var WPR = new station("Wilmington Porter Reservoir", "USC00079605", 39.7739, -75.5414, 270);
var DOV = new station("Dover", "USC00072730", 39.2583, -75.5167, 30);
var GRE = new station("Greenwood Zone 2 NE", "USC00073595", 38.8161, -75.5761, 45);
var MIL = new station("Milford 2 SE", "USC00075915", 38.898, -75.4250, 35);
var GE1 = new station("Georgetown 5 SW", "USC00073750", 38.6333, -75.4500, 45);
var GE2 = new station("Georgetown Sussex Co AP", "USW00013764", 38.6892, -75.3592, 51);
var LEW = new station("Lewes", "USC00075320", 38.7756, -75.1389, 15);


//Generating the functionality of the Google Map

var map; //Setting variable that will link to html

//Initializes the google map 
function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(39.165, -75.45),
        disableDoubleClickZoom: true,
        streetViewControl: false
    }; 

    //Links map to 'map-canvas' ID in HTML
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    //Adding test markers (consider creating a function for this)
    var marker0 = new google.maps.Marker({
        position: NUF.marker,
        map: map,
        title: NUF.name,
        icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'

    });
    var marker1 = new google.maps.Marker({
        position: WNC.marker,
        map: map,
        title: WNC.name,
        icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'

    });
    var marker2 = new google.maps.Marker({
        position:...