maba

Marker und Infowindow in Google Maps API

Recommended Posts

Liebe Community
 
Kennt sich hier jemand mit der Google Maps API aus?
Auf meiner Website habe ich eine Karte mit vielen Markern. Nun überdeckt das Infowindow meinen Marker. Ich möchte gerne, dass das Fenster über dem Marker angezeigt wird.
lch habe schon versucht dan Anchorpoint zu verschieben. Leider habe ich bis jetzt keine Lösung gefunden. Wahrscheinlich kenne ich mich mit der Materie auch einfach zu wenig aus...
Ich bin für jeden Hinweis dankbar.
 
Beste Grüsse
Markus

Share this post


Link to post
Share on other sites

Hi Markus,

willst du sie wirklich bei mouseover öffnen? Ich fand das gerade unheimlich lästig, weil jede Mausbewegung neue Fensterchen öffnet.

Das müsse man kurz analysieren, woran das liegt, meiner Meinung nach ist das Verhalten, das du dir wünschst, eigentlich der Standard.

Ich habe gerade wenig Zeit, sonst würde ich gerne helfen. Evtl. schaffe ich es später.

Matthes

Share this post


Link to post
Share on other sites
Vor 5 Stunden, maba said:

Ich bin für jeden Hinweis dankbar.

Ich find die Maus over besser als die Marker. Die Seite ist schon ein wenig älter und auch 2017 waren Alt tags schon eine Hilfe für nicht so gut sehende.  

Share this post


Link to post
Share on other sites
22 minutes ago, arnego2 said:

Ich find die Maus over besser als die Marker.

Die gehören doch zusammen...? Das eine ist ein Effekt, das andere eine Grafik. Was meinst du?

Wenn man mit der Maus über den Marker geht, kommt das Overlay. Für den Benutzer freundlicher ist es, wenn man klicken muss, weil sonst die Daten ja alle Marker nördlich überlagern.

Was er will, ist, dass das Overlay nicht an der Spitze des Markers positioniert wird, sondern oben am Rand.

Share this post


Link to post
Share on other sites

ich hab jetzt nur mal auf die schnelle den quelltext überflogen. der layer ist absolute positioniert. wenn du an die klasse  " .gm-style-iw .gm-style-iw-c" drankommst, musst du nur top:0; durch "top: -30px" ersetzen. dann noch die klasse für das kleine weisse dreieck finden und das ebenfalls um 30px verschieben. dann steht das dingen über dem marker.

  • Thanks 2

Share this post


Link to post
Share on other sites

Das ist eine passable Lösung.

Sollte meiner Meinung nach aber nicht nötig sein, der Fehler scheint an anderer Stelle zu passieren, dass die Overlays oberhalb des Markers sind ist eigentlich Standard.

Aber mit dem Workaround kann das klappen.

Share this post


Link to post
Share on other sites

Danke schon Mal für eure Bemühungen.

1 hour ago, wurzel said:

wenn du an die klasse  " .gm-style-iw .gm-style-iw-c" drankommst, musst du nur top:0; durch "top: -30px" ersetzen.

Und wie komme ich an die Klasse?

Es kann sein, dass das ganze Konstrukt etwas "komisch" ist. Soweit ich mich erinnere, kam das, weil ich immer nur ein Fenster geöffnet haben will. Somit musste ich das Infowindow mit dem Marker verbinden. Vielleicht gibt es ja allgemein einfachere Lösungen...

Share this post


Link to post
Share on other sites
1 hour ago, maba said:

Soweit ich mich erinnere, kam das, weil ich immer nur ein Fenster geöffnet haben will.

Du kannst bei jedem Klick auch alle anderen schließen... So wäre immer nur eines offen.

1 hour ago, maba said:

Somit musste ich das Infowindow mit dem Marker verbinden.

Das ist eh miteinander verbunden, prinzipiell ist das korrekt so.

Share this post


Link to post
Share on other sites

Ich glaube, es könnte daran liegen:

function meinFenster (mymarker) {
		infowindow.close();
		infowindow.setPosition(mymarker.getPosition());
		infowindow.setContent(mymarker.meinContent);
		infowindow.open(map);
	}

Mit set.Position() und get.Position() wird ja die Koordinate vom Punkt definiert.

Weiss jemand, wie man dies umgehen kann? Ich glaube der Ort vom Fenster muss wegen der Funktion zwingend definiert werden.

Oder wie die Angabe ausgelesen und um einen Lat-Wert korrigiert werden kann. So dass dann der definierte Punkt über dem Marker liegt. Wobei dies wahrscheinlich mit dem Zoomen nicht funktioniert...

  • Thanks 1

Share this post


Link to post
Share on other sites
56 minutes ago, maba said:

Oder wie die Angabe ausgelesen und um einen Lat-Wert korrigiert werden kann. So dass dann der definierte Punkt über dem Marker liegt. Wobei dies wahrscheinlich mit dem Zoomen nicht funktioniert...

Richtig.

58 minutes ago, maba said:

Weiss jemand, wie man dies umgehen kann? Ich glaube der Ort vom Fenster muss wegen der Funktion zwingend definiert werden.

Du bist auf der richtigen Spur. Lass setPosition weg.

Ich habe gerade echt keine Zeit, das nachzusehen, weiß aber, dass ich infowindow.open(map,marker) aufrufe, also für dich mit infowindow.open(map,mymarker). Welchen Unterschied das macht, müsste man in der Dokumentation nachsehen. Probier einfach mal, setPosition wegzulassen und berichte. 😉

Share this post


Link to post
Share on other sites

Matthes, besten Dank für deine Unterstützung.

Es funktioniert ohne setPosition() und mit dem mymarker-Zusatz.

	function meinFenster (mymarker) {
		infowindow.close();
		infowindow.setContent(mymarker.meinContent);
		infowindow.open(map,mymarker);
	}

 

Share this post


Link to post
Share on other sites

Hervorragend, das freut mich. :)

Ich würde an deiner Stelle trotzdem noch einmal in mich gehen und schauen, ob ich das onmouseover-Event wirklich nutzen möchte. Für jemanden, der nach oben navigieren möchte, ist das Overlay wirklich ein Hindernis, weil es vor den anderen Markern liegt. Nur so als Anregung. Die Klick-Lösung ist für die Informationsdichte vermutlich auch nicht optimal, weil man wenig Chancen hat, sich wirklich zu orientieren... Schwierig. Aber wenn das Problem vorerst gelöst ist, ist es vorerst auch gut.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.