Направления в Картах Google перестали работать, когда я добавил геолокацию

Question

Я стараюсь, чтобы направления Google Maps работали с геолокацией (используя образцы, предоставленные Google Maps). Один работает, но при объединении возникает проблема, что на карте не будет отображаться путь (однако автозаполнение работает нормально).

 function initMap() { 
if (navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(function(position){ 
     var map = new google.maps.Map(document.getElementById('map'), { 
      mapTypeControl: false, 
      center: {lat:position.coords.latitude, lng:position.coords.longitude}, 
      zoom: 10 
     }); 
    var panorama = new google.maps.StreetViewPanorama(
     document.getElementById('pano'), { 
     position: {lat:position.coords.latitude, lng:position.coords.longitude}, 
     pov: { 
      heading: 34, 
      pitch: 10 
     } 
     }); 
     var usermarker = new google.maps.Marker({ 
    position: {lat:position.coords.latitude, lng:position.coords.longitude}, 
    draggable: true, 
    map: map, 
    icon: 'http://x3.cdn03.imgwykop.pl/c3201142/comment_aBtolaUIxKS7cvUnii43PWDPT3Lqduc2,w400.jpg', 
}); 
// test marker 
    var marker2 = new google.maps.Marker({ 
    position: {lat:50.671064, lng:17.926138}, 
    draggable: true, 
    map: map, 
    icon: 'http://emojipedia-us.s3.amazonaws.com/cache/1e/4d/1e4d8093e7011575d9266598a06d8ecb.png', 
}); 
}); 
     new AutocompleteDirectionsHandler(map); 
     } 
/** 
     * @constructor 
     */ 
     function AutocompleteDirectionsHandler(map) { 
     this.map = map; 
     this.originPlaceId = null; 
     this.destinationPlaceId = null; 
     this.travelMode = 'WALKING'; 
     var originInput = document.getElementById('origin-input'); 
     var destinationInput = document.getElementById('destination-input'); 
     var modeSelector = document.getElementById('mode-selector'); 
     this.directionsService = new google.maps.DirectionsService; 
     this.directionsDisplay = new google.maps.DirectionsRenderer; 
     this.directionsDisplay.setMap(map); 
     var originAutocomplete = new google.maps.places.Autocomplete(
      originInput, {placeIdOnly: true}); 
     var destinationAutocomplete = new google.maps.places.Autocomplete(
      destinationInput, {placeIdOnly: true}); 
     this.setupClickListener('changemode-walking', 'WALKING'); 
     this.setupClickListener('changemode-transit', 'TRANSIT'); 
     this.setupClickListener('changemode-driving', 'DRIVING'); 
     this.setupPlaceChangedListener(originAutocomplete, 'ORIG'); 
     this.setupPlaceChangedListener(destinationAutocomplete, 'DEST'); 
     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput); 
     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput); 
     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector); 
     } 
    //everything works until this moment 
     AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) { 
     var radioButton = document.getElementById(id); 
     var me = this; 
     radioButton.addEventListener('click', function() { 
      me.travelMode = mode; 
      me.route(); 
     }); 
     }; 
     AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) { 
     var me = this; 
     autocomplete.bindTo('bounds', this.map); 
     autocomplete.addListener('place_changed', function() { 
      var place = autocomplete.getPlace(); 
      if (!place.place_id) { 
      window.alert("Please select an option from the dropdown list."); 
      return; 
      } 
      if (mode === 'ORIG') { 
      me.originPlaceId = place.place_id; 
      } else { 
      me.destinationPlaceId = place.place_id; 
      } 
      me.route(); 
     }); 
     }; 
     AutocompleteDirectionsHandler.prototype.route = function() { 
     if (!this.originPlaceId || !this.destinationPlaceId) { 
      return; 
     } 
     var me = this; 

     this.directionsService.route({ 
      origin: {'placeId': this.originPlaceId}, 
      destination: {'placeId': this.destinationPlaceId}, 
      travelMode: this.travelMode 
     }, function(response, status) { 
      if (status === 'OK') { 
      me.directionsDisplay.setDirections(response); 
      } else { 
      window.alert('Directions request failed due to ' + status); 
      } 
     // map.setStreetView(panorama); 
     }); 
     }; 
} 

