CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-places
MeepMerp
MeepMerp

Reputation: 293

bind google places autocomplete on textbox without instantiating a google map

I'm trying to add Google Places Autocomplete on my Website. I'm having a problem with binding my search textbox with Autocomplete without the use of instantiating a google map. What I'm trying to do is, I want to use the autocomplete as a text suggestion on my search field. but sadly, all the tutorials I've seen had autcomplete being used along with a google map. Is there any way around this?

Thanks in advance.

Upvotes: 22

Views: 69661

Answers (9)

EvilDr
EvilDr

Reputation: 9610

Fours years since @PraveenHowpage posted an answer. The API has moved on but the self-contained example was appealing, so I've posted an updated version below for those still wrestling with Autocomplete.

enter image description here

Don't forget to swap your Google API key with the placeholder(!):

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps API Test</title>
    <style>
        input[type=text] {
            width: 20rem;
        }
        textarea {
            width: 20rem;
            height: 5rem;
        }
    </style>
</head>
<body>

    <p>
        <input type="text" id="txtPlaces" placeholder="Enter location" />
    </p>

    <p>
        <textarea id="txt_output" placeholder="Details will appear here"></textarea>
    </p>

    <script>

        async function initMap() {

            var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
            var txt_output = document.getElementById("txt_output");

            google.maps.event.addListener(places, 'place_changed', function () {

                var place = places.getPlace();
                var address = place.formatted_address;
                var latitude = place.geometry.location.lat();
                var longitude = place.geometry.location.lng();

                var result = "Address:\r\n";
                result += address + "\r\n";
                result += "Latitude: " + latitude + "\r\n";
                result += "Longitude: " + longitude + "\r\n";
                txt_output.innerHTML = result;

            });

        }

        // window.initMap = initMap;

    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=___YOUR_KEY_HERE___&libraries=places&callback=initMap"></script>
</body>
</html>

Upvotes: 1

Praveen Howpage
Praveen Howpage

Reputation: 19

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
</style>
</head>
<body>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=PLZ_ADD_YOUR_GOOGLE_API_KEY_HERE&sensor=false&libraries=places"></script>
<script type="text/javascript">
    google.maps.event.addDomListener(window, 'load', function () {
        var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
        google.maps.event.addListener(places, 'place_changed', function () {
            var place = places.getPlace();
            var address = place.formatted_address;
            var latitude = place.geometry.location.lat();
            var longitude = place.geometry.location.lng();
            var mesg = "Address: " + address;
            mesg += "\nLatitude: " + latitude;
            mesg += "\nLongitude: " + longitude;
            alert(mesg);
        });
    });
</script>
<span>Location:</span>
<input type="text" id="txtPlaces" style="width: 250px" placeholder="Enter a location" />
</body>
</html>

Upvotes: 1

Rahul S
Rahul S

Reputation: 21

You can use below code , just replace key with your gmaps key

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Places Search Box</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #description {
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
      }

      #infowindow-content .title {
        font-weight: bold;
      }

      #infowindow-content {
        display: none;
      }

      #map #infowindow-content {
        display: inline;
      }

      .pac-card {
        margin: 10px 10px 0 0;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: #fff;
        font-family: Roboto;
      }

      #pac-container {
        padding-bottom: 12px;
        margin-right: 12px;
      }

      .pac-controls {
        display: inline-block;
        padding: 5px 11px;
      }

      .pac-controls label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

      #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: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      #title {
        color: #fff;
        background-color: #4d90fe;
        font-size: 25px;
        font-weight: 500;
        padding: 6px 12px;
      }
      #target {
        width: 345px;
      }
    </style>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map" style="height: 200px;width: 200px"></div>
    <script>
      // This example adds a search box to a map, using the Google Place Autocomplete
      // feature. People can enter geographical searches. The search box will return a
      // pick list containing a mix of places and predicted search terms.

      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

      function initAutocomplete() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13,
          mapTypeId: 'roadmap'
        });

        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          // Clear out the old markers.
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];

          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
      }

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

Thanks,

Upvotes: -1

Aravind Srinivas
Aravind Srinivas

Reputation: 320

Just replace the Secretkey with your api key.

<head>
  <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  <script src="https://maps.googleapis.com/maps/api/js?key=Secretkey&libraries=places" async defer></script>
  <script>
    var autocomplete;
    function initialize() {
      autocomplete = new google.maps.places.Autocomplete(
        /** @type {HTMLInputElement} */
        (document.getElementById('autocomplete')),
        { types: ['geocode'] }
      );
      google.maps.event.addListener(autocomplete, 'place_changed', function() {});
    }
  </script>
</head>

<div id="locationField">
  <input id="autocomplete" name="location" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
</div>

For getting your api key https://developers.google.com/maps/documentation/javascript/get-api-key

Upvotes: 7

user2309181
user2309181

Reputation: 141

This is a pretty old thread but google now requires an API for all of their maps based services and I felt that the code example could be simplified a little.

Inside head element (update code with your input element id attribute):

<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>

Inside your page confirm you have a text input with an ID attribute that matches the above script:

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

Just before the close of your body tag add this script (update with your own API key):

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

Other notes:

  • This is a slightly modified version of the original help/example article found here
  • You need an active API key for Google Places API Web Service and to enable Google Maps Javascript API from Google Developer Console

Upvotes: 14

Mohit
Mohit

Reputation: 776

Guys you can use following code. 

 <!DOCTYPE html>
    <html>
      <head>
        <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
        <script>
            var autocomplete;
            function initialize() {
              autocomplete = new google.maps.places.Autocomplete(
                  /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
                  { types: ['geocode'] });
              google.maps.event.addListener(autocomplete, 'place_changed', function() {
              });
            }
        </script>
      </head>
      <body onload="initialize()">
        <div id="locationField">
          <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
        </div>
      </body>
    </html>

Edit: Google Maps now require an API key for this to work.

Upvotes: 31

anuja
anuja

Reputation: 1

                <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>

Upvotes: -6

Alpesh Trivedi
Alpesh Trivedi

Reputation: 979

function initialize()
    {
        var input = document.getElementById('location');
        var autocomplete = new google.maps.places.Autocomplete(
                /** @type {HTMLInputElement} */(input),
                {
                    types: ['(cities)'],
                });
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }
            //document.getElementById('fLat').value = place.geometry.location.lat();
            //document.getElementById('fLong').value = place.geometry.location.lng();

            var address = '';
            if (place.address_components)
            {
                address = [
                    (place.address_components[0] && place.address_components[0].short_name || ''),
                    (place.address_components[1] && place.address_components[1].short_name || ''),
                    (place.address_components[2] && place.address_components[2].short_name || '')
                ].join(' ');
            }
            LoadEventCategory();
            LoadYelpData();
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 0

Bryan
Bryan

Reputation: 1821

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

It has links to the relevant methods, including Autocomplete.getPlace()

It also notes that, "You are free to use Autocomplete in any application, even if you are not displaying a map. All we ask is that you display the ‘powered by Google’ logo under the text field when you use Autocomplete without a map".

Upvotes: 4

Related Questions