Problem mit Google Map v3 - Javascript

Webdesign & Technik HTML & CSS
1

Hallo,

ich arbeite derzeit an einem neuen Projekt. Ich möchte eine GoogleMap-Karte erstellen, auf der User Marker setzen können, die in einer DB gespeichert und abgerufen werden können.

Zwar läuft alles schon einigermaßen zufriedenstellend, allerdings nicht ohne einen kleinen Fehler, den ich bislang einfach nicht finden konnte. Hier hoffe ich auf Eure Unterstützung. :slight_smile:

Wenn ich einen Eintrag in der Map durch “Rechtsklick” hinzufügen möchte, dann erscheint zwar das Formular, allerdings werden dabei zwischen dem Link “Eintrag hinzufügen” und “Eintrag entfernen” insgesamt sieben mal “true” angezeigt. Ich finde jedoch nicht die Ursache hierfür. Hoffe, ihr könnt mir da weiterhelfen…

Hier der Code:

[code]

Google Map h1.heading{padding:0px;margin: 0px 0px 10px 0px;text-align:center;font: 18px Georgia, "Times New Roman", Times, serif;} /* width and height of google map */ #google_map {width: 90%; height: 600px;margin-top:0px;margin-left:auto;margin-right:auto;} /* Marker Edit form */ .marker-edit label{display:block;margin-bottom: 5px;} .marker-edit label span {width: 130px;float: left;} .marker-edit label input, .marker-edit label select{height: 24px;} .marker-edit label textarea{height: 60px;} /* Marker Info Window */ h1.marker-heading{color: #585858;margin: 0px;padding: 0px;font: 18px "Trebuchet MS", Arial;border-bottom: 1px dotted #D8D8D8;} div.marker-info-win {width: 300px; height: 400px; margin-right: -20px;} div.marker-info-win p{padding: 0px;margin: 10px 0px 10px 0;} div.marker-inner-win{padding: 5px;} button.save-marker, button.remove-marker{border: none;background: rgba(0, 0, 0, 0);color: #00F;padding: 0px;text-decoration: underline;margin-right: 10px;cursor: pointer; }

My Google Map

Right Click to Drop a New Marker
[/code]

Vielen Dank vorab!

Viele Grüße
simsonundco

2

Hat denn keiner eine Idee woran es liegen könnte?

3

Ich will mal nicht so sein…

Bitte versuche die Developer Tools der jeweiligen Browser zu verwenden. Wenn du mit HTML, CSS oder JS arbeiten möchtest gehört das Debuggen dazu!

In diesem Beitrag benutze ich Chrome. Jeder Browser hat jeweils eigene DevTools.

Schauen wir uns den Code an, in dem der Fehler vorkommt. In deinem Fall ist es der div.marker-info-win:
http://i.imgur.com/nPYvXvE.png
Auf dem Bild jeweils in blau und grau markiert.

Suchen wir in deinem JS wo der div vorkommt:
http://i.imgur.com/o0K0Pr4.png
Die Pfeile in den Zeilen 94 und 104 sind Breakpoints. Sie halten für uns das JS an, damit wir sehen was darin geschieht.

Wir sehen welche Variablen die Funktion create_marker() enthält:
http://i.imgur.com/fCNhD6g.png
Seltsam viele true Werte für contentString.

Suchen wir wo die meisten dieser Variablen eingesetzt werden:
http://i.imgur.com/V52OZdd.png
Die Zeile 96 sieht vielversprechend aus.
Jetzt ändern wir die Werte der jeweiligen Variablen.
Im Bild jeweils grau und blau markiert

Zum Schluss lassen wir das Script weiterlaufen:
http://i.imgur.com/Vr9oAXF.png
Der Div hat die neuen Werte angenommen.

Jetzt musst du nur noch schauen wo die Funktion create_marker() aufgerufen wird. Kleiner Tipp:

create_marker(event.latLng, 'Pannenhelfer hinzufügen', EditForm, true, true, true, true, true, true, true, true, true, true, "pin_green.png"); So einfach hätte man selbst dahinter kommen können.

Edit:
Hier die Bilder im Album: imgur.com/a/1ZBvk

4

Hallo ausschliessi,

möchte mich zunächst einmal bei Dir für die Unterstützung bei der Fehlersuche bedanken!

Mir ist durchaus bewusst, dass es je nach Browser auch Entwicklertools gibt. Ich habe bereits ein Großteil der Fehler mit dem IE und der Entwicklerkonsole debuggen können - nur eben diesen nicht.

