JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<input type="text" id="address1"/><input type="text" id="address2"/><input type="submit" id="init_map"/>
<div id="map_canvas">Enter locations and click Submit</div>

CSS

#map_canvas {
    background:#ccc;
    height:400px;
    width:100%;
}

body { font:13px/1.231 sans-serif; *font-size:small;
    background: rgb(210,210,210);
    background: -moz-linear-gradient(top, rgba(210,210,210,1) 0%, rgba(230,230,230,1) 13%, rgba(217,217,217,1) 37%, rgba(227,227,227,1) 70%, rgba(227,227,227,1) 83%, rgba(212,212,212,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(210,210,210,1)), color-stop(13%,rgba(230,230,230,1)), color-stop(37%,rgba(217,217,217,1)), color-stop(70%,rgba(227,227,227,1)), color-stop(83%,rgba(227,227,227,1)), color-stop(100%,rgba(212,212,212,1)));
    background: -webkit-linear-gradient(top, rgba(210,210,210,1) 0%,rgba(230,230,230,1) 13%,rgba(217,217,217,1) 37%,rgba(227,227,227,1) 70%,rgba(227,227,227,1) 83%,rgba(212,212,212,1) 100%);
    background: -o-linear-gradient(top, rgba(210,210,210,1) 0%,rgba(230,230,230,1) 13%,rgba(217,217,217,1) 37%,rgba(227,227,227,1) 70%,rgba(227,227,227,1) 83%,rgba(212,212,212,1) 100%);
    background: -ms-linear-gradient(top, rgba(210,210,210,1) 0%,rgba(230,230,230,1) 13%,rgba(217,217,217,1) 37%,rgba(227,227,227,1) 70%,rgba(227,227,227,1) 83%,rgba(212,212,212,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d2d2', endColorstr='#d4d4d4',GradientType=0 );
    background: linear-gradient(top, rgba(210,210,210,1) 0%,rgba(230,230,230,1) 13%,rgba(217,217,217,1) 37%,rgba(227,227,227,1) 70%,rgba(227,227,227,1) 83%,rgba(212,212,212,1) 100%);} 


input[type="submit"] {
    background: rgb(39,39,39);
    background: -moz-linear-gradient(top, rgba(39,39,39,1) 0%, rgba(42,42,42,1) 46%, rgba(53,53,53,1) 46%, rgba(28,28,28,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(39,39,39,1)), color-stop(46%,rgba(42,42,42,1)), color-stop(46%,rgba(53,53,53,1)), color-stop(100%,rgba(28,28,28,1)));
    background: -webkit-linear-gradient(top, rgba(39,39,39,1) 0%,rgba(42,42,42,1)...

JavaScript

var map,
    bounds;

function initialize() {
    var myOptions = {
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        // List of locations, obviously this would be replaced by your input values
        locations = [document.getElementById('address1').value, document.getElementById('address2').value];
    
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    bounds = new google.maps.LatLngBounds();
    
    addMarkers(locations);
    
    // Set up geodesic polyline
    var geodesicOptions = {
        strokeColor: '#CC0099',
        strokeOpacity: 0.7,
        strokeWeight: 3,
        geodesic: true
    }
    geodesic = new google.maps.Polyline(geodesicOptions);
    geodesic.setMap(map);
}

// Geodesic origin
function addOrigin(location) {
    var gPath = geodesic.getPath();
    gPath.push(location);
}

// Geodesic destination
function addDestination(location) {
    var gPath = geodesic.getPath();
    gPath.push(location);
}

// addMarkers function, takes an array of plain english addresses, geocodes 
// them and then adds as markers with the original address the title
function addMarkers(locations) {
    var geocoder = new google.maps.Geocoder();

    // Loop through locations array
    for (var i = 0; i < locations.length; i++) {
        // Use geocode service to find latlng
        geocoder.geocode( { 'address': locations[i] }, drawGeodesic(locations[i], i));
    }

}

function drawGeodesic(location, i) {
    // Closure to handle the async geocoder response
    return (function(results, status){
        if (status == google.maps.GeocoderStatus.OK) {
            // Add as marker
            var marker = new google.maps.Marker({
                map: map, 
                position: results[0].geometry.location
            });
            
            // Add latlng to bounds
            bounds = bounds.extend(results[0].geometry.location);
        } else {
            console.log("Could not...