Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save anderser/332187 to your computer and use it in GitHub Desktop.
Save anderser/332187 to your computer and use it in GitHub Desktop.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body{font:12px/1.231 arial,helvetica,clean,sans-serif;}
</style>
<!--More info on using custom base layers in Google Maps v3: http://code.google.com/apis/maps/documentation/v3/overlays.html#BaseMapTypes-->
<script type="text/javascript">
function StatkartMapType(name, layer) {
this.layer = layer
this.name = name
this.alt = name
this.tileSize = new google.maps.Size(256,256);
this.maxZoom = 19;
this.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.backgroundImage = "url(http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=" + this.layer + "&zoom=" + zoom + "&x=" + coord.x + "&y=" + coord.y + ")";
return div;
};
}
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(60,9),
mapTypeControlOptions: {
mapTypeIds: ['kartdata2', 'sjo_hovedkart2', 'topo2', 'topo2graatone', 'toporaster2', 'europa'],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.mapTypes.set('sjo_hovedkart2',new StatkartMapType("Sjo hovedkart", "sjo_hovedkart2"));
map.mapTypes.set('kartdata2',new StatkartMapType("Kartdata 2", "kartdata2"));
map.mapTypes.set('topo2',new StatkartMapType("Topografisk", "topo2"));
map.mapTypes.set('topo2graatone',new StatkartMapType("Graatone", "topo2graatone"));
map.mapTypes.set('toporaster2',new StatkartMapType("Toporaster", "toporaster2"));
map.mapTypes.set('europa',new StatkartMapType("Europa", "europa"));
map.setMapTypeId('topo2');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(60, 9),
map: map
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:600px; height:400px"></div>
<div style="width:600px;text-align:right"><a href="http://www.statkart.no">Statens kartverk</a>,
<a href="http://www.statkart.no/nor/Land/Fagomrader/Geovekst/">Geovekst</a> og
<a href="http://www.statkart.no/?module=Articles;action=Article.publicShow;ID=14194">kommuner</a></div>
</body>
</html>
@AndreasHV
Copy link

If I wanted to use this but I want to be able to add and remove markers with an existing google map that I have, what code will I have to add to this source to load that specific google map markers and only show the markers on the sjøkart layer? That way it will be easy for anyone to edit the locations from the out of box solution google allready provide.

@Normappy
Copy link

Normappy commented Nov 28, 2024

Hei - noe håp om tips her om hvordan oppdatere denne koden i forhold til de nye /(2024) cache-tjenestene fra cache.kartverket.no?

@hersle
Copy link

hersle commented Apr 25, 2025

@Normappy Se eventuelt informasjon her/her/her/her. Dette fungerer, for eksempel:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">

body{font:12px/1.231 arial,helvetica,clean,sans-serif;}

</style>

<!--More info on using custom base layers in Google Maps v3: http://code.google.com/apis/maps/documentation/v3/overlays.html#BaseMapTypes-->
<script type="text/javascript">

		  function StatkartMapType(name, layer) {
			  this.layer = layer
			  this.name = name
			  this.alt = name

			  this.tileSize = new google.maps.Size(256,256);
			  this.maxZoom = 19;
			  this.getTile = function(coord, zoom, ownerDocument) {
				    var div = ownerDocument.createElement('DIV');
				    div.style.width = this.tileSize.width + 'px';
				    div.style.height = this.tileSize.height + 'px';
				    div.style.backgroundImage = "url(http://cache.kartverket.no/v1/wmts/1.0.0/" + this.layer + "/default/webmercator/" + zoom + "/" + coord.y + "/" + coord.x + ".png)";
				    return div;
				  };
		  }

		  var map;

		  function initialize() {
		    var layer = 'topo'; // topo, topograatone, toporaster or sjokartraster
		    var mapOptions = {
		      zoom: 8,
		      center: new google.maps.LatLng(60,9),
		      mapTypeControlOptions: {
		        mapTypeIds: [layer],
		        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		      }
		    };
		    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

		    map.mapTypes.set(layer, new StatkartMapType("Kart", layer));
		    
		    map.setMapTypeId(layer);

		    var marker = new google.maps.Marker({
		        position: new google.maps.LatLng(60, 9),
		        map: map
		    });    
		    
		  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:600px; height:400px"></div>
  <div style="width:600px;text-align:right"><a href="http://www.statkart.no">Statens kartverk</a>, 
  <a href="http://www.statkart.no/nor/Land/Fagomrader/Geovekst/">Geovekst</a>  og 
  <a href="http://www.statkart.no/?module=Articles;action=Article.publicShow;ID=14194">kommuner</a></div>  
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment