Функция работает только один раз

Question

Я работаю над проектом на основе карты и использую эту библиотеку для получения информации от Google о местах на карте - https://github.com/peledies/google-places

Я создал нижеприведенный тест, чтобы убедиться, что ни один изКод на основе карты вызывал проблемы и показывал вам, что не так.

Идея состоит в том, что вы можете нажать кнопку, которая передаст идентификатор Google Place в функцию getInfo (), которая будет использовать библиотеку и получать информациюот Google и отобразите его на странице.

Проблема в том, что это работает только один раз.Если вы нажмете кнопку другого местоположения, то ничего не произойдет.Информация не обновляется информацией из нового местоположения.

Я даже добавил кнопку очистки, которая удалит все элементы, относящиеся к div, связанные с Google на странице.

Я поставилconsole.log в функции и может видеть, что при нажатии кнопки ID передается ей.

Я не знаю, что может быть причиной, и Google Dev Console не показывает никаких ошибок.

function getInfo(p) {
  console.log(p);
  $("#google-reviews").googlePlaces({
    placeId: p,
    render: ['reviews', 'address', 'phone', 'hours'],
    min_rating: 1,
    max_rows: 3,
    //rotateTime:5000,
    schema: {
      displayElement: '#schema', // optional, will use "#schema" by default
      beforeText: 'Googlers rated',
      middleText: 'based on',
      afterText: 'awesome reviewers.',
      type: 'Hostel',
    },
    address: {
      displayElement: "#google-address" // optional, will use "#google-address" by default
    },
    phone: {
      displayElement: "#google-phone" // optional, will use "#google-phone" by default
    },
    hours: {
      displayElement: "#google-hours" // optional, will use "#google-hours" by default
    }
  });
}


function clearInfo() {
  document.getElementById('schema').innerHTML = "";
  document.getElementById('google-reviews').innerHTML = "";
  document.getElementById('google-address').innerHTML = "";
  document.getElementById('google-phone').innerHTML = "";
  document.getElementById('google-hours').innerHTML = "";
}

.review-stars ul {
  display: inline-block;
  list-style: none;
}

.review-stars ul li {
  float: left;
  margin-right: 5px;
}

.review-stars ul li i {
  color: #E4B248;
  font-size: 12px;
}


/*color: #E4B248;*/

.review-stars ul li i.inactive {
  color: #c6c6c6;
}

.star:after {
  content: "\2605";
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

<button onclick="getInfo('ChIJ7aUBOtBqdkgRMzcGmyqWyxM')">Location 1 (Watford)</button>
<button onclick="getInfo('ChIJ3xiQIe6g2EcRdkyT0iS5GNU')">Location 2 (Buckhurst Hill)</button>
<button onclick="clearInfo()">Clear</button>
<br>
<div id="schema">
  <b>Schema - </b>
</div>
<div id="google-reviews"></div>
<div id="google-address"></div>
<div id="google-phone"></div>
<div id="google-hours"></div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" crossorigin="anonymous"></script>
<script src="https://rawgit.com/peledies/google-places/master/google-places.js"></script>

Answer 1

Глядя на код плагина, кажется, что его можно инициализировать только один раз.Помимо плагина, он также добавляет функцию googlePlaces непосредственно к объекту jQuery.Вместо этого вы можете использовать эту функцию, вот пример:

function getInfo(p) {
  clearInfo();
  $.googlePlaces($("#google-reviews"), {
    placeId: p,
    render: ['reviews', 'address', 'phone', 'hours'],
    min_rating: 1,
    max_rows: 3,
    //rotateTime:5000,
    schema: {
      displayElement: '#schema', // optional, will use "#schema" by default
      beforeText: 'Googlers rated',
      middleText: 'based on',
      afterText: 'awesome reviewers.',
      type: 'Hostel',
    },
    address: {
      displayElement: "#google-address" // optional, will use "#google-address" by default
    },
    phone: {
      displayElement: "#google-phone" // optional, will use "#google-phone" by default
    },
    hours: {
      displayElement: "#google-hours" // optional, will use "#google-hours" by default
    }
  });
}


function clearInfo() {
  document.getElementById('schema').innerHTML = "";
  document.getElementById('google-reviews').innerHTML = "";
  document.getElementById('google-address').innerHTML = "";
  document.getElementById('google-phone').innerHTML = "";
  document.getElementById('google-hours').innerHTML = "";
}

.review-stars ul {
  display: inline-block;
  list-style: none;
}

.review-stars ul li {
  float: left;
  margin-right: 5px;
}

.review-stars ul li i {
  color: #E4B248;
  font-size: 12px;
}


/*color: #E4B248;*/

.review-stars ul li i.inactive {
  color: #c6c6c6;
}

.star:after {
  content: "\2605";
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

<button onclick="getInfo('ChIJ7aUBOtBqdkgRMzcGmyqWyxM')">Location 1 (Watford)</button>
<button onclick="getInfo('ChIJ3xiQIe6g2EcRdkyT0iS5GNU')">Location 2 (Buckhurst Hill)</button>
<br>
<div id="schema">
  <b>Schema - </b>
</div>
<div id="google-reviews"></div>
<div id="google-address"></div>
<div id="google-phone"></div>
<div id="google-hours"></div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" crossorigin="anonymous"></script>
<script src="https://rawgit.com/peledies/google-places/master/google-places.js"></script>