Nautical Maps API - Help / Freelancer

Nautical Maps API - Help / Freelancer

Hi, I need some help for my boating web app. Navionics is an Italian company, now part of the Garmin Group, that provides nautical charts. They also make available what they call WebAPI v.2 service that should let you do some interesting stuff, like overlay their charts with Google Maps. Documentation is available here

I am stuck right at the “Quick Start” section when trying to reproduce the following

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="authenticity_token" name="csrf-param" />
    <title>Navionics Web API v2</title>

    <link rel="stylesheet" href="" >
    <script type="text/javascript" src=""></script>

    <style type="text/css">
        html, body, .test_map_div {
            margin: 0;
            width: 100%;
            height: 100%;
<body data-root="" >
   <div class="test_map_div" ></div>
        var webapi = new JNC.Views.BoatingNavionicsMap({
            tagId: '.test_map_div',
            center: [  12.0, 46.0 ],
            navKey: 'your navionics key'


In Bubble I just created a new page and put the head code into the page head. Then I tried adding an html element with the script, but what I get is only a blank map. The first problem is about how to manage the call to data-root="

Here is an example of a site using the Navionics/Google Maps approach

Looking at ther source code they are using this navionics key = Navionics_webapi_00246

We can use this key for test purpoese.

I appreciate any help and I am available to hire a freelancer for reasonable price.

First step should be to accomplish the “quick start” only. Then I would like to add the Google Maps overlay. And eventually add markers and polilynes to Google Maps.


This topic was automatically closed after 70 days. New replies are no longer allowed.