mlevans · October 4, 2024 18:59
diff --git a/nacto-map.html b/nacto-map.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>US Map with Hawaii Inset</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <style>
        #map-container {
            position: relative;
            width: 100%;
            height: 600px;
        }
        #main-map {
            width: 100%;
            height: 100%;
        }
        #hawaii-map {
            position: absolute;
            bottom: 10px;
            left: 10px;
            width: 200px;
            height: 150px;
            border: 2px solid #000;
        }
    </style>
 </head>
 <body>
    <div id="map-container">
        <div id="main-map"></div>
        <div id="hawaii-map"></div>
    </div>

    <script>
        function initMaps() {
            const mainMap = new google.maps.Map(document.getElementById('main-map'), {
                center: {lat: 39.8283, lng: -98.5795},
                zoom: 4,
                mapTypeId: 'terrain'
            });

            const hawaiiMap = new google.maps.Map(document.getElementById('hawaii-map'), {
                center: {lat: 21.3069, lng: -157.8583},
                zoom: 6,
                mapTypeId: 'terrain'
            });

            // Example: Adding a marker for a member city
            const newYork = {lat: 40.7128, lng: -74.0060};
            new google.maps.Marker({
                position: newYork,
                map: mainMap,
                title: 'New York City'
            });

            // Example: Adding a marker for Honolulu
            const honolulu = {lat: 21.3069, lng: -157.8583};
            new google.maps.Marker({
                position: honolulu,
                map: hawaiiMap,
                title: 'Honolulu'
            });
        }

        google.maps.event.addDomListener(window, 'load', initMaps);
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>US Map with Hawaii Inset</title>
	<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
	<style>
	#map-container {
	position: relative;
	width: 100%;
	height: 600px;
	}
	#main-map {
	width: 100%;
	height: 100%;
	}
	#hawaii-map {
	position: absolute;
	bottom: 10px;
	left: 10px;
	width: 200px;
	height: 150px;
	border: 2px solid #000;
	}
	</style>
	</head>
	<body>
	<div id="map-container">
	<div id="main-map"></div>
	<div id="hawaii-map"></div>
	</div>

	<script>
	function initMaps() {
	const mainMap = new google.maps.Map(document.getElementById('main-map'), {
	center: {lat: 39.8283, lng: -98.5795},
	zoom: 4,
	mapTypeId: 'terrain'
	});

	const hawaiiMap = new google.maps.Map(document.getElementById('hawaii-map'), {
	center: {lat: 21.3069, lng: -157.8583},
	zoom: 6,
	mapTypeId: 'terrain'
	});

	// Example: Adding a marker for a member city
	const newYork = {lat: 40.7128, lng: -74.0060};
	new google.maps.Marker({
	position: newYork,
	map: mainMap,
	title: 'New York City'
	});

	// Example: Adding a marker for Honolulu
	const honolulu = {lat: 21.3069, lng: -157.8583};
	new google.maps.Marker({
	position: honolulu,
	map: hawaiiMap,
	title: 'Honolulu'
	});
	}

	google.maps.event.addDomListener(window, 'load', initMaps);
	</script>
	</body>
	</html>