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>




Place Autocomplete

Comments

Post a Comment

Popular posts from this blog

Displaying a flash message after redirect in Codeigniter

-
To set flashdata you need to redirect controller function $this->session->set_flashdata('message_name', 'This is test message'); //redirect to some function redirect("controller/function_name"); //echo in view or controller $this->session->flashdata('message_name'); E.X in model file if($query){ $this->session->set_flashdata('xyzsuccess', 'Added Sucessfully '); redirect('/xyz, 'refresh'); }else{ $this->session->set_flashdata('xyzerror', 'Added error'); redirect('/xyz', 'refresh'); } in view file:  if($this->session->flashdata('xyzsuccess')){echo "<div class='alert alert-success'><strong>Success!</strong> ".$this->session->flashdata('xyzsuccess')."</div>";}elseif($this->session->flashdata('xyzerror')){echo "<div class='alert alert-dan
Read more

What is required for it startup company ?

-
 Starting an IT startup company requires several key components to be successful. Here are some of the key things that you will need: A Unique Idea: A successful IT startup company begins with a unique idea that solves a problem or provides a service that is not currently being addressed in the market. Your idea should be innovative and have the potential to disrupt the industry. Skilled Team Members: Your team members are the backbone of your startup. You will need skilled and dedicated individuals with a wide range of talents to help you bring your idea to fruition. Look for team members with experience and expertise in areas such as software development, marketing, finance, and customer service. Adequate Funding: You will need adequate funding to get your IT startup off the ground. This can come from a variety of sources, including venture capital firms, angel investors, crowdfunding, or personal savings. It is important to have a well-structured business plan and financial projecti
Read more

how to export html data to pdf in angularjs and javascript

-
HTML : <button onclick="pdfdownload()" class="btn btn-success"><i class="fa fa-download" ></i> Download PDf</button> <div class="table-responsive" id="exportthis"> this is demo text </div> Javascript: <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script type="text/javascript"> function pdfdownload () { html2canvas(document.getElementById('exportthis'), {             onrendered: function (canvas) {                 var data = canvas.toDataURL();                 var docDefinition = {                     content: [{                         image: data,                         width: 500,                     }]                 };                 pdfMake.createPdf
Read more