Uncaught TypeError: $(...).googlePlaces is not a function

Question

<link rel="stylesheet" href="https://cdn.rawgit.com/stevenmonson/googleReviews/master/google-places.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/stevenmonson/googleReviews@6e8f0d794393ec657dab69eb1421f3a60add23ef/google-places.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=API_KEY&signed_in=true&libraries=places"></script>

<div id="google-reviews"> </div>

jQuery(document).ready(function() {
        $("#google-reviews").googlePlaces({
            placeId: '[Place ID]', 
            render: ['reviews'],
            min-rating: 4,
            max-rows: 5
        });
    });

console.log() keeps showing the type error, google places is not a function.

Keep changing the cdn version and source link to fix the error but console log still showing the same error.

Answer 1

Use scripts in this order:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/google-places.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=Function.prototype&libraries=places&key=YOUR_KEY"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/google-places.css">

test on authorized site in Google Cloud/Maps API