Navionics Web API v2
  1. Home
  2. Examples
  3. JNC.Google.NavionicsOverlay

Component JNC.Google.NavionicsOverlay

Acknowledgements | Not to be used for navigation
This page can't load Google Maps correctly.
Do you own this website?

Navionics NauticalChart base-overlay with different logo settings: with logo payoff

This example shows how to draw multiple Navionics overlay based on Google maps with different logo settings. Logo can be shown with or without payoff. This overlay shows Navionics logo with payoff 

  2. // The Google Map Engine options
  3. var gMapNauticalOptions = {
  4.     zoom: 14,
  5.     center: gibilterra,
  6.     mapTypeId: google.maps.MapTypeId.ROADMAP
  7. };
  8. // Creation of  Google Map Engine
  9. var gMapNautical = new google.maps.Map(document.getElementById("nautical-map-container"), gMapNauticalOptions);
  10. //Navionics NauticalChart
  11. var navionics_nauticalchart_layer = new JNC.Google.NavionicsOverlay({
  12.     navKey: "****",
  13.     chartType: JNC.Google.NavionicsOverlay.CHARTS.NAUTICAL,
  14.     // Enable Navionics logo with payoff
  15.     logoPayoff: true,
  16.     // Since we draw multiple NavionicsOverlay on the same page, we have to pass the id of the div containing every instance
  17.     divId: 'nautical-map-container'
  18.     });
  19.                         
  20. gMapNautical.overlayMapTypes.insertAt(0, navionics_nauticalchart_layer);
  21.                     
  22.
Acknowledgements | Not to be used for navigation
This page can't load Google Maps correctly.
Do you own this website?

Navionics NauticalChart base-overlay with different logo settings: without logo payoff

This overlay shows Navionics logo without payoff 

  2. // The Google Map Engine options
  3. var gibilterra = new google.maps.LatLng(36.140751,-5.353585);
  4. var gMapNauticalOptions = {
  5.     zoom: 14,
  6.     center: gibilterra,
  7.     mapTypeId: google.maps.MapTypeId.ROADMAP
  8. };
  9.     
  10. var gMapNautical2 = new google.maps.Map(document.getElementById("sonar-map-container"), gMapNauticalOptions);
  11.     
  12. //Navionics SonarChart
  13. var navionics_sonarchart_layer = new JNC.Google.NavionicsOverlay({
  14.     navKey: "****",
  15.     chartType: JNC.Google.NavionicsOverlay.CHARTS.SONAR,
  16.     // Enable Navionics logo without payoff (Default behaviour)
  17.     logoPayoff: false,
  18.     // Since we draw multiple NavionicsOverlay on the same page, we have to pass the id of the div containing every instance
  19.     divId: 'sonar-map-container'
  20. });
  21.     
  22. gMapNautical2.overlayMapTypes.insertAt(0, navionics_sonarchart_layer);
  23.
BESbswy
BESbswy