Skip to main content

Research Project: AutoComplete Business Places Search Form

RESEARCH PROJECT 

AUTOCOMPLETE BUSINESS PLACES SUGGESTING DROP DOWN LIST



Date: 09/08/2019









The research is on how to use google powered auto suggest input form to search businesses and show its address too.

And a thread has been found on auto completing drop down list on google maps platform.



A look alike project on autocomplete for addresses and search terms is there in google Maps Platform for developers.



The Steps taken.

  1. First of all you need the example code in your PC.
  2. Create a test Project in google Console.
    1. Autofill-inputbox
  3. Then the relevant API enabled in That project console.
    1. In this case the "Places API"


  1. An API key for a particular project.

Tried running with the acquired API in the code and putting the file on tomcat server as a jsp file. Still the billing_error comes.



The problem was maps API was not enabled. So that the page didn't load.

But when it's enabled the website worked for a several seconds. Returning the hotels near by.

They went off giving the 403 error.

Error 403 (fbidden):The server understood the request, but is refusing to fulfill it. Authorization will not help and the request SHOULD NOT be repeated. If the request method was not HEAD and the server wishes to make public why the request has not been fulfilled, it SHOULD describe the reason for the refusal in the entity. If the server does not wish to make this information available to the client, the status code 404 (Not Found) can be used instead.
The reason for this is google cloud platform offers you limited amount of requests to test your application in the PC. Not more than 10 requests.

Since this method is impossible to work with  , next we moved on to using jsfiddle. An online javascript editor.

Jsfiddle demo Site Testing


 The page will use the library provided by the Google cloud platform. by the following line of code.


