Maps als Popup

[Niclas D.]

Hallo Leute,
ich bin´s mal wieder. Ich will für meine Seite einen Button einfügen ( an sich ja nicht schwer) Nur wenn man drauf klickt soll sich Maps öffnen. Aber nicht in einem anderen Tab sondern in dem Tab als etwas kleineres Popup.
Ich hab es erst mit einemNormalen IMG Popup versucht aber das hat logischerweise nicht geklappt .
Ich habe ein bisschen gegoogelt und das gefunden http://dimsemenov.com/plugins/magnific-popup/ Das ist genau das was ich gesucht habe. Nur kriege ich es nicht eingefügt...


Vielleicht könntet ihr mir helfen.

mfG Niclas

 

[Sempervivum]

Bist Du entsprechend der Doku bzw. dem Beispiel vorgegangen? Wenn ja, dann poste doch mal die Adresse deiner Seite, damit man es sich ansehen kann.

 

[Niclas D.]

Ich habs mal eben hochgeladen http://home.dein-clan.bplaced.de/TEst/Index.html

 

[Sempervivum]

Das sieht ja nicht so gut aus. Schau dir erstmal die Doku und den Quelltext der Beispiele an. Für Google Maps musst Du {type: 'iframe'} als Parameter angeben.

 

[Niclas D.]

Ich bin ja noch ein Anfänger aber ich habe den type:'iframe' schon angegeben oder?

 

[Sempervivum]

Nein, leider nicht. Sieh dir in der Doku die Abschnitte "Including files" und "Initializing popup" an.

 

[Niclas D.]

Ok stimmt Including files habe ich jetzt gemacht und müsste soweit auch stimmen was muss ich bei "Initializing Popup" machen?

 

[Sempervivum]

Das einfügen, was unter "1. From an HTML element" steht und type: iframe verwenden. Im a-Tag die URL von Google Maps einsetzen.

 

[Niclas D.]

Geht immernoch nicht ich mache immer grobe dumme Fehler soll ich mal mein script posten?

 

[Sempervivum]

In deinem Javascript muss Du dieselbe Klasse nehmen wie in deinem a-Tag:

$(document).ready(function() {
    $('.test-popup-link').magnificPopup({type: 'iframe'});
});

Und weil Du das Javascript vor der Definition des a-Tags einbindest, musst Du $(document).ready(... verwenden.
Wenn Du die Dateien immer hochlädst, brauchst Du das Skript nicht zu posten.
Edit: jQuery bitte nur einmal einbinden.

 

[Niclas D.]

Habs jetzt nur einmal eingebunden und hab auch in ready geändert aber es geht immernoch nicht.

 

[Sempervivum]

Du musst jQuery und das Plugin vor deinem Skript einbinden:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.js"></script>
<script type="text/javascript" src="Javascript.js"></script>

 

[Niclas D.]

Ohh siehste solche Fehler meine ich. DANKE hast mir echt geholfen :)