Working with GPS

[Home] > Working with GPS

This content learn how to work with GPS and Geo in Element5JS API.

Find your position coordinate

Now, we find your position by using.

geo5.onDetect((e) => 
{
  const lat = e.position.coords.latitude;
  const lng = e.position.coords.longitude;
}
let geo = geo5.GetPosition();

Using Google Map API

With the result had found, we go to google map, and view your position on the map. Running this guide we need to setup the google-map package.

Let's install this package, typing the following command into your terminal.

npm install --save google-map

After you had installed this package, you can import it into your project.

import {loader} from 'google-map'

Config the new Google Map in your application.

const APIKey = "YOUR_API_KEY";
const options = {};
const loader = new Loader(APIKey, options);
loader.load().then((google) => 
{
  const view = $.create("div#map").css("height", "100%").addedBy(body);
  const pos = {lat: lat, lng: lng};
  const map = new google.maps.Map(view, {
    center: pos, 
    zoom: 12
  });
  const marker = new google.maps.Marker({
    position: pos,
    map: map,
  });
});

Finally, we can build your application and view the map on your browser.

The full source look like as following.

import {element5 as $, geo5} from '@bapquad/element5'
import {Loader} from 'google-maps'

const body = $.GetBody().css({
  "height": "100%", 
  "margin":"0", 
  "padding":"0"
});

geo5.onDetect((e) => 
{
  const lat = e.position.coords.latitude;
  const lng = e.position.coords.longitude;
  const APIKey = "YOUR_API_KEY";
  const options = {};
  const loader = new Loader(APIKey, options);
  loader.load().then((google) => 
  {
    const view = $.create("div#map").css("height", "100%").addedBy(body);
    const pos = {lat: lat, lng: lng};
    const map = new google.maps.Map(view, {
      center: pos, 
      zoom: 12
    });
    const marker = new google.maps.Marker({
      position: pos,
      map: map,
    });
  });
});

let geo = geo5.GetPosition();

Nice day!