Google places autocomplete dropdown
The Google Places API Web Service enforces a default limit of 1 000 requests per 24 hour period, which you can increase free of charge. If your app exceeds the limit, the app will start failing. Verify your identity to get up to 150 000 requests per 24 hour period
<!DOCTYPE html><html> <head> <title>Place Autocomplete</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function() { $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() { $(this).prev('input').val('').trigger('change').focus(); })); }); </script> <style> span.deleteicon { position: relative; } span.deleteicon span { position: absolute; display: block; top: 5px; right: 0px; width: 16px; height: 16px; background: url('https://1800getarug.com/img/close_delete.png') 0 -690px; cursor: pointer; opacity: 0.4; margin-right: 1%; } span.deleteicon input { padding-right: 16px; box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; width: 100%; } .controls { margin-top: 10px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
#pac-input { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 800px; }
#pac-input:focus { border-color: #4d90fe; }
.pac-container { font-family: Roboto; } #type-selector { color: #fff; background-color: #4d90fe; padding: 5px 11px 0px 11px; }
#type-selector label { font-family: Roboto; font-size: 13px; font-weight: 300; }
</style> <script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> </head> <body> <center> <input id="pac-input" class="controls deletable" type="text" placeholder="Enter a location" style="margin: 0px auto;" > </center>
<script> google.maps.event.addDomListener(window, 'load', initialize); function initialize() { var input = document.getElementById('pac-input'); var autocomplete = new google.maps.places.Autocomplete(input); autocomplete.addListener('place_changed', function () { var place = autocomplete.getPlace(); console.log(place); console.log(place.geometry['location'].lat()); console.log(place.geometry['location'].lng()); });
}
</script></body>
</html>
Comments
Post a Comment