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