This following piece of code bounds the search results to hotels by restricting the types to 'lodging'
 function search() {
        var search = {
          bounds: map.getBounds(),
          types: ['lodging']
        };
Then the research continued to find out the types of autocomplete criteria we can use to search businesses.


There is a huge list of search bounding types. And these were sub categorized into 3 tables.
Table 1 : Place Types
Table 2 : Additional types returned by the places service.
Table 3 : Types supported in place autocomplete requests.

For business purposes establishment is used as it is mention in the documentation.

establishment instructs the Place Autocomplete service to return only business results.
Changes I made in the example code to run using jsfiddle.
  • added Sri Lanka option to the drop down list on the right
    •  
  • var countries = {'sl': {    center: {lat: 7.1, lng: 81.5},  zoom: 6 } }
  • function initMap() was changed to initiate the zooming up above Sri Lanka.


          Normal place search request 
https://maps.googleapis.com/maps/api/place/findplacefromtext/output?parameters
https://maps.googleapis.com/maps/api/place/findplacefromtext/output?parameters
{
  "html_attributions" : [],
  "results" : [
    {
      "geometry" : {
        "location" : {
          "lat" : -33.870775,
          "lng" : 151.199025
        }
      },
      ...
      "place_id" : "ChIJrTLr-GyuEmsRBfy61i59si0",
      ...
    }
  ],
  "status" : "OK"
}
{
  "html_attributions" : [],
  "results" : [
    {
      "geometry" : {
        "location" : {
          "lat" : -33.870775,
          "lng" : 151.199025
        }
      },
      ...
      "place_id" : "ChIJrTLr-GyuEmsRBfy61i59si0",
      ...
    }
  ],
  "status" : "OK"
}
{
  "html_attributions" : [],
  "results" : [
    {
      "geometry" : {
        "location" : {
          "lat" : -33.870775,
          "lng" : 151.199025
        }
      },
      ...
      "place_id" : "ChIJrTLr-GyuEmsRBfy61i59si0",
      ...
    }
  ],
  "status" : "OK"
}
{
  "html_attributions" : [],
  "results" : [
    {
      "geometry" : {
        "location" : {
          "lat" : -33.870775,
          "lng" : 151.199025
        }
      },
      ...
      "place_id" : "ChIJrTLr-GyuEmsRBfy61i59si0",
      ...
    }
  ],
  "status" : "OK"
}
{
  "html_attributions" : [],
  "results" : [
    {
      "geometry" : {
        "location" : {
          "lat" : -33.870775,
          "lng" : 151.199025
        }
      },
      ...
      "place_id" : "ChIJrTLr-GyuEmsRBfy61i59si0",
      ...
    }
  ],
  "status" : "OK"
}
  • Output- This can be either JSON (JavaScript Object Notation)  or XML   
  • The parameters to be sent
    • key - API key of your application
    • input -the text input ex:- name , address, phonenumber (you need one of these to search for a place)
    • inputtype - can be one of the following
      • text_query
      • phone_number (international standards) 
  • You can set other additional parameters too.
    • IP bais
    • fields
    • locationbais
  • The Data that can be extracted from google places API are in 3 categories.
    • Basic Data
      • address_component, adr_address, formatted_address, geometry, icon, name, permanently_closed, photos, place_id, plus_code, type, url, utc_offset, vicinity
    • Contact Data 
      • formatted_phone_number, international_phone_number, opening_hours, website
    • Atmosphere Data
      • price_level, rating, review, user_ratings_total
In this Demo site the java script is taking a hard coded place_id and  recruiting the place details such as 
  • name 
  • formatted_address
  • geometry,
  • formatted_phone_number,
  • opening_hours
    • open - boolean value to show whether it is open or not .
    • period[] - 0 to 6 values array to select between 7 Days.
      • Open
        • Day
        • Time
      • Close
    • weekday_text - array of seven strings representing the formatted opening hours
  • website


The Place Id is an important parameter in receiving google map details of any place. Most of the places have its place_id but this value can change from time to time. In that case if someone wishes to use the place id as his search query object it's better to have it recruited from google place API since getting a place_id is free at all times.

when an request is sent to retrieve data about some place here is a json data array that is received at the end of the request session.


{
  "html_attributions" : [],
  "results" : [
    {
      "geometry" : {
        "location" : {
          "lat" : -33.870775,
          "lng" : 151.199025
        }
      },
      ...
      "place_id" : "ChIJrTLr-GyuEmsRBfy61i59si0",
      ...
    }
  ],
  "status" : "OK"
}
{
    "html_attributions" : [],    "results" : [
    {
        "geometry" : {
            "location" : {
                "lat" : -33.870775,                "lng" : 151.199025            }
        },        ...
    "place_id" : "ChIJrTLr-GyuEmsRBfy61i59si0",...
}
],    "status" : "OK"}













{
  "html_attributions" : [],
  "results" : [
    {
      "geometry" : {
        "location" : {
          "lat" : -33.870775,
          "lng" : 151.199025
        }
      },
      ...
      "place_id" : "ChIJrTLr-GyuEmsRBfy61i59si0",
      ...
    }
  ],
  "status" : "OK"
}















{
  "html_attributions" : [],
  "results" : [
    {
      "geometry" : {
        "location" : {
          "lat" : -33.870775,
          "lng" : 151.199025
        }
      },
      ...
      "place_id" : "ChIJrTLr-GyuEmsRBfy61i59si0",
      ...
    }
  ],
  "status" : "OK"
}

{
  "html_attributions" : [],
  "results" : [
    {
      "geometry" : {
        "location" : {
          "lat" : -33.870775,
          "lng" : 151.199025
        }
      },
      ...
      "place_id" : "ChIJrTLr-GyuEmsRBfy61i59si0",
      ...
    }
  ],
  "status" : "OK"
}







{
  "html_attributions" : [],
  "results" : [
    {
      "geometry" : {
        "location" : {
          "lat" : -33.870775,
          "lng" : 151.199025
        }
      },
      ...
      "place_id" : "ChIJrTLr-GyuEmsRBfy61i59si0",
      ...
    }
  ],
  "status" : "OK"
}








The testing examples with google cloud platform was done as such. Next task was to implement the simple page which has




  • Search box with autocomplete
    • 

  • autocomplete suggests only businesses
    • 

  • Receives and displays the acquired data of a single business.
    • 






function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -33.866,            lng: 151.196        },        zoom: 10    });
    var input = document.getElementById('pac-input');    /* The next variable is used to restrict the autoComplete method to 
establishments criteria. */    
var options = {
        types: ['establishment']
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);    autocomplete.bindTo('bounds', map);
    autocomplete.setFields(['place_id', 'geometry', 'name', 'formatted_address', 
'formatted_phone_number', 'opening_hours', 'website']);
    /*     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); */
    var infowindow = new google.maps.InfoWindow();    var infowindowContent = document.getElementById('infowindow-content');
    infowindow.setContent(infowindowContent);
    var marker = new google.maps.Marker({
        map: map
    });
    marker.addListener('click', clickfunc);
    function clickfunc() {
        infowindow.open(map, marker);    }

    autocomplete.addListener('place_changed', placechange);
    function placechange() {
        infowindow.close();
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            return;        }

        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);        } else {
            map.setCenter(place.geometry.location);            map.setZoom(17);        }

        // Set the position of the marker using the place ID and location.        marker.setPlace({
            placeId: place.place_id,            location: place.geometry.location        });
        marker.setVisible(true);
        infowindowContent.children['place-name'].textContent = place.name;        infowindowContent.children['place-id'].textContent = place.place_id;        infowindowContent.children['place-address'].textContent = place.formatted_address;        infowindow.open(map, marker);
        var info = document.getElementById("info-table");        document.getElementById('place_name').textContent = place.name;        document.getElementById('place_id').textContent = place.place_id;        document.getElementById('place_address').textContent = place.formatted_address;        document.getElementById('phone_no').textContent = place.formatted_phone_number;        document.getElementById('open_time').textContent = 
