Logo

API Tutorial for Piperpal Location JavaScript API

Introduction:

Piperpal Location JavaScript API provides a simple way to retrieve and push location information based on geographical coordinates. This tutorial guides you through both reading (pull) and writing (push) location data.

Pull/API Read Endpoint

Endpoint:

https://api.piperpal.com/location/json.php

Query Parameters:

    service (required): Specifies the type of location/service you are searching for.
    glat (required): Latitude of the location.
    glon (required): Longitude of the location.
    

Example Usage:

    <script type="text/javascript" src="https://api.piperpal.com/location/json.php?service=Books&glat=37.4375596&glon=-122.11922789999998"></script>
    <script language="JavaScript">
        var obj = JSON.parse(locations);
        for (i = 0; i < obj.locations.length; i++) {
            // Process and display location data as needed
        }
    </script>
    

Push/API Write Endpoint

Endpoint:

https://api.piperpal.com/location/push.php

Query Parameters:

    name (required): Name of the location.
    location (required): URL of the location.
    service (required): Type of service associated with the location.
    glat (required): Latitude of the location.
    glon (required): Longitude of the location.
    paid (optional): Amount paid for the service.
    

Example Usage:

    <script type="text/javascript" src="https://api.piperpal.com/location/push.php?name=Google&location=http://www.google.com/&service=Books&glat=37.4375596&glon=-122.11922789999998&paid=50"></script>
    

Notes:

For the pull API, include the script tag with the API URL and necessary query parameters. The response will be available as a JavaScript object named locations.

For the push API, include the script tag with the API URL and required query parameters. This will push the specified location data to the server.

Ensure that you replace placeholder values with your actual data when making API requests. The pull API is designed to retrieve location information, while the push API is used to add new locations to the Piperpal database.

Creating an HTML Document for Piperpal's Location API

Prerequisites:

  1. Piperpal API Access:
  2. Text Editor:

Step 1: Set Up Your HTML Document

Create a new HTML file (e.g., index.html) and set up the basic structure:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Piperpal Location API Demo</title>
        <!-- Include necessary stylesheets or link to external styles -->
    </head>
    <body>
        <!-- Content will go here -->
        <!-- Include necessary scripts, such as jQuery and Piperpal's API script -->
    </body>
    </html>
    

Step 2: Include External Scripts and Styles

Include necessary external scripts and stylesheets in the <head> section of your HTML file. For example, include jQuery and Piperpal's API script:

    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <!-- Include Piperpal's Location API Script -->
    <script src="https://api.piperpal.com/location/json.php"></script>

    <!-- Include any additional stylesheets -->
    <link rel="stylesheet" href="styles.css">
    

Step 3: Build the Location Submission Form

Create a form that allows users to submit location data. Include fields for name, service, location, and any other relevant information:

    <form id="locationForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="service">Service:</label>
        <select id="service" name="service">
            <option value="Restaurant">Restaurant</option>
            <!-- Add other service options -->
        </select>

        <label for="location">Location:</label>
        <input type="text" id="location" name="location" required>

        <!-- Add more fields as needed -->

        <button type="button" onclick="submitLocation()">Submit Location</button>
    </form>
    

Step 4: Write JavaScript for Location Submission

Write JavaScript code to handle location submission. Define the submitLocation function that will be called when the user clicks the submit button:

    <script>
        function submitLocation() {
            // Get values from form fields
            const name = document.getElementById('name').value;
            const service = document.getElementById('service').value;
            const location = document.getElementById('location').value;

            // Use Piperpal's API endpoint to push location data
            const apiUrl = `https://api.piperpal.com/location/push.php?name=${name}&service=${service}&location=${location}`;
            
            // Make an AJAX request to submit data
            $.get(apiUrl, function(response) {
                // Handle the response if needed
                console.log(response);
            });
        }
    </script>
    

Step 5: Display Nearby Locations