Combined Project

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <title>Vis 725 Project - Global Warming and Sea Level Rise</title>

// Create the Google Map
                var node = document.getElementById("map");
                var map = new google.maps.Map(node, {
                    zoom: 8,
                    center: new google.maps.LatLng(37.76487, -76.41948),
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                });

var incomeLayer = "https://jamestiberiuseanes.github.io/IncomeMap6.kml";
                var startingLayer = "https://jamestiberiuseanes.github.io/SeaLevelMap0m-1.kml"

var chesapeakeMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(36.9736644, -76.1095),
                    map: map,
                    label: 'Chesapeake Bay Bridge Tunnel',
                    title: 'Chesapeake Bay Bridge Tunnel'
                });
                chesapeakeMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/Jamestiberiuseanes/jamestiberiuseanes.github.io/master/infovis/chesapeake.html';
                });

var kiptopekeMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(37.17378, -75.9749),
                    map: map,
                    label: 'Kiptopeke',
                    title: 'Kiptopeke'
                });
                kiptopekeMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/manojchandrak/vischarts/master/infovis/kiptopeke.html';
                });

var lewisettaMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(37.99791, -76.4627),
                    map: map,
                    label: 'Lewisetta',
                    title: 'Lewisetta'
                });
                lewisettaMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/manojchandrak/vischarts/master/infovis/lewisette.html';
                });

var sewellsMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(36.95487, -76.3269),
                    map: map,
                    label: 'Sewells Point',
                    title: 'Sewells Point'
                });
                sewellsMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/manojchandrak/vischarts/master/infovis/sewellsPoint.html';
                });

var wachaMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(37.6043, -75.6897),
                    map: map,
                    label: 'Wachapreague',
                    title: 'Wachapreague'
                });
                wachaMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/manojchandrak/vischarts/master/infovis/wachapreague.html';
                });

var colonialMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(38.25457, -76.9636),
                    map: map,
                    label: 'Colonial Beach',
                    title: 'Colonial Beach'
                });
                colonialMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/manojchandrak/vischarts/master/last2/colonialBeach.html';
                });

var gloucesterMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(37.25403, -76.4969),
                    map: map,
                    label: 'Gloucester Point',
                    title: 'Gloucester Point'
                });
                gloucesterMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/manojchandrak/vischarts/master/last2/gloucesterPoint.html';
                });

var seaLevelOverlay = new google.maps.KmlLayer({
                    /*url: startingLayer,*/
                    map: map
                });

var incomeOverlay = new google.maps.KmlLayer({
                    /*url: startingLayer,*/
                    map: map
                });

function addSeaLevelOverlay(layer) {
                    seaLevelOverlay.setMap(null);
                    seaLevelOverlay = new google.maps.KmlLayer({
                        preserveViewport: true,
                        url: layer,
                        map: map,
                    });
                }

function addIncomeOverlay(layer) {
                    incomeOverlay.setMap(null);
                    incomeOverlay = new google.maps.KmlLayer({
                        preserveViewport: true,
                        url: layer,
                        map: map,
                    });
                }

function handleSeaLevel() {
                    var x = document.getElementById("seaLevels").value;
                    var layer = "https://jamestiberiuseanes.github.io/SeaLevelMap" + x + "-1.kml";
                    seaLevelOverlay.setMap(null);
                    addSeaLevelOverlay(layer);
                }

function handleLoad() {
//                    overlay.setMap(null);
                    map.setZoom(8);
                }

</script>
    </body>
</html>

https://maps.google.com/maps/api/js?sensor=true

https://d3js.org/d3.v3.min.js