Answer 1

Я экспериментировал с размещением пути, занимающего различные позиции, и, наконец, получил его работу. @Jaromanda X - спасибо за идею :)

function initMap() { 


if (navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(function(position){ 
     var map = new google.maps.Map(document.getElementById('map'), { 
      mapTypeControl: false, 
      center: {lat:position.coords.latitude, lng:position.coords.longitude}, 
      zoom: 10 
     }); 

    var marker2 = new google.maps.Marker({ 
    position: {lat:50.671064, lng:17.926138}, 
    draggable: true, 
    map: map, 
    icon: 'http://emojipedia-us.s3.amazonaws.com/cache/1e/4d/1e4d8093e7011575d9266598a06d8ecb.png', 
}); 

var panorama = new google.maps.StreetViewPanorama(
     document.getElementById('pano'), { 
     position: {lat:position.coords.latitude, lng:position.coords.longitude}, 
     pov: { 
      heading: 34, 
      pitch: 10 
     } 
     }); 
     var usermarker = new google.maps.Marker({ 
    position: {lat:position.coords.latitude, lng:position.coords.longitude}, 
    draggable: true, 
    map: map, 
    icon: 'http://x3.cdn03.imgwykop.pl/c3201142/comment_aBtolaUIxKS7cvUnii43PWDPT3Lqduc2,w400.jpg', 
}); 
    new AutocompleteDirectionsHandler(map); 
     }); 
/** 
     * @constructor 
     */ 
     function AutocompleteDirectionsHandler(map) { 
     this.map = map; 
     this.originPlaceId = null; 
     this.destinationPlaceId = null; 
     this.travelMode = 'WALKING'; 
     var originInput = document.getElementById('origin-input'); 
     var destinationInput = document.getElementById('destination-input'); 
     var modeSelector = document.getElementById('mode-selector'); 
     this.directionsService = new google.maps.DirectionsService; 
     this.directionsDisplay = new google.maps.DirectionsRenderer; 
     this.directionsDisplay.setMap(map); 

     var originAutocomplete = new google.maps.places.Autocomplete(
      originInput, {placeIdOnly: true}); 
     var destinationAutocomplete = new google.maps.places.Autocomplete(
      destinationInput, {placeIdOnly: true}); 

     this.setupClickListener('changemode-walking', 'WALKING'); 
     this.setupClickListener('changemode-transit', 'TRANSIT'); 
     this.setupClickListener('changemode-driving', 'DRIVING'); 

     this.setupPlaceChangedListener(originAutocomplete, 'ORIG'); 
     this.setupPlaceChangedListener(destinationAutocomplete, 'DEST'); 

     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput); 
     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput); 
     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector); 
     } 


     // Sets a listener on a radio button to change the filter type on Places 
     // Autocomplete. 
     AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) { 
     var radioButton = document.getElementById(id); 
     var me = this; 
     radioButton.addEventListener('click', function() { 
      me.travelMode = mode; 
      me.route(); 
     }); 
     }; 

     AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) { 
     var me = this; 
     autocomplete.bindTo('bounds', this.map); 
     autocomplete.addListener('place_changed', function() { 
      var place = autocomplete.getPlace(); 
      if (!place.place_id) { 
      window.alert("Please select an option from the dropdown list."); 
      return; 
      } 
      if (mode === 'ORIG') { 
      me.originPlaceId = place.place_id; 
      } else { 
      me.destinationPlaceId = place.place_id; 
      } 
      me.route(); 
     }); 

     }; 

     AutocompleteDirectionsHandler.prototype.route = function() { 
     if (!this.originPlaceId || !this.destinationPlaceId) { 
      return; 
     } 
     var me = this; 

     this.directionsService.route({ 
      origin: {'placeId': this.originPlaceId}, 
      destination: {'placeId': this.destinationPlaceId}, 
      travelMode: this.travelMode 
     }, function(response, status) { 
      if (status === 'OK') { 
      me.directionsDisplay.setDirections(response); 
      } else { 
      window.alert('Directions request failed due to ' + status); 
      } 


      map.setStreetView(panorama); 

     }); 

     }; 
} 
}