JSFiddle - React, Tailwind, and code Playground

by cdeutsch

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://j.maxmind.com/app/geoip.js"></script>
<script src="http://cdn.simplegeo.com/js/1.2/simplegeo.places.jq.min.js"></script>


<h1>Starbucks to Starbucks</h1>
    
<div>
    <input type="button" id="go" value="Get Directions from Closest Starbucks to Next Starbucks" />
</div>

<div id="info"></div>

<div id="map"></div>

CSS

div.field 
{
    margin: 1em 0;
}

#map 
{
    margin: 2em 0;
    width: 100%;
    height: 600px;
}

#info 
{
    margin: 2em 0;
}

JavaScript

//simplegeo globals:
var geoclient = new simplegeo.PlacesClient('raBngrwm24bfqyg5TyCB4X8rFKDwEfTe');

//google maps globals:
var directionRenderer;
var directionsService = new google.maps.DirectionsService();
var map;

$(document).ready(function () {

    ////setup map starting point for Google Maps
    //set initial coords to latitude -92 and longitude 32 which is somewhere around Kansas City in the center of the  US,
    //  and then set the zoom to 4 so the entire US is visible and centered.
    var kansas = new google.maps.LatLng(32, -92);
    var myOptions = {
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: kansas
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    directionsRenderer = new google.maps.DirectionsRenderer();
    directionsRenderer.setMap(map);

    //wire up button click.
    $('#go').click(function () {
        //show the busy indicator since we'll be making a couple async calls.
        $('#busy').show();
        //use our new getLatLng with fallback and define an inline function to handle the callback.
        getLatLng(function (latitude, longitude, isMaxMind) {
            //use simplegeo to get closest starbucks.
            var query = "Starbucks";
            geoclient.search(latitude, longitude, { q: query, radius: 20, num: 1 }, function (err, dataStart) {
                if (err) {
                    error(err);
                    //remove the busy indicator.
                    $('#busy').hide();
                } else {
                    //we only asked for one result and SimpleGeo returns results based on distance so the closest is first, 
                    //  so make sure we got a result.
                    if (dataStart.features.length == 1) {
                        //save start coordinates and address.
                        var startLat = dataStart.features[0].geometry.coordinates[1];
                        var startLng =...