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

  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. // Creation of  Google Map Engine
  10. var gMapNautical = new google.maps.Map(document.getElementById("nautical-map-container"), gMapNauticalOptions);
  12. //Navionics NauticalChart
  13. var navionics_nauticalchart_layer = new JNC.Google.NavionicsOverlay({
  14.     navKey: "****",
  15.     chartType: JNC.Google.NavionicsOverlay.CHARTS.NAUTICAL,
  16.     // Enable Navionics logo with payoff
  17.     logoPayoff: true,
  18.     // Since we draw multiple NavionicsOverlay on the same page, we have to pass the id of the div containing every instance
  19.     divId: 'nautical-map-container'
  21. });
  23. gMapNautical.overlayMapTypes.insertAt(0, navionics_nauticalchart_layer);
  24.
Acknowledgements | Not to be used for navigation
This page can't load Google Maps correctly.
Do you own this website?

Navionics SonarCharts base-overlay

  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. };
  10. var gMapNautical2 = new google.maps.Map(document.getElementById("sonar-map-container"), gMapNauticalOptions);
  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. });
  22. gMapNautical2.overlayMapTypes.insertAt(0, navionics_sonarchart_layer);
  23.
Acknowledgements | Not to be used for navigation
This page can't load Google Maps correctly.
Do you own this website?

Navionics Overlays over Google Map Engine

  2. // The Navionics Headquarters position
  3. var NavionicsHeadquarters = new google.maps.LatLng(43.860170,10.238238);
  5. // The Google Map Engine options
  6. var gMapEngineOptions = {
  7.     zoom: 15,
  8.     center: NavionicsHeadquarters,
  9.     mapTypeControlOptions: {
  10.         mapTypeIds: [
  11.             JNC.Google.NavionicsOverlay.CHARTS.NAUTICAL,
  12.             JNC.Google.NavionicsOverlay.CHARTS.SONAR,
  13.             google.maps.MapTypeId.ROADMAP,
  14.             google.maps.MapTypeId.TERRAIN,
  15.             google.maps.MapTypeId.HYBRID
  16.         ],
  17.         style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  18.     }
  19. };
  21. // Creation of  Google Map Engine
  22. var gMapEngine = new google.maps.Map(document.getElementById("gMapEngineContainer"), gMapEngineOptions);
  24. // Creation of Navionics SonarChart Layer
  25. var navionicsSonarChartOverlay = new JNC.Google.NavionicsOverlay({
  26.     navKey: "*****",
  27.     chartType: JNC.Google.NavionicsOverlay.CHARTS.SONAR,
  28.     isTransparent: false,
  29.     // Enable Navionics logo with payoff
  30.     logoPayoff: true,
  31.     // Since we draw multiple NavionicsOverlay on the same page, we have to pass the id of the div containing every instance
  32.     divId: 'gMapEngineContainer'
  33. });
  35. // Creation of Navionics NauticalChart Layer
  36. var navionicsNauticalChartOverlay = new JNC.Google.NavionicsOverlay({
  37.     navKey: "****",
  38.     chartType: JNC.Google.NavionicsOverlay.CHARTS.NAUTICAL,
  39.     isTransparent: false,
  40.     // Enable Navionics logo with payoff
  41.     logoPayoff: true,
  42.     // Since we draw multiple NavionicsOverlay on the same page, we have to pass the id of the div containing every instance
  43.     divId: 'gMapEngineContainer'
  44. });
  46. // Now attach the Navionics Overlay type to the map's registry.
  47. gMapEngine.mapTypes.set(JNC.Google.NavionicsOverlay.CHARTS.SONAR, navionicsSonarChartOverlay);
  48. gMapEngine.mapTypes.set(JNC.Google.NavionicsOverlay.CHARTS.NAUTICAL, navionicsNauticalChartOverlay);
  50. // We can now set the map to use the 'NauticalCharts' map type.
  51. gMapEngine.setMapTypeId(JNC.Google.NavionicsOverlay.CHARTS.NAUTICAL);
  53.
BESbswy
BESbswy
BESbswy