Google maps - маршруты до фиксированного местоположения - PullRequest
Новая
       40

Google maps - маршруты до фиксированного местоположения

0 голосов
/ 02 ноября 2018

Я хочу, чтобы указания на фиксированное местоположение на картах Google на моем сайте. Итак, идея такова - пользователь вводит местоположение и после отправки получает маршрут к фиксированному местоположению. Я думаю, что сделал это, но когда добавляю его на мой сайт на моем, я не знаю, как он автоматически устанавливает положение: относительный; видимость: скрытая И карта не работает. 

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeControl: false,
    center: {
      lat: 25.116810,
      lng: 55.123562
    },
    zoom: 13
  });
  var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(25.116810, 55.123562)
  });
  new AutocompleteDirectionsHandler(map);
}

/**
 * @constructor
 */
function AutocompleteDirectionsHandler(map) {
  this.map = map;
  this.originPlaceId = null;
  this.travelMode = 'DRIVING';
  var originInput = document.getElementById('origin-input');
  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
    });

  this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
}

// 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;
    }
    me.originPlaceId = place.place_id;
    me.route();
  });
};

AutocompleteDirectionsHandler.prototype.route = function() {
  if (!this.originPlaceId) {
    return;
  }
  var me = this;
  this.directionsService.route({
    origin: {
      'placeId': this.originPlaceId
    },
    destination: new google.maps.LatLng(25.116810, 55.123562),
    travelMode: this.travelMode
  }, function(response, status) {
    if (status === 'OK') {
      me.directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
};
#map {
  height: 20%;
}
		<section class="directions">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row latest_news_left">
							<div id="map"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="right_event">
							<input id="origin-input" class="controls" type="text" placeholder="Enter an origin location">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0WhSlVmfhTTbbmftNxD0m5tWzNgMtuBo&libraries=places&callback=initMap" async defer></script>

Также у меня есть некоторые ошибки в консоли -> enter image description here

...