29 May 2019 Herrington Harbour North, Chesapeake, USA
{source}
<script>
// Load Location Parameters
var pinName = 'Herrington Harbour North';
var pinFunction = 'HerringtonHarbourNorth';
</script>
<!-- Load Google Maps API -->
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyB3oLL6Ibii86BicVdZBkyaNE_02YFCpOY'></script>
<script src="http://thehowarths.net/includes/js/AlbaMapsWestIndies.js"></script>
<!-- Load Helper Functions -->
<script src='http://thehowarths.net/includes/js/AlbaHelperFunctions.js'></script>
<script>
// Get the position variables from the PositionJS file
// First initialise the variables
var viewLongitude; // Deprecated, was used for Google Earth Plugin
var viewLatitude; // Deprecated, was used for Google Earth Plugin
var viewHeading; // Deprecated, was used for Google Earth Plugin
var viewTilt; // Deprecated, was used for Google Earth Plugin
var viewRange; // Deprecated, was used for Google Earth Plugin
var pinLongitude;
var pinLatitude;
var strDescription = ''; // Not yet implemented - Description of the Anchorage
// Get the variables for this location
eval(pinFunction + '();');
// Format the Latitude and Longitude to 2 decimal places for Info Window
var strLongitude = formatLongitude (pinLongitude);
var strLatitude = formatLatitude (pinLatitude);
// Create Page Heading
var pageHeading = pinName + ' (' + strLatitude + ' ' + strLongitude + ')';
// Set up for Google Maps (not as detailed as Google Earth, so only using some variables)
var latLong = new google.maps.LatLng(pinLatitude, pinLongitude);
var intTilt = 45;
var intZoom = 3;
var intHeading = 0;
var strIcon = 'http://www.thehowarths.net/images/Assets/AnchorIcon.png';
var contentString = '<div id="content">'+ '<b>' + pinName + '</b>'+ '<p>' + strLatitude + ' ' + strLongitude + '</p>' + '<p>' + strDescription + '</p>' + '</div>';
</script>
<script>
// Initialise Google Maps API
function initialize() {
// Define the div to place the map
var mapCanvas = document.getElementById('map3d');
// Define the map options
var mapOptions = {
center: latLong,
zoom: intZoom,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
// Create the map variable
var myMap = new google.maps.Map(mapCanvas, mapOptions);
// Add a Placemark
var marker = new google.maps.Marker({
position: latLong,
map: myMap,
title: pinName,
icon: strIcon
});
// Create the Info Window
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 400
});
// Detect the user clicking the marker and open the info window
marker.addListener('click', function() {
infowindow.open(myMap, marker);
});
// Add route KML files - these need to be the Full URL - not a relative URL
// Use +'?'+ new Date().getTime() to prevent caching during development
var kmlPath1 = 'http://www.thehowarths.net/images/kml/AlbaEasternCaribbeanRoute.kml';
var kmlPath2 = 'http://www.thehowarths.net/images/kml/AlbaEasternUSARoute.kml';
var kmlPath3 = 'http://www.thehowarths.net/images/kml/AlbaWesternCaribbeanRoute.kml';
var kmlPath4 = 'http://www.thehowarths.net/images/kml/AlbaEasternPacificRoute.kml';
var kmlPath5 = 'http://www.thehowarths.net/images/kml/AlbaSouthPacificRoute.kml'; // + '?' + new Date().getTime();
var kmlPath6 = 'http://www.thehowarths.net/images/kml/AlbaNZSingaporeRoute.kml';
var kmlPath7 = 'http://www.thehowarths.net/images/kml/AlbaMalaysiaThailandRoute.kml';
var kmlPath8 = 'http://www.thehowarths.net/images/kml/AlbaIndianOceanRoute.kml';
var kmlPath9 = 'http://www.thehowarths.net/images/kml/AlbaAtlanticOceanRoute.kml';
// Add a new KML layers - preserve viewport stops maps zooming out to the extent of the kml layers
// and still zooms in to the defined placemark
var layer1 = new google.maps.KmlLayer(kmlPath1,{preserveViewport: true});
layer1.setMap(myMap);
var layer2 = new google.maps.KmlLayer(kmlPath2,{preserveViewport: true});
layer2.setMap(myMap);
var layer3 = new google.maps.KmlLayer(kmlPath3,{preserveViewport: true});
layer3.setMap(myMap);
var layer4 = new google.maps.KmlLayer(kmlPath4,{preserveViewport: true});
layer4.setMap(myMap);
var layer5 = new google.maps.KmlLayer(kmlPath5,{preserveViewport: true});
layer5.setMap(myMap);
var layer6 = new google.maps.KmlLayer(kmlPath6,{preserveViewport: true});
layer6.setMap(myMap);
var layer7 = new google.maps.KmlLayer(kmlPath7,{preserveViewport: true});
layer7.setMap(myMap);
var layer8 = new google.maps.KmlLayer(kmlPath8,{preserveViewport: true});
layer8.setMap(myMap);
var layer9 = new google.maps.KmlLayer(kmlPath9,{preserveViewport: true});
layer9.setMap(myMap);
}
// Load the Google map object into the page
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map3d" style="height: 500px;
width: 100%;
margin:0px;
border-color:Black;
border-width:2px;
z-index: 1;">
</div>
{/source}
You can also see all of the anchorages that we've visited around the world.