Cannot get fiddle script with google maps to work on local

Question

I have This Fiddle which works fine on fiddle - but when i copy the script into phpstorm - it's not working... the route is gone....

On fiddle the google maps links is

https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js

When i run it from phpstorm i add my key, like this:

<script async defer
    src="https://maps.googleapis.com/maps/api/js?
    key=SOME-KEY
   &callback=initMap">
</script>

Here is the code :`

 var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
   var map;
    var lineSymbol = {

        path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
        fillColor: '#3da6f9',
        fillOpacity: 1,
        anchor: new google.maps.Point(0,0),
        strokeWeight: 0,
        strokeOutline:2,
         scale: 0.2
       };
    function initMap() {
    directionsDisplay = new google.maps.DirectionsRenderer();

      var pointA = new google.maps.LatLng(48.8765, 2.36714);
      var pointB = new google.maps.LatLng(48.8693, 2.36822);
      var mapOptions = {
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pointA
    }
   map = new google.maps.Map(document.getElementById('map'), mapOptions);
   directionsDisplay = new google.maps.DirectionsRenderer({
     polylineOptions: {
                strokeColor: '#426289',
                strokeOpacity: 0.4,
                strokeWeight: 5,
                icons: [{
                    icon: lineSymbol,
                    offset: '0px',
                    repeat: '15px'
                }]
            },
            suppressMarkers: true,
            map: map
    }),
     markerA = new google.maps.Marker({
        position: pointA,
        icon: 'https://drive.google.com/uc?id=0B3RD6FDNxXbdVXRhZHFnV2xaS1E',
        map: map
    }),
    markerB = new google.maps.Marker({
        position: pointB,
        icon: 'https://drive.google.com/uc?id=0B3RD6FDNxXbdM3E5clBqWDY5MWM',
        map: map
    });
    calcRoute(pointA, pointB);

   }

  function calcRoute(start, end) {
   var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
   };
   directionsService.route(request, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        var step = 1;
       // var infowindow2 = new google.maps.InfoWindow();
                var content = '<div id="iw-container">' +
                '<div class="iw-title">Porcelain Factory of Vista 
                 Alegre</div>' +
                '<div class="iw-content">' +
                  '<div class="iw-subTitle">History</div>' +
                  '<img src="https://drive.google.com/uc?
                   id=0B3RD6FDNxXbdVWp6NE9jazAxMzg"  height="25" 
                width="25">' +
                  '<p>'+response.routes[0].legs[0].steps[step].distance.text 
              + "<br>" + 
                 response.routes[0].legs[0].steps[step].duration.text + " 
            "+'</p>' +
                  '<div class="iw-subTitle"></div>' +

                '</div>' +
                '<div class="iw-bottom-gradient"></div>' +
              '</div>';

            // A new Info Window is created and set content
        var infowindow = new google.maps.InfoWindow({

      content: content,

    // Assign a maximum value for the width of the infowindow allows
     // greater control over the various content elements
    maxWidth: 150
    });




infowindow.setPosition(response.routes[0].legs[0].steps[step].end_location);
        infowindow.open(map);

       // infowindow2.setContent('<span class="foo">'+'</span>');
        infowindow.setPosition(response.routes[0].legs[0].steps[step].end_location);
        //infowindow2.open(map);
    }
  google.maps.event.addListener(infowindow, 'domready', function() {

// Reference to the DIV that wraps the bottom of infowindow
  var iwOuter = $('.gm-style-iw');

/* Since this div is in a position prior to .gm-div style-iw.
 * We use jQuery and create a iwBackground variable,
 * and took advantage of the existing reference .gm-style-iw for the 
 previous div with .prev().
*/
var iwBackground = iwOuter.prev();

// Removes background shadow DIV
iwBackground.children(':nth-child(2)').css({'display' : 'none'});

// Removes white background DIV
iwBackground.children(':nth-child(4)').css({'display' : 'none'});

// Moves the infowindow 115px to the right.
iwOuter.parent().parent().css({left: '5px'});

// Moves the shadow of the arrow 76px to the left margin.
iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s 
+ 'left: 76px !important;'});

// Moves the arrow 76px to the left margin.
iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s 
 + 'left: 76px !important;'});

// Changes the desired tail shadow color.
iwBackground.children(':nth-child(3)').find('div').children().css({'box-
shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'});

// Reference to the div that groups the close button elements.
 var iwCloseBtn = iwOuter.next();

// Apply the desired effect to the close button
iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid 
#48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'});

// If the content of infowindow not exceed the set maximum height, then the 
gradient is removed.
if($('.iw-content').height() < 140){
  $('.iw-bottom-gradient').css({display: 'none'});
}

// The API automatically applies 0.7 opacity to the button after the 
mouseout event. This function reverses this event to the desired value.
iwCloseBtn.mouseout(function(){
  $(this).css({opacity: '1'});
  });
  });

   });



}



   google.maps.event.addDomListener(window, 'load', initMap);


  // 

I have so console errors - but they don't stop the code from working in fiddle... Here are the errors i get when run on local