Closest EVgo Charger

Get's the closest station

by Barry Margolin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDaDeRq_2VLef8PV_kTx8qFYAaBESl2v_M&amp;libraries=geometry"></script>
<div id="tool_container"> 
	<h3>Find the nearest location from a list of addresses</h3>
	<p>Add a list of addresses, one address per line, set what items you would like to display, and click go!</p>

	<div id="tool_settings">
		<p class="setting_toggle">
			<label>The number of closest chargers to output.</label>
			<input id="number_of_results" class="tool_setting" type="number" name="number_of_results" value="1" min="1" max="10">
			<small>(The free daily limit is 2,500, so if the number of addresses times the number of requests is over that, you will incur charges)</small>
		</p>
		<p class="setting_toggle">
			<label>Max number of miles for the charger (leave blank for no limit).</label>
			<input id="max_driving_distance" class="tool_setting" type="number" name="max_driving_distance" value="15" min="1" max="100">
			<small>(Always Outputs the first result. Displays a flag if it is over the limit. Subsequent results get suppressed if over the limit.)</small>
		</p>
		<div class="setting_toggle">
			<input id="table_headers" class="tool_setting" type="checkbox" name="table_headers" value="table_headers" checked="checked"> Output table headers
		</div>
		<div class="setting_toggle">
			<input id="working_chargers_only" class="tool_setting" type="checkbox" name="working_chargers_only" value="working_chargers_only" checked="checked"> Show only working chargers
		</div>
		<div class="setting_toggle">
			<input id="fast_chargers_only" class="tool_setting" type="checkbox" name="fast_chargers_only" value="fast_chargers_only" checked="checked"> Show only fast chargers
		</div>
		<p class="setting_toggle">
			<label>The size of the static map of the charger you would like. (The format shouls be [width]x[height] in pixels with no...

CSS

.clear_floats { clear:both; }

#addresses, #csv_result {
	width:100%;
}


#error_message {
	position: relative;
	background-color: rgba(255,255,200,.8);
	padding: 5px;
}
#error_message p {
	margin: 0;
}
.close_btn {
	position: absolute;
	top: -5px;
	right: -5px;
	color: #c50000;
	background-color: transparent;
	border: none 0;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	vertical-align: middle;
	padding: 1px 6px;
}


#loading {
	display:none;
}
#loading.loading {
	display:none;
	background-color: #09293a;
	border: 4px solid #09293a;
	height: 30px;
	width: 80px;
	border-radius: 5px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}
#loading.loading:after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: -9px;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	height: 12px;
	width: 6px;
	background-color: #09293a;
}
#loading.loading #loading_bar {
	background-color: #00aeef;
	height: 100%;
//	animation: fill 3s linear infinite;
	-webkit-transition: width 500ms;
	   -moz-transition: width 500ms;
	     -o-transition: width 500ms;
	        transition: width 500ms;

}
#loading #progress {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 30px;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	color: #fff;
	font-weight: bold;
	font-family: sans-serif;
	text-shadow: 1px 0 0 #09293a, 0 1px 0 #09293a, -1px 0 0 #09293a, 0 -1px 0 #09293a;
}

/* fill animation code for loading battery */
@-webkit-keyframes fill {
    0% { width:0; }
    100% { width:100%; }
}
@-moz-keyframes bounce {
    0% { width:0; }
    100% { width:100%; }
}
@-o-keyframes bounce {
    0% { width:0; }
    100% { width:100%; }
}
@keyframes bounce {
    0% { width:0; }
    100% {...

JavaScript

jQuery(document).ready(function(){


	var addresses;
	var progress_status;
	var charger_data;
	var promises = [];
	var number_of_results;
	var geocoder;
// Google has a max of 50 request per second. However, it seems to fire much more often.
// Delay is 1000 ms x the number of results. ( 20 ms is exact for 50 per second. Changed to 50 times to avoid more issues. )
	var delay;
	var max_driving_distance;


	jQuery('#submit_btn').on('click', function(){
// get lines from input field.
		addresses = [];
		var lines = jQuery('#addresses').val().split(/\n/);
		for (var i=0; i < lines.length; i++) {
			// only push this line if it contains a non whitespace character.
			if (/\S/.test(lines[i])) {
				addresses.push({ address: jQuery.trim(lines[i]), geo: { latitude: 0, longitude: 0 }, nearest: [], errors: [] });
			}
		}
		number_of_results = parseInt( $('#number_of_results').val() );

		progress_status = { done:0, error:0, total: addresses.length };
		delay = 5000 * number_of_results;

		


// Initialize Error Messages.
		jQuery('#error_message').html('');
		if ( progress_status.total * number_of_results > 2499 ){
			display_error( 'Processing ' + progress_status.total + ' records. Google has a max of 2,500 per day. You may incur charges.</p>' );
		} else {
			display_error( 'Processing ' + progress_status.total + ' records.</p>' );
		}

//display loading bar
		jQuery('#loading').fadeIn(100).find('#loading_bar').css('width', '2%');
		jQuery("#progress").html(progress_status.done + '/' + progress_status.total );

		jQuery('#csv_result').val('Processing...');
		
		max_driving_distance = parseInt( $('#max_driving_distance').val() );
// Create ajax request parameters
		$.ajax({
			method: "GET",
			url: "https://api11.evgo.com/stations/mapsites/callback/getMapData",  // get API data
			jsonpCallback: 'getMapData',
			dataType: "jsonp",
			data: {
				dl: 1    // Only for dropbox link. Remove when move to actual charger_data
			},
		}).done(function( data ) {
			var...