2. i-Boating SDK Examples
  3. i-Boating : Using Google Maps to render a Nautical Chart initialized to show depths in metres. Overlay lines, points and polygons on the nautical chart.

i-Boating : Using Google Maps to render a Nautical Chart initialized to show depths in metres. Overlay lines, points and polygons on the 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 initialized to show depths in metres. Overlay lines, points and polygons on the 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.8269, lng: -122.3990},
    mapTypeId: "satellite",
  });

var myLatLng = { lat: 37.8269, lng: -122.3990};
  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });

	

var latlngs = [{ lat:37.8269, lng:-122.3990}, {lat:37.8211, lng:-122.3396}];
	
  const polyline = new google.maps.Polyline({
    path: latlngs,
    geodesic: true,
    strokeColor: "#0000FF",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });

  polyline.setMap(map);

latlngs = [ {lat:37.8267, lng:-122.417 }, { lat:37.81, lng:-122.413}, { lat:37.8183, lng:-122.4429}, {lat:37.8267, lng:-122.417 } ];
  const polygon = new google.maps.Polygon({
    paths: latlngs,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  polygon.setMap(map);
	

	


const overlay = new BlcNauticalOverlayGoogle(map, 
	{
		blc_access_token:'YOUR_ACCESS_TOKEN_HERE',
		blc_user_settings: {"depth":"m"},
		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>