JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<h1>Hospitals</h1>
<form>
<label>Zip code:</label><input type="text">
<input class="form-submit" type="submit" value="Geocode me!">
</form>
<div id="hospitals"></div>
CSS
.hospital {
margin: 0 0 1em;
}
JavaScript
$(document).ready(function() {
var hcafeed = 'https://hcafeeds.medcity.net/rss/er/ntx_rss_feed.xml';
var yql = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from rss where url="' + hcafeed + '"') + '&format=json&diagnostics=true&callback=?';
//=-=-=-
var directionsService = new google.maps.DirectionsService();
var hospitals = [];
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
function calcDistance(key) {
if (key < hospitals.length){
console.log(key)
var start = "1600 Amphitheatre Pkwy Mountain View, CA 94043";
var end = hospitals[key].addy.replace(/\<.*?\>/gi, "");
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
//directionsDisplay.setDirections(response);
//console.log(response)
getElementByXpath("//div[@data-key="+key+"]/div[@class='distance']").innerHTML = response.routes[0].legs[0].distance.text;
//console.log(response.routes[0].legs[0].distance.text)
calcDistance(++key);
} else {
//wait 5 seconds if failed.
setTimeout(function () {
calcDistance(key);
}, 5000);
}
});
}
}
//=-=-=-
output_hospitals();
function output_hospitals() {
$.getJSON(yql,function(data) {
if(data.query.count > 0) {
// Run through hospitals and set html
hospitals = [];
$.each( data.query.results.item,...