Map Simple

by Wolf

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

CSS

/* 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;
}

JavaScript

var map;
		var mapOptions={
			styles: [
					 {
						elementType: 'labels',
						stylers: [
							{ visibility: 'off' }
						]				         
					 },
					 {
						 featureType: "poi",
						 elementType: "labels",
						 stylers: [
								   { visibility: "off" }
							 ]
					 },{
						 featureType: "road.highway",
						 elementType: "geometry.fill",
						 stylers: [
								   { color: '#FFFFFF' }
							 ]				        	 
					 }
				]				
		};
		
		// Constructor
		function CustomOverlay(map) {
			this.setMap(map);
		}	
		
		function initMap() {
			map = new google.maps.Map(document.getElementById('map'), mapOptions);

			//-- Begin -- Setting MapLabels in front of added GeoJson and Kml layers
			var customOverlay;
			CustomOverlay.prototype = new google.maps.OverlayView();
			customOverlay = new CustomOverlay(map);

			CustomOverlay.prototype.onAdd = function() {
				var panes = this.getPanes();    
				panes.overlayLayer.style['zIndex'] = 99; // Magic # based on experimentation
			}

			CustomOverlay.prototype.draw = function() {
				// NOOP
				// The overlay is just a container, we are not adding any custom
				// graphics/text onto it.
			}  		

			// Top layer with everything off but labels
			var labelsLayer = [
				{
					elementType: 'geometry',
					stylers: [
						{ visibility: 'on' }
					]
				},
				{
					elementType: 'labels',
					stylers: [
						{ visibility: 'on' }
					]
				},
				 {
					 featureType: "poi",
					 elementType: "labels",
					 stylers: [
					   { visibility: "off" }
					 ]
				 }            
			];	


			var labelsType = new google.maps.StyledMapType(labelsLayer, { name: 'labels' });
			map.overlayMapTypes.push(labelsType); 		

			//-- End -- 

			var ctaLayer = new google.maps.KmlLayer({
				url: 'http://trafikkort.vejdirektoratet.dk/kml/heavy-truck-network.kmz',
				map: map
			});		
		}