| Autor |
Nachricht |
chrissowa
Threadersteller
Dabei seit: 08.11.2006
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 01.09.2009 19:24
Titel Google Maps API |
  |
|
Gnabend,
ich bin zz drüber mir eine Karte mit der Google Maps API zu erstellen.
Ziel:
Eigene Karte mit Punkten; wenn man über die Punkte mit der Maus geht öffnet sich die Standartsprechblase mit Inhalt.
Der Inhalt ist der Name des "Objekts" und darunter ein kleines Bild.
Soweit hab ich s geschafft.
Jetzt möchte ich aber wenn man auf den Thumbnail klickt dass sich ein neues Bild öffnet.
Ich sehe zur Zeit drei Wege:
1. Klick aufs Bild: Neuer Tab öffnet sich (vermutlich je nach Browsereinstellung)
Das hab ich bisher gemacht aber es wird der Thumbnail nicht mehr angezeigt, nur noch ein kleiner blauer Streifen.
Vlt kan mal jemand auf einen Blick auf den Code werfen und mir evtl helfen. Wäre nett.
wenn s klappen würde hätte es noch den Nachteil: für jedes Bild im Standardfall neues Tab... Unübersichtlich
2. Alternative: Popup? Geht das? Oder werden Popups eh heutzutage meistens blockiert?
3. Beste Alternative: Das Bild (Thumbnail wird einfach aus dem Inhaltsfenster geschmissen und das große Bild geladen; die Sprechblase passt sich von der Größe her dem Inhalt automatisch an.
Leider hab ich keine Ahnung ob und wie ich das schaffen könnte.... Ich kann leider kein Javascript und hab mir das ganze bisher mit Tutorials zusammengebaut...
So sieht aktuell der Code für die Marker aus....
| Code: |
var point = new GLatLng( 50.234275,13.426548);
var marker = createMarker(point,'BLABLABLAOBJEKTNAME.<br> <a href="RICHTIGERLINKl/bild.jpg" target="_blank"><img scr="thumbnail.jpg" width=200 height=301></a>')
map.addOverlay(marker); |
Zuletzt bearbeitet von m am Di 01.09.2009 19:48, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 01.09.2009 19:49
Titel
|
|
|
| Code: | var point = new GLatLng( 50.234275,13.426548);
var marker = createMarker(point,'BLABLABLAOBJEKTNAME.<br> <a href="RICHTIGERLINKl/bild.jpg" target="_blank" onclick="document.getElementById('bubble_img').src=this.href; return false;"><img scr="thumbnail.jpg" id="bubble_img"></a>')
map.addOverlay(marker); |
Zuletzt bearbeitet von m am Di 01.09.2009 19:51, insgesamt 3-mal bearbeitet
|
|
| |
 |
|
|
Anzeige
|
|
|
chrissowa
Threadersteller
Dabei seit: 08.11.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 01.09.2009 20:46
Titel
|
|
|
Gnabend.
Danke für die schnelle Antwort, aber leider komme ich nich ganz damit zu recht.
Hab aktuell:
| Code: | | var marker = createMarker(point,'BLABLA<br> <a href="http://www.lalala.de/neuesbild.jpg" target="_blank" onclick="document.getElementById('bubble_img').src=this.href; return false;"><img scr="thumnailbild.jpg" id="bubble_img"></a>') |
Allerdings kommt jetzt ne weiße Seite ;D
Könntest du mir kurz erklären wie das ganze was du da schreibst aufgebaut ist und funktioniert?
Rein von den Wörtern her machts eigentlich Sinn, aber ich komm damit nich ganz klar, sorry.
Wenn das funktionieren würde wär s echt 
Soll das ganze dann in einem neuem Tab öffnen oder den Inhalt ersetzen?
Es liest sich als würde es den Inhalt ersetzen, aber dann versteh ich nich wozu noch das href und target blank.
Zuletzt bearbeitet von chrissowa am Di 01.09.2009 20:47, insgesamt 1-mal bearbeitet
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 01.09.2009 20:56
Titel
|
|
|
So wird einfach nur die Quelle für das Bild ausgetauscht.
Kann man das vielleicht online sehen?
Edit: sorry, die Anführungszeichen stimmen natürlich nicht. Du musst in meinem Beispiel
alle einfachen Anführungszeichen escapen \'
| Code: | | var marker = createMarker(point,'BLABLA<br> <a href="http://www.lalala.de/neuesbild.jpg" target="_blank" onclick="document.getElementById(\'bubble_img\').src=this.href; return false;"><img scr="thumnailbild.jpg" id="bubble_img"></a>') |
Zuletzt bearbeitet von m am Di 01.09.2009 21:00, insgesamt 3-mal bearbeitet
|
|
| |
|
|
chrissowa
Threadersteller
Dabei seit: 08.11.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 01.09.2009 21:51
Titel
|
|
|
Ok soweit klappt das.
Danke.
Allerdings passt sich die Sprechblase leider nicht an.
Hier mal ne Testversion:
http://webspace.kilu.de/karte/
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 02.09.2009 09:40
Titel
|
|
|
Also du hättest vers. Möglichkeiten. Die Karte ist ja sicher in eine Webseite integriert? Wird
auf dieser Webseite zufällig für die Vollansicht von anderen Bildern schon eine Lightbox o.ä.
eingesetzt? Das Bild in einer Lightbox anzuzeigen wäre z.B. eine Möglichkeit …
|
|
| |
|
|
chrissowa
Threadersteller
Dabei seit: 08.11.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 04.09.2009 20:57
Titel
|
|
|
gnabend
Mit Lightbox hab ich noch nie was gemacht.
Normalerweiße dürfte die Karte irgendwann in ein CMS (phpwcms) eingebaut werden.
Wäre der Weg über Lightbox schwer?
Wäre eine gute Alternative. Werd mich mal da umschaun, bin aber zz erst dabei mal HTML zu lernen ;D
Also alles nich so einfach für mich
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Google Kontakte auf Google Maps auslesen/anzeigen lassen
Google Maps und Google Places
Google Maps-API
GOOGLE MAPS`?
Google Maps API
Probleme: Google Maps im IE
|
|
Willkommen auf dem Portal für Mediengestalter
