Function only working once

Question

I am working on a map based project and have been using this library to pull info from Google about locations on the map - https://github.com/peledies/google-places

I have created the bellow test to make sure that none of the map based code was causing issues and to show you what is wrong.

The idea is that you can click a button which will pass a Google Place ID to the getInfo() function which will use the library and pull info from Google and display it on the page.

The problem is that this only works once. If you click the other location button nothing appears to happen. The information isn't being updated with info from the new location.

I have even added a clear button which will remove anything in the google related divs on the page.

I have put a console.log in the function and can see that when a button is clicked the ID is being passed to it.

I don't know what could be causing this and Google Dev Console does not show any errors.

 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

By looking at the plugin's code, it seems that it can only be initialised once. Beside the plugin, it also adds a googlePlaces function directly to the jQuery object. You can use that function instead, here is an example:

 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>