2. i-Boating SDK Examples
  3. i-Boating : Using Google Maps to render a Nautical Chart

i-Boating : Using Google Maps to render a Nautical Chart



<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>i-Boating : Using Google Maps to render a Nautical Chart</title>
    <!-- Nautical Mapping -->
    <link rel='stylesheet' href='https://fishing-app.gpsnauticalcharts.com/i-boating-fishing-marine-navigation-sdk/5.5/blc-maps.css?rand=1695425337' />
    <script src='https://fishing-app.gpsnauticalcharts.com/i-boating-fishing-marine-navigation-sdk/5.5/blc-maps.js?rand=1695425337'></script>
    
    <style>
/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.custom-map-control-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.custom-map-control-button:hover {
  background: rgb(235, 235, 235);
}

    </style>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY_HERE"
    ></script>
    <!-- Google Maps Nautical Adapter -->
    <script src="https://fishing-app.gpsnauticalcharts.com/i-boating-fishing-marine-navigation-sdk/5.5/googlemaps-blc-adapter.js?rand=1695425337"></script>
  </head>
  <body>
    <div id="map"></div>

    <script>
/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
// This example adds hide() and show() methods to a custom overlay's prototype.
// These methods toggle the visibility of the container <div>.
// overlay to or from the map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 37.713170 , lng: -122.316809},
    mapTypeId: "satellite",
  });


const overlay = new BlcNauticalOverlayGoogle(map, 
	{
		blc_access_token:'YOUR_ACCESS_TOKEN_HERE',
		blc_background_map: 'none'
	});

  overlay.setMap(map);

  const toggleButton = document.createElement("button");

  toggleButton.textContent = "Toggle";
  toggleButton.classList.add("custom-map-control-button");

  toggleButton.addEventListener("click", () => {
    overlay.toggle();
  });
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(toggleButton);
}
window.onload = function() {
	initMap();
}
    </script>
  </body>
</html>