Hatte im Code, den ich hier im Forum eingebunden habe, auch bereits eine Notiz an diese Stelle gemacht. Leider konnte ich sie hier im Forum jedoch nicht farblich kennzeichnen, so dass sie bestimmt untergegangen ist…

create_marker() - leider ist mir noch immer nicht klar, wie ich diesen Fehler beheben kann…
Entferne ich die sieben “trues”, werden mir trotzdem drei “trues” und mehrere “undefined” angezeigt.

Gruß simsonundco

5

Oh je oh je…

create_marker(event.latLng, 'Pannenhelfer hinzufügen', EditForm, true, true, true, "pin_green.png"); wirklich?

Es mag bequem sein Code von irgendwo zu kopieren. Versuch dann wenigstens auch den Code zu verstehen.

Hier der Code von Interesse. Alles andere ist gerade unwichtig.

[code]function create_marker(MapPos, MapTitle, MapType, MapAddress, MapPostleitzahl, MapOrt, MapTelefon, MapEmail, MapOeffnung, MapAngebot, InfoOpenDefault, DragAble, Removable, iconPath)
{
var contentString = $(
’

’+
’
’+ 
      /* Besonders von Interesse */
      '<h1 class="marker-heading">'+MapTitle+'</h1>
        <br>'+MapType+'
        <br>'+MapAddress+'
        <br>'+MapPostleitzahl+'
        <br>'+MapOrt+'
        <br>'+MapTelefon+'
        <br>'+MapEmail+'
        <br>'+MapOeffnung+'
        <br>'+MapAngebot+' <br>'+
      /* --- */

        '</span>
          <button name="remove-marker" class="remove-marker" title="Remove Marker">Entferne Markierung</button>'+
    '</div>
  </div>'
);

}[/code]
Die Funktion create_marker() erwartet in jedem Fall 14 Parameter!
[ul]
[li]MapPos[/li]
[li]MapTitle[/li]
[li]MapType[/li]
[li]MapAddress[/li]
[li]MapPostleitzahl[/li]
[li]MapOrt[/li]
[li]MapTelefon[/li]
[li]MapEmail[/li]
[li]MapOeffnung[/li]
[li]MapAngebot[/li]
[li]InfoOpenDefault[/li]
[li]DragAble[/li]
[li]Removable[/li]
[li]iconPath[/li][/ul]

In deinem Aufruf von gerade füllst du auch nur 7 Parameter aus (MapPos bis MapTelefon)
Die restlichen Parameter bleiben leer (MapEmail bis iconPath). So werden diese auch als nicht definiert - undefined angezeigt.

Die Funktion create_marker() gibt beim Aufruf den Inhalt aus contentString vollständig aus. Egal ob die Argumente Leer sind oder einen Wert bekommen.

[li]event.latLng -> MapPos bekommt den Wert von event.latLng[/li]
[li]‘Pannenhelfer hinzufügen’ -> MapTitle bekommt den Wert “Pannenhelfer hinzufügen”[/li]
[li]EditForm -> MapType bekommt den ganzen Code von var EditForm - hust, hust, hust[/li]
[li]true -> MapAddress bekommt den Wert true[/li]
[li]true -> MapPostleitzahl bekommt den Wert true[/li]
[li]true -> MapOrt bekommt den Wert true[/li]
[li]true -> MapTelefon bekommt den Wert true[/li]
[li]true -> MapEmail bekommt den Wert true[/li]
[li]true -> MapOeffnung bekommt den Wert true[/li]
[li]true -> MapAngebot bekommt den Wert true[/li]
[li]true -> InfoOpenDefault bekommt den Wert true[/li]
[li]true -> DragAble bekommt den Wert true[/li]
[li]true -> Removable bekommt den Wert true[/li]
[li]“pin_green.png” -> iconPath bekommt den Wert “pin_green.png”[/li][/ul]

Jetzt schau dir nochmals contentString an (weiter oben).

Oder schau dir bitte den Guide von Mozilla zu JavaScript an: developer.mozilla.org/de/docs/JavaScript/Guide
Falls du wirklich kein Wort hier verstehst.

6

Hey ausschliessi,

oh Mensch… das ist mir jetzt wirklich peinlich :hail:

Vielen, vielen Dank für Deine Hilfe und die ausführliche Erklärung! Konnte den Fehler dank Deiner Hilfe beheben!

Viele Grüße
simsonundco