Die Karte als Popup

From OpenStreetMap Wiki
Jump to: navigation, search
Einleitung   Vorbereitung   HTML-Datei   CSS-Datei   JavaScript-Datei   Karte-als-Popup   eigene Kosmos-Karte online stellen    
Die OSM Karte als Popup

Wenn man ein gültiges XHTML-Dokument erstellen möchte, sind Popups nicht zulässig. Dennoch ist es manchmal wünschenswert, dass sich eine Karte in einem neuen Fenster öffnet. Dazu kann man JavaScript benutzen.


JavaScript-Datei

Diesen JavaScript Code kopieren und als popup.js abspeichern:

function myPopUp( url, breite, hoehe ) {
    // mittig setzen
    var leftPos = ( screen.width ) ? ( screen.width - breite ) / 2 : 0;
    var topPos = ( screen.height ) ? ( screen.height - hoehe ) / 2 : 0;

    // eigenschaften
    var propertys = "width=" + breite + ", height=" + hoehe + ", left=" + leftPos + ", 
    top=" + topPos + " toolbar=0, personalbar=0, menubar=0, scrollbars=0, resizable=0, status=0 ";

    // das popup ausführen
    var myWin = window.open( url, "myPopUp", propertys );

    // und es in den vordergrund holen
    if ( myWin ) {
        myWin.focus();
        }
    }

Link zur JavaScript-Datei setzen

Diese Code-Zeile wird in der HTML-Datei im <head>-Bereich eingefügt:

<script type="text/javascript" src="popup.js"></script>

Link zur Karte setzen

Diese Code-Zeile wird in der HTML-Datei im <body>-Bereich eingefügt:

<a class="map" href="map.htm" onclick="myPopUp( this.href, 800, 600; return( false );">Karte</a>

Pfad und Dateiname für die HTML-Dateien ggf. anpassen: "../Pfadname/Dateiname.htm"

Die beiden Zahlen 800 und 600 setzen die jeweilige Größe des Popups, gemessen in Pixeln.