jquery ui + google maps places api autocomplete

by chad

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&amp;v=3.exp&amp;.js"></script>
<p>Autocomplete</p>
<input type="text" class="location-input">
<div id="#result"></div>

JavaScript

var autoCompleteService = new google.maps.places.AutocompleteService();
var googleAPIKey = 'AIzaSyBwiHaQMmsTQ74bpoJcaQjtZ2GUAz4nWtk';

var getLocation = function(locationID){
    $.getJSON('https://maps.googleapis.com/maps/api/place/details/json?key='+googleAPIKey+'&sensor=false&reference='+locationID, function(data){
        console.log(data);
    });
}

$(document).ready(function(){
    $('.location-input').autocomplete({
    source: function (request, response) {
        autoCompleteService.getQueryPredictions({ input: request.term }, function (predictions, status) {
            if (status != google.maps.places.PlacesServiceStatus.OK) {
                alert(status);
                return;
            }
            response($.map(predictions, function (prediction, i) {
                return {
                    label: prediction.description,
                    value: prediction.description,
                    original: prediction
                }
            }));
        });
    },
    select: function (event, ui) {
        var value = ui.item.value;
        console.log(ui.item.original.reference);
        getLocation(ui.item.original.reference);
        // searchMap(value);
    }
});
    
    
 });