• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Script für Kartenlayer

hoddel

New member
Ich nutze seit 2 Jahren eine Kartenansicht von Google, wo ich norwegische Karten mit einem Script drüber gelegt habe. Das klappte auch ganz gut, bis heute.

Ich habe mir im September den API Schlüssel für die Version V3 von Google geholt und in den Script eingefügt.

Kann es sein, dass das Script selbst nicht für die V3 geeignet ist?

Code:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Karte angeln in der Åna-Sira</title>
<meta name="keywords" content="angeln, Süßwasser, Åna-Sira, Karte, Südnorwegen, Landkarte">
<meta name="description" content="Sehr genaue Karte vom Angelsee Åna-Sira">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=******************************************************&&sensor=false"
type="text/javascript"></script>

</head>
<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: 12,
center: new google.maps.LatLng(58.28542, 6.41819),
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("Seekarte", "sjo_hovedkart2"));
map.mapTypes.set('kartdata2',new StatkartMapType("Kartdata 2", "kartdata2"));
map.mapTypes.set('topo2',new StatkartMapType("Landkarte", "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(58.28542, 6.41819),
map: map
});

}

</script>
<title>Norwegische Karte</title>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:600px; height:600px"></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>

Entschuldigung, wenn ich den einen oder anderen Begriff nicht richtig drauf habe. Dieses Script habe ich auch nur nach dem Motto: "Learning bei error" zusammen bekommen. Deswegen frage ich auch hier in meiner Hilflosigkeit. Momentan sehe ich den Wald vor lauter Bäumen nicht.

Wäre wirklich nett, wenn mir jemand helfen könnte.

Gruß
Horst
 
Zuletzt bearbeitet:
Das Script sieht nicht ganz falsch aus. Hast du mal in die Google Doku geschaut?

Ich hab auch irgendwo mal gelesen, dass man den API Key in V 3 nicht mehr braucht.
 
Na ja, wenn man den Key für die V3 nicht mehr braucht, warum die Fehlermeldung, auch wenn ich den Key raus genommen habe?

Meine Seiten "leben" von den Karten, denn nur mit den Karten bekommt man alle Details zu sehen. Man kann auch noch die Kartendarstellungen wechseln. Hab da lange dran gesessen. Wenn das alles auf einmal weg ist.........

In der Dokumentation habe ich nichts gefunden, was wirklich etwas aussagt. Außerdem ist das auch kein Plugin für Joomla, wo das nicht nötig ist. Ich habe das auf den Seiten mit Iframe eingefügt.

Alles Handarbeit. :icon7:


Gruß
Horst
 
Also wenn ich deinen Code ausführe, sehe ich da eine Karte... woran sieht man genau, dass das nicht funktioniert.

PS: Ich bekomme folgendes in der Konsole: "Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors."
 
fehler.JPG

Diese Meldung hatte ich bekommen.

Jetzt laufen die Karten wieder. Egal ob mit oder ohne API - Schlüssel

Agnefest

Genau das ist es, was mich nachdenklich macht. Zumal es einen Fehler im API-Schlüssel gibt, den ich im Herbst bei allen Scripten versehentlich einkopiert habe. Es lief die ganze Zeit reibungslos. Deswegen dachte ich, dass das Script jetzt für die Version V3 Fehler hat.

Ich habe mir jetzt einen neuen API Schlüssel geholt und ändere das in allen Karten. Die Karten sind an meine Domain gebunden.

Gruß
Horst
 
Das wäre gelöst, wenn das Script keine Fehler für die API Version V3 hat.

Genau das ist es, was mir Falten auf die Stirn bringt.

Ich ändere z.Zt. alle Scripte auf den neuen Schlüssel. Sind so runde 900 Scripte. Nur wenn da ein Fehler drin ist und Google haut mir das wieder um die Ohren, dann stehe ich absolut auf dem Schlauch.

So sieht das nach der Änderung aus:

Code:
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Karte von Austad.</title>
<meta name="keywords" content="Austad, Rosfjord, Karte, Südnorwegen, Landkarte">
<meta name="description" content="Sehr genaue Karte von Austad am Rosfjord.">
<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=******************************************&sensor=false"></script>
</head>
<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: 13,
center: new google.maps.LatLng(58.090, 7.044),
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("Seekarte", "sjo_hovedkart2"));
map.mapTypes.set('kartdata2',new StatkartMapType("Kartdata 2", "kartdata2"));
map.mapTypes.set('topo2',new StatkartMapType("Landkarte", "topo2"));
map.mapTypes.set('topo2graatone',new StatkartMapType("Grauton", "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(58.090, 7.044),
map: map
});

}

</script>
<title>Norwegische Landkarte</title>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:800px; height:800px"></div>
  <div style="width:400px;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>
<p><font face="Verdana" size="2">Mit Genehmigung von 
<a target="_blank" href="http://www.kartverket.no/">Statens Kartverk</a></font></p>
<br>
<br><font face="Verdana" size="2"><b><a href onClick="javascript:window.print()"> Karte drucken <img border="0" src="printButton.png" width="15" height="13">
 </a></b></font>
	<p><font face="Verdana" size="1"><span style="color:#ff0000;"><strong>
	Achtung beim Ausdrucken: Drucker im Browser so einstellen, dass er auch den Hintergrund 
	druckt, sonst ist das Blatt recht leer.</strong></span></font></p>

</body>


</html>

Bei der Gelegenheit habe ich das noch etwas erweitert. Viele haben mit dem Ausdruck Schwierigkeiten, weil das als Iframe eingebunden ist.

Gruß
Horst
 
Zuletzt bearbeitet:
Wenn's funktioniert (und das tut's bei mir) ist doch alles in Butter...

PS: willst du wirklich deinen Google-Maps Key hier in einem öffentlichen Forum präsentieren?
PPS: du solltest dir dringend einen gescheiten Codestil angewöhnen. Ohne Einrückung ist sowas extrem schwer zu lesen und zu warten.
 
Danke für den Hinweis, habe das eben geändert.
Google hatte mich mit der Fehlermeldung, die 24 Stunden bei mir erschien, sehr verunsichert. Da eine Änderung des API-Key auch nichts brachte, habe ich das hier eingestellt, weil evtl. das Script nicht mit der V3 Version kompatibel ist.
Warum Google die Karten wieder freigegeben hat, wird wohl nicht zu ergründen sein. Ich ändere z.Zt. alle API-keys auf die aktuelle Version, um sicher zu gehen, dass deswegen nicht noch einmal so ein Fehler auftritt.

PPS: du solltest dir dringend einen gescheiten Codestil angewöhnen. Ohne Einrückung ist sowas extrem schwer zu lesen und zu warten.

Da hast du völlig Recht. Das gesamte Script habe ich in mühevoller "Bastelei" zusammen gestrickt. Ich habe das nicht gelernt (learning by error). Ich werde das Script für neue Karten entsprechend umstellen.

Vielen Dank für die Antworten, die ich hier bekommen habe.

Gruß
Horst
 
Da hast du völlig Recht. Das gesamte Script habe ich in mühevoller "Bastelei" zusammen gestrickt. Ich habe das nicht gelernt (learning by error). Ich werde das Script für neue Karten entsprechend umstellen.

Es gibt das recht gute Werkzeuge, die einem beim Aufhübschen helfen können. Z.B. Online JavaScript beautifier
Dann muss man bei bestehendem Code nicht alles per Hand machen.
Vielen Dank für die Antworten, die ich hier bekommen habe.
Bitte - gern geschehen.
 
Die Karten laufen einwandfrei. Ich habe die jetzt auch für Smartphone aktualisiert.
Das was mir einfach nicht gelingt ist, den festen Marker in einen Marker zu tauschen, der mir auf dem Smartphone meinen Standort anzeigt.

Dieses Script habe ich am Laufen:

HTML:
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Karte von Åna-Sira</title>
<meta name="keywords" 
content="Åna-Sira, Ana-Sira, Karte, Südnorwegen, Landkarte">
<meta name="description" content="Sehr genaue Karte von Åna-Sira.">
<script type="text/javascript" 
src="http://maps.googleapis.com/maps/api/js?v=3key=AIzaSyAuU64HL-OklbGduAw8YrsLU4J8hxIOOaE&sensor=true"></script>
<meta name="viewport" 
content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>

<body>

<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: https://developers.google.com/maps/documentation/javascript/basics?hl=de-->
<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: 13,
center: new google.maps.LatLng(58.291, 6.43969),
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("Seekarte", "sjo_hovedkart2"));
map.mapTypes.set('kartdata2',new StatkartMapType("Kartdata 2", "kartdata2"));
map.mapTypes.set('topo2',new StatkartMapType("Landkarte", "topo2"));
map.mapTypes.set('topo2graatone',new StatkartMapType("Grauton", "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(58.291, 6.43969),
map: map
});

}

</script>
<title>Norwegische Landkarte</title>
<body onload="initialize()">

<div id="map_canvas" style="width:99%; height:900px">
</div>
<div style="width:700px;text-align:left">
	<font face="Arial" size="3"><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></font></div>
<p><font face="Verdana" size="3">Mit Genehmigung von <a target="_blank" 
href="http://www.kartverket.no/">Statens Kartverk</a></font></p>
<font face="Verdana" size="3"><br>
<br>
<b><a href onclick="javascript:window.print()">Karte drucken <img border="0" 
src="printButton.png" width="15" height="13"> </a></b></font>
<p><font face="Verdana" size="3"><span style="color:#ff0000;"><strong>Achtung beim 
Ausdrucken: Drucker im Browser so einstellen, dass er auch den Hintergrund druckt, 
sonst ist das Blatt recht leer.</strong></span></font></p>
<p> </p>
<script type="text/javascript"><!--
google_ad_client = "pub-3214004593630554";
/* bild als banner */
google_ad_slot = "0675768533";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript" 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</body>

</body>

</html>

Dieses Skript für die Standortanzeige möchte ich für den festen Marker einsetzen:

HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<title>HTML5 Geolocation Beispiel</title>
</head>
 
<body>
<div id="pos">
Deine Position wird ermittelt...
</div>
<script>
navigator.geolocation.getCurrentPosition(function(position){
document.getElementById('pos').innerHTML = 'Latitude: '+position.coords.latitude+' / Longitude: '+position.coords.longitude;
}, function(){
document.getElementById('pos').innerHTML = 'Deine Position konnte leider nicht ermittelt werden';
});
</script>
</body>
</html>

Ich bastle da schon eine ganze Weile dran, es gelingt mir einfach nicht.

Hat jemand eine Idee?
 
2. Antwort, die erste wurde nicht angezeigt.:confused:

Die Karten laufen gut. Ich habe stelle die gerade für die Smartphoneansicht um.
Einige Karten möchte ich noch erweitern.
Hier soll der Standort des Nutzers angezeigt werden. Also keinen festen Marker, wie ich es z.Zt. habe.

Mein Script sieht jetzt so aus:

HTML:
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Karte von Åna-Sira</title>
<meta name="keywords" 
content="Åna-Sira, Ana-Sira, Karte, Südnorwegen, Landkarte">
<meta name="description" content="Sehr genaue Karte von Åna-Sira.">
<script type="text/javascript" 
src="http://maps.googleapis.com/maps/api/js?v=3key=AIzaSyAuU64HL-OklbGduAw8YrsLU4J8hxIOOaE&sensor=true"></script>
<meta name="viewport" 
content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>

<body>

<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: https://developers.google.com/maps/documentation/javascript/basics?hl=de-->
<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: 13,
center: new google.maps.LatLng(58.291, 6.43969),
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("Seekarte", "sjo_hovedkart2"));
map.mapTypes.set('kartdata2',new StatkartMapType("Kartdata 2", "kartdata2"));
map.mapTypes.set('topo2',new StatkartMapType("Landkarte", "topo2"));
map.mapTypes.set('topo2graatone',new StatkartMapType("Grauton", "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(58.291, 6.43969),
map: map
});

}

</script>
<title>Norwegische Landkarte</title>
<body onload="initialize()">

<div id="map_canvas" style="width:99%; height:900px">
</div>
<div style="width:700px;text-align:left">
	<font face="Arial" size="3"><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></font></div>
<p><font face="Verdana" size="3">Mit Genehmigung von <a target="_blank" 
href="http://www.kartverket.no/">Statens Kartverk</a></font></p>
<font face="Verdana" size="3"><br>
<br>
<b><a href onclick="javascript:window.print()">Karte drucken <img border="0" 
src="printButton.png" width="15" height="13"> </a></b></font>
<p><font face="Verdana" size="3"><span style="color:#ff0000;"><strong>Achtung beim 
Ausdrucken: Drucker im Browser so einstellen, dass er auch den Hintergrund druckt, 
sonst ist das Blatt recht leer.</strong></span></font></p>
<p> </p>
<script type="text/javascript"><!--
google_ad_client = "pub-3214004593630554";
/* bild als banner */
google_ad_slot = "0675768533";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript" 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</body>

</body>

</html>

Dieses Script möchte ich einbinden und den festen Marker entfernen:

HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<title>HTML5 Geolocation Beispiel</title>
</head>
 
<body>
<div id="pos">
Deine Position wird ermittelt...
</div>
<script>
navigator.geolocation.getCurrentPosition(function(position){
document.getElementById('pos').innerHTML = 'Latitude: '+position.coords.latitude+' / Longitude: '+position.coords.longitude;
}, function(){
document.getElementById('pos').innerHTML = 'Deine Position konnte leider nicht ermittelt werden';
});
</script>
</body>
</html>

Ich habe schon sehr lange daran gebastelt. Mir fehlt aber leider einiges an Wissen, deswegen scheitere ich.

Hat jemand eine Idee?

Gruß
Horst
 
Zurück
Oben