{"id":799,"date":"2023-02-17T13:39:42","date_gmt":"2023-02-17T05:39:42","guid":{"rendered":"https:\/\/five.co\/?p=799"},"modified":"2026-04-02T09:55:25","modified_gmt":"2026-04-02T01:55:25","slug":"building-an-application-that-interacts-with-the-google-maps-api","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/blog\/building-an-application-that-interacts-with-the-google-maps-api\/","title":{"rendered":"Building an Application That Interacts with the Google Maps API"},"content":{"rendered":"\n

Five Lab: Building an Application That Interacts with the Google Maps API<\/h2>\n\n\n\n

Welcome to Five Labs, a step-by-step guide to building applications using Five.<\/p>\n\n\n\n

This lab guides you through creating a custom online database application that interacts with the Google Maps API. Sign up<\/a>\u00a0now\u00a0and start building an application on\u00a0our low-code development environment.<\/p>\n\n\n\n

Lab Objectives & Outcomes<\/h3>\n\n\n\n

By the end of this lab, you will have developed a custom online database application that<\/p>\n\n\n\n

    \n
  1. Stores data that is retrieved from the Google Maps & Google Places API in its own MySQL database,<\/li>\n\n\n\n
  2. Gives end-users the ability to create, read, update, and delete the data stored inside your database, using a web GUI, and<\/li>\n\n\n\n
  3. Gives end-users the ability to add additional data to their dataset.<\/li>\n<\/ol>\n\n\n\n

    The entire application is built inside of Five and contains:<\/p>\n\n\n\n

      \n
    1. Two tables in our custom-built MySQL database,<\/li>\n\n\n\n
    2. One SQL query, and<\/li>\n\n\n\n
    3. Three JavaScript functions.<\/li>\n<\/ol>\n\n\n\n

      In total, we wrote 108 lines of custom code in SQL and JavaScript to build the entire application. Everything else that is required to build & deploy the applications comes from inside Five.<\/p>\n\n\n

      \n
      \"Five.Co<\/figure>\n<\/div>\n\n\n

      <\/p>\n\n\n\n

      Keen to learn how? Keep on reading!<\/p>\n\n\n\n

      Application Requirements<\/h3>\n\n\n\n

      First up, let’s define our application requirements.<\/p>\n\n\n\n

      Let’s say we are software engineers with a palate for the finer things in life: when we’re not programming, we enjoy good food and wine.<\/p>\n\n\n\n

      We would now like to build our custom application that fetches all restaurants in a certain postcode and lets us add our custom reviews to each restaurant that we have visited.<\/p>\n\n\n\n

      The application is supposed to let us:<\/p>\n\n\n\n

        \n
      1. Search restaurants by postcode.<\/strong> We’d like to enter a postcode in a form field, and upon clicking a search button, the application is supposed to present us with a list of restaurants operating in the area. This data is supposed to be retrieved using the Google Maps API.<\/li>\n\n\n\n
      2. Select relevant restaurants from the search results.<\/strong> We would like to select those restaurants that sound interesting to us and store them permanently inside our MySQL database.<\/li>\n\n\n\n
      3. View all stored restaurants<\/strong>, as well as additional information about them, such as their opening hours retrieved from the Google Places API.<\/li>\n\n\n\n
      4. Add additional information about each restaurant<\/strong>, such as an ability to track if the restaurant has been visited before, and our verdict on their food.<\/li>\n<\/ol>\n\n\n\n

        As a non-functional requirement, we would like the application to be a web application that runs in any browser and is responsive to screen size.<\/p>\n\n\n\n

        Steps To Develop The Application<\/h3>\n\n\n\n

        Here are the steps required to build the application:<\/p>\n\n\n\n

          \n
        1. Create a new application<\/strong> inside Five,<\/li>\n\n\n\n
        2. Define your MySQL database tables and fields<\/strong> inside Five,<\/li>\n\n\n\n
        3. Add three JavaScript functions and a process<\/strong> to the application:\n
            \n
          1. The first JavaScript function GetRestaurants<\/code> gets restaurants by postcode from the Google Maps API,<\/li>\n\n\n\n
          2. The second JavaScript function SaveRestaurants<\/code> lets us fetch additional data about each restaurant, such as the opening hours from the Google Places API, and insert their data into our database,<\/li>\n\n\n\n
          3. The third JavaScript function SaveRestaurantButton<\/code> is a client-side function to the call server-side function described in 2.<\/li>\n\n\n\n
          4. We also need one process to associate the GetRestaurants<\/code> function with a DoRun event in our end-user application.<\/li>\n<\/ol>\n<\/li>\n\n\n\n
          5. Write a SQL query SelectRestaurants<\/code> to display all saved restaurants in a report.<\/li>\n\n\n\n
          6. Create a form and a dashboard for your end-users to view and edit saved restaurants.<\/li>\n\n\n\n
          7. Last, we will launch the application to see what it looks like.<\/li>\n<\/ol>\n\n\n\n

            Let’s go through each step with code samples one by one.<\/p>\n\n\n\n

            \n\n\n\n

            Step 1: Creating a New Application Inside Five<\/h4>\n\n\n\n

            Launch Five, and click the yellow + button to create a new application<\/a>. Give it any name and click save. Don’t worry about any of the other application settings. Next click on Manage to start developing your application.<\/p>\n\n\n

            \n
            \"Five.Co<\/figure>\n<\/div>\n\n\n
            \n\n\n\n

            Step 2: Define Your MySQL Database Tables and Fields<\/h4>\n\n\n\n

            The next step in building an application is to define our MySQL database tables and fields. Our application has a total of two tables:<\/p>\n\n\n\n

              \n
            1. The first table is named Restaurants<\/code> and temporarily stores all restaurants that we retrieve from the Google Maps API.<\/li>\n\n\n\n
            2. The second table is named SavedRestaurants<\/code>, and permanently stores all restaurants that we wish to add to our database.<\/li>\n<\/ol>\n\n\n\n

              Five comes with a handy table wizard that makes creating database tables a breeze. Simply follow our Table Wizard documentation<\/a> to create the tables required for this application.<\/p>\n\n\n\n

              Here is how each table should look once you have created them from inside Five.<\/p>\n\n\n

              \n
              \"Five.Co<\/figure>\n<\/div>\n\n\n
              \n\n\n\n

              Step 3: Writing JavaScript Functions Inside of Five<\/h4>\n\n\n\n

              Now, let’s work on the most important part of the application: the functions that help us retrieve the data from the Google Maps API. Click on Functions, and then on the Plus button to add a new function. We have added comments to each function below to explain their workings. You can delete those comments if you do not require them.<\/p>\n\n\n

              \n
              \"Five.Co<\/figure>\n<\/div>\n\n\n

              <\/p>\n\n\n\n

              The GetRestaurant Function<\/h5>\n\n\n\n

              When you interact with an API, you typically make GET<\/code> requests to retrieve data from web servers. So let’s start with the GetRestaurant<\/code> JavaScript function. Remember this function is designed to retrieve information from the Google Maps API, so you will also need to have an API key to make this function work properly.<\/p>\n\n\n\n

              <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
              function<\/span> <\/span>GetRestaurants<\/span>(<\/span>five<\/span>,<\/span> <\/span>context<\/span>,<\/span> <\/span>result<\/span>)<\/span>  <\/span>{<\/span><\/span>\n    <\/span>const<\/span> <\/span>API_KEY<\/span> <\/span>=<\/span> <\/span>'<\/span>Insert Your API Key Here<\/span>'<\/span>;<\/span><\/span>\n    <\/span>\/\/ Getting the PostCode by the user else keep the default Values as 4000<\/span><\/span>\n    <\/span>const<\/span> <\/span>POST_CODE<\/span> <\/span>=<\/span> <\/span>context<\/span>.<\/span>PostCode<\/span> <\/span>?<\/span> <\/span>context<\/span>.<\/span>PostCode<\/span> <\/span>:<\/span> <\/span>'<\/span>4000<\/span>'<\/span><\/span>\n    <\/span>\/\/URL for our API \u2b07\ufe0f<\/span><\/span>\n    <\/span>const<\/span> <\/span>url<\/span> <\/span>=<\/span> <\/span>`<\/span>https:\/\/maps.googleapis.com\/maps\/api\/place\/textsearch\/json?query=restaurants%20in%20<\/span>${<\/span>POST_CODE<\/span>}<\/span>%20QLD&key=<\/span>${<\/span>API_KEY<\/span>}<\/span>`<\/span>;<\/span><\/span>\n    <\/span>\/\/ Setting Up Our httpClient and sending a get request to places API<\/span><\/span>\n    <\/span>const<\/span> <\/span>client<\/span> <\/span>=<\/span> <\/span>five<\/span>.<\/span>httpClient<\/span>()<\/span>;<\/span><\/span>\n    <\/span>let<\/span> <\/span>httpResult<\/span> <\/span>=<\/span> <\/span>client<\/span>.<\/span>get<\/span>(<\/span>url<\/span>)<\/span>;<\/span><\/span>\n    <\/span>if<\/span> (<\/span>httpResult<\/span>.<\/span>isOk<\/span>() <\/span>===<\/span> <\/span>false<\/span>) <\/span>{<\/span><\/span>\n      <\/span>return<\/span> <\/span>five<\/span>.<\/span>createError<\/span>(<\/span>httpResult<\/span>)<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n    <\/span>let<\/span> <\/span>sql<\/span>;<\/span> <\/span>\/\/ SQL query<\/span><\/span>\n    <\/span>let<\/span> <\/span>queryResults<\/span>;<\/span> <\/span>\/\/ result for the query<\/span><\/span>\n    <\/span>let<\/span> <\/span>place_id<\/span>;<\/span> <\/span>\/\/ place id for each restaurant<\/span><\/span>\n    <\/span>let<\/span> <\/span>guid<\/span>;<\/span> <\/span>\/\/ GUID for the primary key for our table<\/span><\/span>\n    <\/span>\/\/ Delete Data from the table as we repopulate with every call<\/span><\/span>\n    <\/span>sql<\/span> <\/span>=<\/span> <\/span>'<\/span>DELETE FROM Restaurants<\/span>'<\/span><\/span>\n    <\/span>queryResults<\/span> <\/span>=<\/span> <\/span>five<\/span>.<\/span>executeQuery<\/span>(<\/span>sql<\/span>,<\/span> <\/span>0<\/span>)<\/span>;<\/span><\/span>\n    <\/span>\/\/ mapping through each restaurant from the API<\/span><\/span>\n    <\/span>httpResult<\/span>.<\/span>response<\/span>.<\/span>results<\/span>.<\/span>map<\/span>(<\/span>item<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n      <\/span>\/\/ getting the id and generating GUID<\/span><\/span>\n      <\/span>place_id<\/span> <\/span>=<\/span> <\/span>item<\/span>.<\/span>place_id<\/span>;<\/span><\/span>\n      <\/span>guid<\/span> <\/span>=<\/span> <\/span>five<\/span>.<\/span>uuid<\/span>()<\/span>;<\/span><\/span>\n      <\/span>\/\/ inserting values into the table<\/span><\/span>\n      <\/span>sql<\/span> <\/span>=<\/span> <\/span>`<\/span>INSERT INTO Restaurants (RestaurantsKey,PlaceID,name, address,status) VALUES (?,?,?,?, 'Not Saved')<\/span>`<\/span><\/span>\n      <\/span>queryResults<\/span> <\/span>=<\/span> <\/span>five<\/span>.<\/span>executeQuery<\/span>(<\/span>sql<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>guid<\/span>,<\/span> <\/span>place_id<\/span>,<\/span>item<\/span>.<\/span>name<\/span>,<\/span>item<\/span>.<\/span>formatted_address<\/span>)<\/span>;<\/span><\/span>\n      <\/span>if<\/span>(<\/span>!<\/span>queryResults<\/span>.<\/span>isOk<\/span>())<\/span>{<\/span><\/span>\n        <\/span>return<\/span> <\/span>five<\/span>.<\/span>createError<\/span>(<\/span>queryResults<\/span>)<\/span>;<\/span><\/span>\n      <\/span>}<\/span><\/span>\n    <\/span>}<\/span>)<\/span><\/span>\n    <\/span>return<\/span> <\/span>five<\/span>.<\/span>success<\/span>(<\/span>result<\/span>)<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
              <\/p>\n\n\n\n
              When reading through the function above, you might be wondering why our INSERT INTO<\/code> statement contains four question marks ?,?,?,?<\/code> for its values. Inside Five, question marks are used as placeholders for the values from the variable in a INSERT INTO<\/code> statement. <\/p>\n\n\n\n
              The SaveRestaurants Function<\/h5>\n\n\n\n
              Next up, is the SaveRestaurants<\/code> JavaScript function. Remember this function is designed to fetch additional data about each restaurant, such as the opening hours from the Google Places API, and inserts their data into our database.<\/p>\n\n\n\n
              <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
              function<\/span> <\/span>SaveRestaurants<\/span>(<\/span>five<\/span>,<\/span> <\/span>context<\/span>,<\/span> <\/span>result<\/span>)<\/span>  <\/span>{<\/span><\/span>\n    <\/span>const<\/span> <\/span>API_KEY<\/span> <\/span>=<\/span> <\/span>'<\/span>Insert Your API Key Here<\/span>'<\/span>;<\/span><\/span>\n    <\/span>\/\/ getting the place_ID for the place details API to get details of a restaurant<\/span><\/span>\n    <\/span>const<\/span> <\/span>place_id<\/span> <\/span>=<\/span> <\/span>context<\/span>.<\/span>PlaceID<\/span><\/span>\n    <\/span>five<\/span>.<\/span>log<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>context<\/span>))<\/span><\/span>\n    <\/span>const<\/span> <\/span>API_URL<\/span> <\/span>=<\/span> <\/span>`<\/span>https:\/\/maps.googleapis.com\/maps\/api\/place\/details\/json?place_id=<\/span>${<\/span>place_id<\/span>}<\/span>&key=<\/span>${<\/span>API_KEY<\/span>}<\/span>`<\/span><\/span>\n    <\/span>const<\/span> <\/span>client<\/span> <\/span>=<\/span> <\/span>five<\/span>.<\/span>httpClient<\/span>()<\/span>;<\/span><\/span>\n    <\/span>let<\/span> <\/span>httpResult<\/span> <\/span>=<\/span> <\/span>client<\/span>.<\/span>get<\/span>(<\/span>API_URL<\/span>)<\/span>;<\/span><\/span>\n    <\/span>\/\/ getting the opening hours<\/span><\/span>\n    <\/span>const<\/span> <\/span>hours<\/span> <\/span>=<\/span> <\/span>httpResult<\/span>.<\/span>response<\/span>.<\/span>result<\/span>.<\/span>current_opening_hours<\/span> <\/span>?<\/span> <\/span>httpResult<\/span>.<\/span>response<\/span>.<\/span>result<\/span>.<\/span>current_opening_hours<\/span>.<\/span>weekday_text<\/span>.<\/span>toString<\/span>() <\/span>:<\/span> <\/span>'<\/span>Opening Hours Not Defined<\/span>'<\/span><\/span>\n    <\/span>const<\/span> <\/span>openingHours<\/span> <\/span>=<\/span> <\/span>hours<\/span>.<\/span>split<\/span>(<\/span>'<\/span>,<\/span>'<\/span>)<\/span>.<\/span>join<\/span>(<\/span>'<\/span>\\n<\/span>'<\/span>)<\/span><\/span>\n    <\/span>\/\/ getting the phone number<\/span><\/span>\n    <\/span>const<\/span> <\/span>phoneNumber<\/span> <\/span>=<\/span> <\/span>httpResult<\/span>.<\/span>response<\/span>.<\/span>result<\/span>.<\/span>formatted_phone_number<\/span> <\/span>?<\/span> <\/span>httpResult<\/span>.<\/span>response<\/span>.<\/span>result<\/span>.<\/span>formatted_phone_number<\/span> <\/span>:<\/span> <\/span>'<\/span>Phone Number Not Defined<\/span>'<\/span><\/span>\n     <\/span>let<\/span> <\/span>guid<\/span> <\/span>=<\/span> <\/span>five<\/span>.<\/span>uuid<\/span>()<\/span>;<\/span><\/span>\n    <\/span>\/\/ saving data into SavedRestaurants Table<\/span><\/span>\n    <\/span>let<\/span> <\/span>sql<\/span> <\/span>=<\/span> <\/span>`<\/span>INSERT INTO SavedRestaurants (SavedRestaurantsKey,Name, Address,PhoneNumber,OpeningHours) VALUES ('<\/span>${<\/span>guid<\/span>}<\/span>','<\/span>${<\/span>context<\/span>.<\/span>Name<\/span>}<\/span>','<\/span>${<\/span>context<\/span>.<\/span>Address<\/span>}<\/span>', '<\/span>${<\/span>phoneNumber<\/span>}<\/span>', '<\/span>${<\/span>openingHours<\/span>}<\/span>')<\/span>`<\/span><\/span>\n    <\/span>let<\/span> <\/span>queryResults<\/span> <\/span>=<\/span> <\/span>five<\/span>.<\/span>executeQuery<\/span>(<\/span>sql<\/span>,<\/span> <\/span>0<\/span>)<\/span>;<\/span><\/span>\n    <\/span>if<\/span>(<\/span>!<\/span>queryResults<\/span>.<\/span>isOk<\/span>()) <\/span>{<\/span><\/span>\n        <\/span>return<\/span> <\/span>five<\/span>.<\/span>createError<\/span>(<\/span>queryResults<\/span>)<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n    <\/span>\/\/ updating the status in Restaurants to Saved<\/span><\/span>\n    <\/span>sql<\/span> <\/span>=<\/span> <\/span>`<\/span>Update Restaurants SET Status = 'Saved' Where RestaurantsKey = ?<\/span>`<\/span><\/span>\n    <\/span>queryResults<\/span> <\/span>=<\/span> <\/span>five<\/span>.<\/span>executeQuery<\/span>(<\/span>sql<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>context<\/span>.<\/span>RestaurantsKey<\/span>)<\/span>;<\/span><\/span>\n    <\/span>if<\/span>(<\/span>!<\/span>queryResults<\/span>.<\/span>isOk<\/span>()) <\/span>{<\/span><\/span>\n        <\/span>return<\/span> <\/span>five<\/span>.<\/span>createError<\/span>(<\/span>queryResults<\/span>)<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n    <\/span>five<\/span>.<\/span>commit<\/span>()<\/span><\/span>\n    <\/span>return<\/span> <\/span>five<\/span>.<\/span>success<\/span>(<\/span>result<\/span>)<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
              <\/p>\n\n\n\n
              The SaveRestaurantsButton Function<\/h5>\n\n\n\n
              Last is the SaveRestaurantsButton<\/code> JavaScript function. Remember this function is a client-side function to the call server-side SaveRestaurants<\/code> function.<\/p>\n\n\n
              \n
              \"Five.Co<\/figure>\n<\/div>\n\n\n
              <\/p>\n\n\n\n
              <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
              \/**<\/span><\/span>\n *<\/span><\/span>\n * Using the Client Side Function to call server side function : SaveRestaurants<\/span><\/span>\n *<\/span><\/span>\n *\/<\/span><\/span>\nfunction<\/span> <\/span>SaveRestaurantsButton<\/span>(<\/span>sender<\/span>,<\/span> <\/span>context<\/span>,<\/span> <\/span>result<\/span>)<\/span>  <\/span>{<\/span><\/span>\n    <\/span>let<\/span> <\/span>variables<\/span> <\/span>=<\/span> <\/span>Object<\/span>.<\/span>assign<\/span>(<\/span>{},<\/span> <\/span>form<\/span>.<\/span>field<\/span>)<\/span>;<\/span><\/span>\n    <\/span>const<\/span> <\/span>functionName<\/span> <\/span>=<\/span> <\/span>'<\/span>SaveRestaurants<\/span>'<\/span>;<\/span><\/span>\n    <\/span>var<\/span> <\/span>_five<\/span> <\/span>=<\/span> <\/span>five<\/span>;<\/span> <\/span>\/\/ need to preserve five as returning will null this object.<\/span><\/span>\n    <\/span>five<\/span>.<\/span>executeFunction<\/span>(<\/span>functionName<\/span>,<\/span> <\/span>variables<\/span>,<\/span> <\/span>null<\/span>,<\/span> <\/span>null<\/span>,<\/span> <\/span>null<\/span>,<\/span> <\/span>function<\/span> <\/span>(<\/span>result<\/span>)<\/span> <\/span>{<\/span><\/span>\n    <\/span>}<\/span>)<\/span>;<\/span><\/span>\n    <\/span>return<\/span> <\/span>five<\/span>.<\/span>success<\/span>(<\/span>result<\/span>)<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
              <\/p>\n\n\n\n
              The DoRun Event<\/h5>\n\n\n\n
              We also need one process to associate the GetRestaurants<\/code> function with a DoRun event in our end-user application. Why? Because we want this function to run upon the click of a button. This is called a process inside of Five.<\/p>\n\n\n\n
              Click on Processes in the left-hand menu, and create a new process. Click on events, and select the GetRestaurants<\/code> function in the Do Run drop-down box. Your process should look like this:<\/p>\n\n\n
              \n
              \"Five.Co<\/figure>\n<\/div>\n\n\n
              \n\n\n\n
              Step 4: Write a SQL Query Inside of Five<\/h4>\n\n\n\n
              Our final application is supposed to display all restaurants we\u2019ve visited inside a query. To achieve this, we will write a short SQL query called Restaurant Report<\/code>. Click on Queries, and create a new query that looks like this:<\/p>\n\n\n\n
              <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
              Select<\/span><\/span>\n    RestaurantsKey,PlaceID,<\/span>Name<\/span>,<\/span>Address<\/span>, PhoneNumber,<\/span><\/span>\n    <\/span>'<\/span>Save Details<\/span>'<\/span>as<\/span>'<\/span>Save Details<\/span>'<\/span><\/span>\nfrom<\/span> Restaurants<\/span><\/span>\n    <\/span>Where<\/span> <\/span>Status<\/span> <\/span>=<\/span> <\/span>'<\/span>Not Saved<\/span>'<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
              \n\n\n\n
              Step 5: Creating The Form & Dashboard<\/h4>\n\n\n\n
              Now, let\u2019s create a form for your end-users to see all saved restaurants. To do so, you can use Five\u2019s Form Wizard and select the SavedRestaurants<\/code> table. Five will automatically fill in all required information for creating the form for you, so all you need to do is follow the steps of the wizard<\/a>.<\/p>\n\n\n\n
              Last, we\u2019d like to add a dashboard to our end-user application. The dashboard will let us enter a postcode, and display the results from our GetRestaurants<\/code> function below it. It will look as shown on the image below.<\/p>\n\n\n\n
              To do this, click on Dashboards in the menu on the left, and create a new dashboard. Give it any name, and a 1-column and 5-row grid. You can define these two parameters when you set up the dashboard. Next, click on Actions, and put GetPostcode<\/code> into cell A1, and the Restaurant Report<\/code> into cell A2.<\/p>\n\n\n\n
              Here\u2019s what this will look like in the finished application:<\/p>\n\n\n
              \n
              \"Five.Co<\/figure>\n<\/div>\n\n\n
              \n\n\n\n
              Step 6: Launch the Application<\/h4>\n\n\n\n
              Up until now, all we have been doing is building the application. Now it\u2019s time to preview what we\u2019ve built.<\/p>\n\n\n\n
              If you are working on Five\u2019s free download, click the play \u25b6\ufe0f button in the top right corner, shown below. If you are developing your application on the cloud, look for the Deploy to Development button, in the same location. This will launch the application into its dedicated development environment, and gives you an opportunity to preview the application before shipping it to production.<\/p>\n\n\n
              \n
              \"Five.Co<\/figure>\n<\/div>\n\n\n
              \n\n\n\n
              Conclusion<\/strong><\/h2>\n\n\n\n
              And that’s it. You’ve finished building an application that retrieves restaurant information and stores them inside your own MySQL database! In this tutorial, you have used several of Five’s features: from creating and managing your own MySQL database to writing JavaScript functions and using Get<\/code> requests to fetch information based on your search parameters. You have also created forms and dashboards for your end-users to interact with your data.<\/p>\n\n\n\n
              If you have any other questions or would like to learn more about building applications using Five, visit our user community to learn from other users or to get answers to your questions<\/a>!<\/p>\n\n\n\n
              Sign up<\/a>\u00a0now\u00a0and start developing on\u00a0our low-code development environment.<\/p>\n","protected":false},"excerpt":{"rendered":"
              Five Lab: Building an Application That Interacts with the Google Maps API Welcome to Five Labs, a step-by-step guide to building applications using Five. This lab guides you through creating a custom online database application that interacts with the Google Maps API. Sign up\u00a0now\u00a0and start building an application on\u00a0our low-code development environment. Lab Objectives & […]<\/p>\n","protected":false},"author":3,"featured_media":800,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[21],"tags":[],"class_list":["post-799","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/02\/Five.Co-Building-An-Application-That-Interacts-with-the-Google-Maps-API.png",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/02\/Five.Co-Building-An-Application-That-Interacts-with-the-Google-Maps-API.png",150,84,false],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/02\/Five.Co-Building-An-Application-That-Interacts-with-the-Google-Maps-API.png",300,169,false],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/02\/Five.Co-Building-An-Application-That-Interacts-with-the-Google-Maps-API.png",768,432,false],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/02\/Five.Co-Building-An-Application-That-Interacts-with-the-Google-Maps-API.png",1024,576,false],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/02\/Five.Co-Building-An-Application-That-Interacts-with-the-Google-Maps-API.png",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/02\/Five.Co-Building-An-Application-That-Interacts-with-the-Google-Maps-API.png",1280,720,false]},"uagb_author_info":{"display_name":"Dominik Keller","author_link":"https:\/\/preview-php85.dzine.org\/five\/author\/f1v5_ed3_my\/"},"uagb_comment_info":0,"uagb_excerpt":"Five Lab: Building an Application That Interacts with the Google Maps API Welcome to Five Labs, a step-by-step guide to building applications using Five. This lab guides you through creating a custom online database application that interacts with the Google Maps API. Sign up\u00a0now\u00a0and start building an application on\u00a0our low-code development environment. Lab Objectives &…","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/comments?post=799"}],"version-history":[{"count":3,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/799\/revisions"}],"predecessor-version":[{"id":17432,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/799\/revisions\/17432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/800"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}