How to use Barikoi.js with Google maps

Photo by oxana v on Unsplash

Hi! Everyone.

Here at Barikoi, we are working hard to make sure we built a location data platform to serve all of your location data needs. We want to make it easy to integrate and platform agnostic.

In this tutorial, we want to to show our platform-agnostic javascript library barikoi.js and how to use it with google maps

A small JavaScript library that provides an easy interface to use Barikoi API. Developers can integrate barikoi.js on any website with any map available.

First, let's create a barikoi account at https://barikoi.com/signup. Then generate the API key from the account dashboard. Add barikoi.js and barikoi.css on your page with your API key.

Also, take google maps API from your google account.

The map would looks like this once completed

In order to get the Barikoi autocomplete feature, you have to create a input field with class name of ‘bksearch’ and a div with a class name of ‘bklist’. Wrap both with a div. Now you will get the autocomplete list everytime you search. Here is the HTML example.

Fetch data from the API

Now getting the selected data is simple as well.

Parse Data

You can place this geocode data on any map eg. google maps or OpenStreetMap. Here we have used google maps as an example. Make sure you add google maps script files at the end of the body content.

Heres the HTML:

Heres the JavaScript code:

Javascript code needed to show data

Barikoi.JS with google Maps

That’s it!

We now know how to integrate barikoi location API with google maps into any of your projects