Logo

API Tutorial for Piperpal Location Intelligence JavaScript API

Introduction:

Piperpal Location Intelligence 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 Intelligence 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 Intelligence 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 Intelligence 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 Intelligence 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 Intelligence</button>
    </form>

Step 4: Write JavaScript for Location Intelligence 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

Location Intelligence Ads

Single-file integration demo for the Piperpal ads API. Set a position, service and radius — the request updates live, exactly as your page would call api/ads/json.php. Tutorial: api.piperpal.com/tutorial.

Rendered ads

Press “Fetch ads” to load.

Raw API response

—

If the fetch fails with a CORS error in the browser console, add an Access-Control-Allow-Origin: * header to json.php — this file calls the API directly from the browser and needs it when served from another origin. Served from piperpal.com itself, no header is needed.