Map JavaScript

The JavaScript for rendering 2 maps

by robertmc

HTML

<head>
		<title>Accessible Map Example</title>
		<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst"></script>
		<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
		<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=[YOUR KEY]]&callback=initMap"></script>
    <style><!-- The CSS styling --</style>
    <script><!-- The script markup below --></script>
</head>

CSS

#mapCluster {
    height: 400px;
    width: 100%;
}

JavaScript

// Initialize and add the map
			    	function initMap() {

			    	// The location of Washington DC
			    	var dc = {lat: 38.893, lng: -77.036};
					
				// The location of Uluru	
				var uluru = {lat: -28.024, lng: 140.887};
					
				var locations = [
					{lat: -31.563910, lng: 147.154312},
					{lat: -33.718234, lng: 150.363181},
					{lat: -33.727111, lng: 150.371124},
					{lat: -33.848588, lng: 151.209834},
					{lat: -33.851702, lng: 151.216968},
					{lat: -34.671264, lng: 150.863657},
					{lat: -35.304724, lng: 148.662905},
					{lat: -36.817685, lng: 175.699196},
					{lat: -36.828611, lng: 175.790222},
					{lat: -37.750000, lng: 145.116667},
					{lat: -37.759859, lng: 145.128708},
					{lat: -37.765015, lng: 145.133858},
					{lat: -37.770104, lng: 145.143299},
					{lat: -37.773700, lng: 145.145187},
					{lat: -37.774785, lng: 145.137978},
					{lat: -37.819616, lng: 144.968119},
					{lat: -38.330766, lng: 144.695692},
					{lat: -39.927193, lng: 175.053218},
					{lat: -41.330162, lng: 174.865694},
					{lat: -42.734358, lng: 147.439506},
					{lat: -42.734358, lng: 147.501315},
					{lat: -42.735258, lng: 147.438000},
					{lat: -43.999792, lng: 170.463352}
			        ]
					
				// Create an array of alphabetical characters used to label the markers.
        			var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

			    	// The map, centered at Washginton DC 
			    	var map = new google.maps.Map(
			    		document.getElementById('map'), {zoom: 10, center: dc});

			    		// The marker, positioned at Washington DC
			    		var marker = new google.maps.Marker({position: dc, map: map}
			    	);
					
			    	// The map, centered at Uluru
			    	var mapCluster = new google.maps.Map(
			    		document.getElementById('mapCluster'), {zoom: 3, center: uluru});
					
					// Add some markers to the map.
					// Note: The code uses the JavaScript Array.prototype.map() method to
					// create an array of markers based on a given "locations" array.
					//...