API Tutorial for Piperpal Location JavaScript API


Piperpal Location JavaScript API provides a simple way to retrieve location information based on geographical coordinates and to push new location data to the server. This tutorial will guide you through the process of making requests to the API for both reading (pull) and writing (push) location data.

Pull/API Read Endpoint




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

Push/API Write Endpoint




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>


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.

In this tutorial, we'll guide you through creating an HTML document with embedded JavaScript to interact with Piperpal's Location API. This example will focus on a simple web page that allows users to submit location data and retrieve nearby locations using the API.


  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">
    <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 -->
    <!-- Content will go here -->
    <!-- Include necessary scripts, such as jQuery and Piperpal's API script -->

Step 2: Include External Scripts and Styles

Include necessary external scripts and stylesheets in the 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 -->

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

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 language="JavaScript">
        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

Step 5: Display Nearby Locations

Create a section on the page to display nearby locations retrieved from Piperpal's API:

    <div id="nearbyLocations">
      <!-- Nearby locations will be displayed here -->

Write JavaScript code to fetch and display nearby locations:

    <script language="JavaScript">
    // Use Piperpal's API endpoint to pull nearby locations
      const readApiUrl = 'https://api.piperpal.com/location/json.php?service=Search&glat=37.4375596&glon=-122.11922789999998';

      // Make an AJAX request to fetch data
      $.get(readApiUrl, function(response) {
          // Handle the response and display nearby locations
          const nearbyLocations = response.locations;
          const nearbyLocationsDiv = document.getElementById('nearbyLocations');

          nearbyLocations.forEach(location => {
              const locationInfo = `<p><strong>${location.name}</strong> (${location.distance} away) - ${location.service}</p>`;
              nearbyLocationsDiv.innerHTML += locationInfo;

Step 6: Test Your Web Page

Save your HTML file and open it in a web browser. Test the location submission form and check if nearby locations are displayed.

Congratulations! You've created a simple web page that interacts with Piperpal's Location API. You can customize and expand upon this example based on your specific needs.

Location JavaScript API



    <script type="text/javascript" src="https://api.piperpal.com/location/json.php?service=Search&glat=37.4375596&glon=-122.11922789999998"></script>
    <script language="JavaScript">
    var obj = JSON.parse(locations);
      for (i=0; i < obj.locations.length; i++) {
        document.write("<h4>" + obj.locations[i].name + "</h4><h6><a href='" + obj.locations[i].location + "'>" + obj.locations[i].location + "</a> (" + obj.locations[i].distance + ")</h6><p>" + " " + obj.locations[i].service + " " + "</p>");
	document.write("<p>" + obj.locations[i].distance + "</p><form method='GET' action='/'><input type='text' name='query' placeholder='' value='" + obj.locations[i].name + "'/><input type='hidden' name='glat' value='" + obj.locations[i].glat + "' /><input type='hidden' name='glon' value='" + obj.locations[i].glon + "'/><span id='geopher'></span><select name='service'><option selected value='" + obj.locations[i].service + "'>" + obj.locations[i].service + "</option></select><input type='submit' value='Search' /></p>");



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

Pull/API Read EndPoint https://api.piperpal.com/location/json.php



Push/API Write EndPoint https://api.piperpal.com/location/push.php


© 2023 Aamot Engineering