place.opening_hours.weekday_text[0];        document.getElementById('open_now').textContent = place.opening_hours.open_now;    }
}






For further protection the API key has been restricted to chosen websites. This procedure is done as follows.
  • going to credentials tab in the API.
    • 

  • Selecting Application restrictions as HTTP referrers  (web sites)
    • 

  • Add the file location of your page as shown below.
    • 

    •  __file_url__//home/adrin/adrian_projects/src/search.html
      • 









The JavaScript code for populating the values has been replaced by jquery coding.





































































Labels:




































Comments











Post a Comment



















Popular posts from this blog





















Hackerank Q&A




























 HACKERANK SQL PROBLEMS.    Question:    Generate the following two result sets:   Query an  alphabetically ordered  list of all names in  OCCUPATIONS , immediately followed by the first letter of each profession as a parenthetical (i.e.: enclosed in parentheses). For example:  AnActorName(A) ,  ADoctorName(D) ,  AProfessorName(P) , and  ASingerName(S) .   Query the number of ocurrences of each occupation in  OCCUPATIONS . Sort the occurrences in  ascending order , and output them in the following format:  There are a total of [occupation_count] [occupation]s.   where  [occupation_count]  is the number of occurrences of an occupation in  OCCUPATIONS  and  [occupation]  is the  lowercase  occupation name. If more than one  Occupation  has the same  [occupation_count] , they should be ordered alphabetically     Answer:      select ( case     when occupation= "Doctor" then concat( name ...




















Post a Comment









Read more






























Check Form Validity




























 Applova Home page Form Validation.     This weeks task was to validate the data that is entered to the Autocomplete business Search Form I created previously. And the second form needed the same modifications.     The user was to be restricted from submitting the following:      Spaces   Words less than 2 characters  Invalid emails  The submit button has to be disabled if the three fields were not filled.           Using minimal changes in the code this had to be done. And new libraries cannot be used. In that case jquery validation plugin was not an option. But it was the easiest one we had in mind.   A small coding for form validation and the plugin script was to be added to solve this matter.     But without using that plugin the form was validated and compromised of the invalid inputs as shown below.    function getDemoHomeSectionClick () {      var user_input = document. forms [ 'form' ][ 'SingleLine1' ]. value ;     if ((user_input. trim ()). length < 2 ) {   ...




















Post a Comment









Read more