JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<html>
<body>
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.js"></script>
    <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.services.js"></script>
    <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
    
    <div id="map_canvas" style="height: 600px;"></div>
    <div id="panel" style="height: 200px; width: 300px;"></div>
</body>
</html>

JavaScript

$(document).ready(function () {
        $('#map_canvas').gmap({ 'center': '39.744244, -104.834960' });
        $('#map_canvas').gmap().bind('init', function () {
            $('#map_canvas').gmap('addControl', 'control', google.maps.ControlPosition.LEFT_TOP);
            $('#map_canvas').gmap('option', 'zoom', 12);
                        
            var start = 55.67943;
            for (i = 0; i < 1000; i++) {
                $('#map_canvas').gmap('addMarker', { 'position': start + ', 37.500144' } );
                start += 0.001;
            }
          
            $('#map_canvas').gmap(
                'displayDirections',
                {
                    'origin': '55.67923, 37.500114', 'destination': '55.677681, 37.480888', 'travelMode': google.maps.DirectionsTravelMode.WALKING
                },
                {
                    'panel': document.getElementById('panel')
                },
                function (result, status) {
                    if (status == 'OK') {
                        
                    }
                });
        });
    });