Google Maps Direction API with Custom Map

index.php

<div>
	<div id="map-canvas"></div>
</div>
 <script>
 function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          zoom: 10,
          center: {lat: 42.974181, lng: -89.534077}
        });
        directionsDisplay.setMap(map);

        var icons = {
        	end: new google.maps.MarkerImage(
	    	   // URL
	    	   '<?php echo get_stylesheet_directory_uri() ?>/images/map-marker-small.png',
	    	   // (width,height)
	    	   new google.maps.Size(85, 33),
	    	   // The origin point (x,y)
	    	   new google.maps.Point( 0, 0 ),
	    	   // The anchor point (x,y)
	    	   new google.maps.Point( 44, 28 )
    	  	)
        };

       	directionsService.route({
	          	origin: '<?php echo $formatted_address_for_url ?>',
	          	destination: '<?php echo $destination ?>',
	          	provideRouteAlternatives: true,
	          	travelMode: 'DRIVING',
	          	unitSystem: google.maps.UnitSystem.IMPERIAL

		    	}, function(response, status) {

				if (status === 'OK') {
					directionsDisplay.setDirections(response);

					var leg = response.routes[ 0 ].legs[ 0 ];
					makeMarker( leg.end_location, icons.end, 'title' );
				} else {
					console.log('Directions request failed due to ' + status);
				}
	    });

    	function makeMarker( position, icon, title ) {
    	    new google.maps.Marker({
    	    	position: position,
    	    	map: map,
    	    	icon: icon,
    	    	title: title
    	    });
	      }
      }
      
    </script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo GOOGLE_MAP_KEY ?>&callback=initMap"></script>
<style>
#map-canvas { width: 70%; height: 500px; margin: 0 auto; }
</style>