• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Transparentes png über iFrame, iFrame soll bedienbar bleiben

D

Descan

Neues Mitglied
Hallo Zusammen,

mein Problem sieht folgendermaßen aus:

Ich will einen google-maps-Ausschnitt auf meiner Homepage einbinden.
Allerdings nicht in der üblichen Rechteck-Form sondern verschönert mithilfe eines transparenten pngs.

Ich habe mir das ganze mal zusammengebastelt.

So sieht es im Moment aus:
iframe-png.jpg

Da nun das div des transparenten png's (mittels Z-Index) über dem div des iframes von google-maps liegt kann ich das iFrame nichtmehr bedienen,
da ich beim klicken auf die Karte immer das darüberliegende png auswähle.

Habt ihr eine Idee wie ich das iFrame trotz überlagertem png bedienen kann?

Viele Grüße und Danke im Vorraus,
Descan
 
Zuletzt bearbeitet:
Hallo,

du musst wohl die Navigation von aussen über Links nachbauen. Evtl. mit Javascript.
Siehe auch die Hilfe zu Google Maps.
Alternativ kannst du auch Bilder von OpenStreetMap nehmen und dann immer einen grösseren Ausschnit laden. Es gibt auch zu Openstreetmap eine API. Einfach mal die Hilfe dazu durchlsesen was machbar ist.

Der Kreisrunde Ausschnitt lässt sich wohl nicht anders lösen. CSS3 Attribut Border-Radius funktioniert hier auf das Iframe leider auch nicht.
 
Vielen Dank erstmal für deine sehr nette und kompetente Hilfe.

Ich habs jetzt vorrübergehend mal so gelöst dass ich beim hovern über den "Überlagerungs-div" dessen Z-Index unter den Z-Index des Karten-divs setzte um die Google-maps Karte hervorzuholen.

Natürlich ist das nicht sehr ansehnlich, da ich so doch wieder auf den rechteckigen Kartenausschnitt zurückgreifen muss (aber eben nur zum Bedienen der Karte).
Ich hoffe ich komme mit den alternativen Navigationsbuttons per Javascript weiter. Das ist eine gute Idee.
Werd mich da aber natürlich erstmal reinlesen müssen.
Vielleicht schreib ich nochmal wenn ich mir was zusammengebastelt habe und es dich interessiert.

Grüße Descan
 
Spar dir die Mühe das geht nicht. Ein Transparentes Bild ist auch ein Bild, d.h. du kannst so wie du dir das vorstellst, das iframe nicht bedienbar machen. Denn es geht ja nicht um ein paar Buttons, sondern um die komplette Karte von google. Und dort werden keine Events mehr ankommen, wenn du ein Bild darüber legst.
 
Wenn er ein Bild, transparent oder nicht über das Iframe mit der Karte legt ist die Karte verdeckt, optisch kommt er da nicht ran mit der Maus um die Navigation zu bediene, das ist klar. Aber er kann ja daneben eine Navi hinhauen und dann mit Javascript auf die API der Karte von Google im Iframe zugreifen oder geht das nicht?
 
Wustersoss schrieb:
Wenn er ein Bild, transparent oder nicht über das Iframe mit der Karte legt ist die Karte verdeckt, optisch kommt er da nicht ran mit der Maus um die Navigation zu bediene, das ist klar. Aber er kann ja daneben eine Navi hinhauen und dann mit Javascript auf die API der Karte von Google im Iframe zugreifen oder geht das nicht?
Zum Vergrößern anklicken....
Ich weiß nicht, ob du schon mal eine Karte bei google bedient hast? Du musst doch die komplette Karte bedienen, nicht nur irgendwelche Optionen.
 
Ich weiß nicht, ob du schon mal eine Karte bei google bedient hast?
Zum Vergrößern anklicken....
Denke schon.

Du musst doch die komplette Karte bedienen, nicht nur irgendwelche Optionen.
Zum Vergrößern anklicken....
hm, eigentlich muss ich nur die Koordinaten im Link oder GET-Parameter ändern.

