DroopyTersen
2/16/2015 - 3:28 PM

PlacesAutoComplete.html

PlacesAutoComplete.html
content_copyfile_download
<!DOCTYPE html>
<!-- HTML5 Hello world by kirupa - http://www.kirupa.com/html5/getting_your_feet_wet_html5_pg1.htm -->
<html lang="en-us">

<head>
<meta charset="utf-8">
<title>Near Me</title>
<style type="text/css">
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&.js"></script>
</head>

<body>

<form>
    <label>Enter a place/location...</label><br/>
    <input id='search' type='text'/>
</form>
<ol class='predictions'></ol>


<script> 
function initialize() {
    var geocoder = new google.maps.Geocoder(),
        service  = new google.maps.places.AutocompleteService(null, { types: ['geocode'] }),
        
        outputPredictions = function(predictions) {
            $('.predictions').empty();
            for (var i = 0; i < predictions.length; i++) {
                $('.predictions').append('<li>' + predictions[i].description + "</li>");
            }
        },
        
        getPredictions = function(search) {
            var deferred = new $.Deferred();
            service.getPlacePredictions({ input: search }, function(predictions, status){
                if (status == 'OK'){
                    deferred.resolve(predictions);
                } else {
                    deferred.reject(status);
                }
            });
            return deferred.promise();
        };
        
    $("form").keyup(function(event) {
        event.preventDefault()
        var searchInput = $("#search").val();
        if (searchInput === "") {
            $(".predictions").empty();
        } else {
            getPredictions(searchInput).then(outputPredictions);
        }        
    });
};

google.maps.event.addDomListener(window, 'load', initialize);
</script>

</body>
</html>