Backbench Docs
  • Introduction
  • Getting Started
    • BBLANG
    • Node
    • Python
    • Go
  • Backbench Features and UI workflow
  • API Reference
    • BBLANG
    • Node
    • Python
    • Go
  • 3rd Party Integrations
    • Login using Facebook
    • Login using Google
    • Login with Twitter
    • Login using LinkedIn
    • Connection with MongoDB
    • Connection with MySQL
    • Geo Location Integration
    • Integration with AWS S3
    • Integration with Google Cloud Storage
    • Integration with Razorpay
    • Integration with Stripe
    • Integration with Mailchimp
    • Integration with Segment
    • Sending Emails with SendGrid
    • Sending Emails with Mailgun
    • Sending SMS with Twilio
    • Sending Push Notification with Pushwoosh
  • Troubleshooting and support
    • CNAME Support
    • FAQS
    • Error Codes
  • Testing
Powered by GitBook
On this page
  • What You'll Need
  • Prerequisites for the app
  • Frontend
  1. 3rd Party Integrations

Geo Location Integration

PreviousConnection with MySQLNextIntegration with AWS S3

Last updated 6 years ago

What You'll Need

Backbench account - , the personal account will always remain free to use.

Google Developer account - Sign In and create a project on .

Prerequisites for the app

  1. Sign In to Backbench account.

  2. Select +, in the upper right corner to create a Bench. For example, say "bench_one" and select CREATE or hit Enter.

Frontend

  1. Select +, in the upper right corner of file manager to create a html file. For example, say "index.html" and select CREATE or hit Enter.

  2. Copy and paste the code module from below.

  3. Select Credentials then select the API Key from Create Credential Drop down. Now Replace API Key from google dashboard in below code.

  4. Select save.

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.
      var map, infoWindow;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 6
        });
        infoWindow = new google.maps.InfoWindow;

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('Location found.');
            infoWindow.open(map);
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_Key&callback=initMap">
    </script>
  </body>
</html>

Sign Up
Google developers