Schau dir mal folgende links an, 1 mal gezoomt, 1 mal nach rechts und dann wieder gezoomt:
Diese Parameter kann ich doch mit Javascript und Target ans Iframe übergeben, oder muss ich das erst als Beispiel coden, verstehe jetzt das Problem nicht.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?client=opera&amp;q=kitzingen&amp;oe=utf-8&amp;channel=suggest&amp;ie=UTF8&amp;hq=&amp;hnear=Kitzingen,+Unterfranken,+Bayern,+Deutschland&amp;ll=49.73408,10.147378&amp;spn=0.067569,0.154324&amp;t=h&amp;z=13&amp;vpsrc=6&amp;output=embed"></iframe>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?client=opera&amp;q=kitzingen&amp;oe=utf-8&amp;channel=suggest&amp;ie=UTF8&amp;hq=&amp;hnear=Kitzingen,+Unterfranken,+Bayern,+Deutschland&amp;ll=49.73408,10.147378&amp;spn=0.033785,0.077162&amp;t=h&amp;z=14&amp;vpsrc=6&amp;output=embed"></iframe>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?client=opera&amp;q=kitzingen&amp;oe=utf-8&amp;channel=suggest&amp;ie=UTF8&amp;hq=&amp;hnear=Kitzingen,+Unterfranken,+Bayern,+Deutschland&amp;ll=49.73408,10.147378&amp;spn=0.033785,0.077162&amp;t=h&amp;z=14&amp;vpsrc=6&amp;output=embed"></iframe>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?client=opera&amp;q=kitzingen&amp;oe=utf-8&amp;channel=suggest&amp;ie=UTF8&amp;hq=&amp;hnear=Kitzingen,+Unterfranken,+Bayern,+Deutschland&amp;t=h&amp;vpsrc=6&amp;ll=49.73552,10.161324&amp;spn=0.019416,0.036478&amp;z=15&amp;iwloc=A&amp;output=embed"></iframe>
 
Das hat aber doch nicht mit der Bedienung von google maps zu tun. Die Parameter steuern ja nur die Anzeige, die Initial dargestellt wird.
 
Also wenn du eine Karte von deinem Betrieb als Iframe auf deine Webseite einfügst um Leuten zu zeigen wo der Betrieb ist, welche Funktionalität muss dann die Karte haben ausser Zoom und den Kompass für die Richtungsverschiebung der Karte. Mehr geht auf solchen Karten normalerweise sowieso nicht. Für den Rest musst du dann eh Google-Maps aufrufen.

Kann ja sein das wir irgendwie aneinander vorbeireden, aber das ist doch was er einbauen will. Er wollte nur den Ausschnitt kreisrund haben anstatt viereckig.
 
Ach so, ich habe noch nie den Kompass benutzt um die Richtung zu verschieben, ich wußte gar icht das es eine solche Funktion gibt. Ich mache alles mit klicks und Drag&Drop.

Wobei aber, das ganze sowieso nicht geht, wenn der iframe direkt von google-maps kommt, dann greift die SOP.
 
Was ist denn SOP?
Bist du also der Meinung dass man das gar nicht umsetzen kann? Ich habe das jetzt nicht getestet, nur die Links gehen halt, und wenn Links gehen mit Get-Parameter dann geht das doch das man die Parameter mit Javascript beeinflusst, oder bin ich da jetzt auf dem Holzweg. Wie gesagt, ich brauchte das noch nie mit Googlemaps. Ist also alles erst mal nur theoretischer Ansatz.
 
Wustersoss schrieb:
Was ist denn SOP?
Bist du also der Meinung dass man das gar nicht umsetzen kann? Ich habe das jetzt nicht getestet, nur die Links gehen halt, und wenn Links gehen mit Get-Parameter dann geht das doch das man die Parameter mit Javascript beeinflusst, oder bin ich da jetzt auf dem Holzweg. Wie gesagt, ich brauchte das noch nie mit Googlemaps. Ist also alles erst mal nur theoretischer Ansatz.
Zum Vergrößern anklicken....

Same-Origin-Policy
 
Schau dir mal die Google Maps API an. Damit kannst Du die GoogleMaps direkt in deine Seite einbinden statt per iframe. Vorteil: mehr Gestaltungsfreiheit.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben