Navigieren auf Geoportal Kanton Zug

Inhaltsnavigation auf dieser Seite

Navigation

Embedded ZugMap

Technische Erläuterung zum Einbetten des MapControls "embedded ZugMap" in eine HTML-Seite

Embedded ZugMap ist ein MapControl, das in jede beliebige Webseite einbettbar ist.
Hinweis: Embedded ZugMap funktioniert nur über den Aufruf mit http://

Beispielseite des embedded ZugMap.

Beispielanwendung im Internetauftritt des Kantons Zug: Online-Formular "Gesuch um Bewilligung für den Bau von Erdsonden"

Einbindung des MapControl in eine HTML-Seite

  1. Kopieren des Ordners „MapControl“ in das Verzeichnis der HTML-Seite. Im HTML-Head der Seite müssen die folgenden JavaScript- und CSS-Dateien integriert werden:

    <script type="text/javascript" src='http://maps.google.com/maps?file=api&v=2&sensor=false&v=2&key=ABQIAAAA2DRYWU7nrGGPxVw4fJ4W4RRmcxDgYeoj028UBWSEdZiTr6dT2RRk7c6TU3H5UKn6Jz8rvhfkVQqpHQ'>"></script>
    <script type="text/javascript" src="https://maps.zg.ch/embeddedZugMap/MapControl/OpenLayers/OpenLayers.js">
    <script type="text/javascript" src="https://maps.zg.ch.ch/embeddedZugMap/MapControl/MapControl.js">
    <link rel="stylesheet" href=https://maps.zg.ch.ch/embeddedZugMap/MapControl/MapControl.css type="text/css" />

    Hinweis: Zur Verwendung von Layern von Google Maps auf einem Server, muss von Google ein Key bezogen werden  http://code.google.com/apis/maps/signup.html

  2. An der gewünschten Stelle in der HTML-Seite muss ein DIV-Container eingefügt werden, in welchem das MapControl angezeigt werden soll (dem DIV-Element muss zwingend eine ID zugewiesen werden). Die Style-Eigenschaften (Höhe, Breite etc.) können beliebig definiert werden.

    <div id="map" style="width:550;height:380;border: solid 1pxblack;overflow:hidden;"> </div>


     
  3. Instanzierung des MapControls mittels JavaScript mit dem onload-Event der HTML-Seite. Der init-Funktion muss die ID des DIV-Containers als Parameter übergeben werden.

    <body onload="MapControl.init(‚<id des DIV-Elements‘)">

Beispieldatei MapControl

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src='http://maps.google.com/maps?file=api&v=2&sensor=false&v=2&key=ABQIAAAA2DRYWU7nrGGPxVw4fJ4W4RRmcxDgYeoj028UBWSEdZiTr6dT2RRk7c6TU3H5UKn6Jz8rvhfkVQqpHQ'>"></script>
<script type="text/javascript" src="https://maps.zg.ch/embeddedZugMap/MapControl/OpenLayers/OpenLayers.js">
<script type="text/javascript" src="https://maps.zg.ch/embeddedZugMap/MapControl/MapControl.js">
<link rel="stylesheet" href="https://maps.zg.ch/embeddedZugMap/MapControl/MapControl.css" type="text/css" />

</head>

<body onload="initMap()">

<div id="map" style="width:550;height:380;border: solid 1px black;overflow:hidden;"> </div>
<script>

function initMap() {

MapControl.init('map');
//optionaler Aufruf zur Addresslokalisierung
MapControl.getAddressLocation("Aabachstrasse", "5", "Zug");

}

</script>

</body>

</head>

</html>

Beispielbild
Bild Legende:
In einer HTML-Seite eingebettetes MapControl

Verwendung der Addresssuche

Eine Adresse kann über das MapControl-Objekt über die Methode getAddressLocation lokalisiert werden.

MapControl.getAddressLocation("Bahnhofstrasse", "21", "Zug");

Wenn die angegebene Adresse gefunden wird, zoomt die Karte zur Adresse und stellt einen Marker an der entsprechenden Position dar.
Wenn die angegeben Adresse nicht gefunden wird, erscheint eine Fehlermeldung.

Weitere Informationen

Fusszeile