binden Sie google places autocomplete textbox auf, ohne Instanziierung einer google-Karte

Dies ist ein ziemlich Alter thread, aber google benötigt jetzt eine API für alle Ihre Karten-basierte Dienste und ich fühlte, dass das code-Beispiel vereinfacht werden könnte, ein wenig.

Innen head-element (update-code mit dem input-element das id-Attribut):

<script type="text/javascript">
  function initAutocomplete() {
    //Create the autocomplete object, restricting the search to geographical
    //location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('YOUR_INPUT_ELEMENT_ID')),
        {types: ['geocode']});

    //When the user selects an address from the dropdown, populate the address
    //fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    //Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

  }
    </script>

Innerhalb Ihrer Seite bestätigen, haben Sie eine text-Eingabe mit einem ID-Attribut, das stimmt mit dem oben genannten Skript:

<input type="text" id="YOUR_INPUT_ELEMENT_ID" />

Kurz vor dem schließen Ihres body-tag fügen Sie dieses Skript (update mit Ihrem eigenen API-key):

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

Sonstige Hinweise:

• Dies ist eine leicht modifizierte version der original-Hilfe/Beispiel
  Artikel gefunden hier
• Benötigen Sie eine aktive API-key für Google Places API, Web Service und zum aktivieren der Google Maps-Javascript-API von Google Entwickler-Konsole

Siehe diese Google Geo Dev blog post: http://googlegeodevelopers.blogspot.com/2012/05/faster-address-entry-with-google-places.html

Es links zu den jeweiligen Methoden, einschließlich Autocomplete.getPlace()

Er stellt außerdem fest, dass, "Sie sind frei, verwenden von AutoVervollständigen in jeder Anwendung, auch wenn Sie nicht die Anzeige einer Karte. Alles was wir verlangen ist, dass Sie die Anzeige des "powered by Google" - logo unter dem text-Feld, wenn Sie verwenden von AutoVervollständigen ohne Karte".

versuchen, diese auch

<script>
  google.maps.event.addDomListener(window, 'load', initialize);
    function initialize() {
      var input = document.getElementById('autocomplete_search');
      var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.addListener('place_changed', function () {
      var place = autocomplete.getPlace();
      //place variable will have all the information you are looking for.
      $('#lat').val(place.geometry['location'].lat());
      $('#long').val(place.geometry['location'].lng());
    });
  }
</script>

vollständiges Beispiel hier erhältlich

                <div class="col-sm-4">
                                    <span class="input input--hoshi">
                                        <input class="input__field input__field--hoshi" id="taddress" type="text"  placeholder="" onmouseover="notnull2(this)" onblur="validtaddr(this); validateaddr2(this);" >
                                        <label class="input__label input__label--hoshi input__label--hoshi-color-2" for="dateto">
                                            <span class="input__label-content input__label-content--hoshi">To</span>
                                        </label>
                                    </span>
                                    <div id="taddress-error" style="color:red"></div>
                                    <script>

                                        function validtaddr() {
                                            if (IsplaceChange == false)
                                            {


                                                if ($("#taddress").val != "") {

                                                    $("#taddress-error").html(" ");
                                                }

                                                $("#taddress").val(null)
                                               // $("#faddress-error").html("please Enter valid location");

                                            }

                                        };



                                    </script>
                                                                    <script>
                                        var autocomplete;
                                        function initialize1() {
                                          autocomplete = new google.maps.places.Autocomplete(
                                              (document.getElementById('taddress')),
                                              { types: ['geocode'] });
                                          google.maps.event.addListener(autocomplete, 'place_changed', function() {
                                          });
                                        }
                                                                    </script>
                                                                    <script>
                                                var IsplaceChange = false;
                                                $(document).ready(function () {
                                                    var input = document.getElementById('taddress');
                                                    var autocomplete = new google.maps.places.Autocomplete(input, { types: ['(cities)'] });

                                                    google.maps.event.addListener(autocomplete, 'place_changed', function () {
                                                        var place = autocomplete.getPlace();

                                                        IsplaceChange = true;
                                                    });

                                                    $("#taddress").keydown(function () {
                                                        IsplaceChange = false;
                                                    });


                                                });
                                    </script>
                                    <script>

                                        $("#taddress").keyup(function () {
                                            var a = $("#taddress").val();
                                        if (a.match(/^[ t`~!@@#$%^&*()_|+\-=?;:'"<>\{\}\[\]\\\/]+/gi)) {


                                            $("#taddress-error").html("White space & special char are not allow");
                                            $("#taddress").val(null);
                                            //document.form1.text1.focus();
                                            return false;
                                        }
                                        else {

                                            $("#taddress-error").html("");
                                            //document.form1.text1.focus();
                                            return true;
                                        }

                                    });
                                    </script>




                                    <script>

                                            function validateaddr2() {
                                                if ($("#taddress").val() == "")
                                                {
                                                    $("#taddress-error").html("Please enter valid location");
                                                    return false;
                                                }
                                                else {
                                                    $("#taddress-error").html("");
                                                }
                                            }
                                            function notnull2() {
                                                if ($("#taddress").val != "") {

                                                    $("#taddress-error").html(" ");
                                                }
                                                else {
                                                    $("#taddress-error").html(" Please enter valid location");
                                                }
                                            }
                                    </script>
                                </div>