JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<input id="address1" style="visibility:hidden" type="textbox" value="Heathrow Airport">
<input id="address2" style="visibility:hidden" type="textbox" value="Birmingham UK">
<input id="address3" style="visibility:hidden" type="textbox" value="New York">

        <div id="map"><h3 class="float">Your Flight Map</h3><a class="basic" href="#"><img style="padding:4px 10px 10px 4px" src="http://jetbookingdirect.com/wp-content/themes/jetbook2012/img/1314278836_system-help.png"></a>
        <div id="map_canvas" style="width:360px; margin-top:14px; height:400px;    -webkit-box-shadow: 0px 0px 0px 8px rgba(235,235,235,0.2);
    -moz-box-shadow: 0px 0px 0px 8px rgba(235,235,235,0.2);
    box-shadow: 0px 0px 0px 8px rgba(235,235,235,0.2);"></div>
        </div>

JavaScript

var map,
    bounds;

function initialize() {
    var pinkParksStyles = [
    {
        featureType: "all",
        stylers: [
          { saturation: -80 }
        ]
      },{
        featureType: "road.arterial",
        elementType: "geometry",
        stylers: [
          { hue: "#00ffee" },
          { saturation: 50 }
        ]
      },{
        featureType: "poi.business",
        elementType: "labels",
        stylers: [
          { visibility: "off" }
        ]
      }
    ];

    var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
        {name: "Pink Parks"});
    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('address3').value, document.getElementById('address2').value];
    
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    bounds = new google.maps.LatLngBounds();
   map.mapTypes.set('pink_parks', pinkMapType);
      map.setMapTypeId('pink_parks');   
    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++)...