Google Maps (infoWindow)

Hallo zusammen,

leider habe ich in dem Forum hier kein passendes Thema gefunden. Wenn doch dann tut mir das Leid.

Nun zu meinem Problem... Seit kurzem habe ich angefangen über einer Weiterbildung JS zu erlernen und wollte soeben eine GoogleMap-Karte erstellen mit mehreren Marker und ToolTips.

Bis dahin klappt alles gut (Die Positionen werden über ein Array ausgelesen, sowie die InfoWindows)

Aber wenn ich die Tooltips mit HTML bearbeite, zeigt der mir im Frontend beim drüberfahren eines Markers die ganzen HTML-Tags im Titel... Und im Contentbereich ganz Normal.

Vielleicht habe ich einen Denkfehler und Ihr könnt mir eventuell weiterhelfen...

Das wäre der QuellCode:

Code:
<script type="text/javascript" src="tooltip.js"></script>
    <script type="text/javascript">
    var LocationData = [
        //Im Norden
        [50.860087,12.884516,borna1,Borna],
        [50.877374, 12.907845, Gloesa],
        [50.851969, 12.928866, Furth],
        //Im Osten  
        [50.816783, 12.985741, Adelsberg],
        [50.810241, 12.937661, Bernsdorf],
        [50.871507, 12.967109, Ebersdorf],
        [50.833612, 13.021414, Euba],
        [50.833612, 13.021414, Gablenz],
        [50.849724, 12.970621, Hilbersdorf],
        //Im Westen
        [50.818292, 12.780581, Gruena],
        [50.828408, 12.849664, Rottluff],
        [50.834799, 12.830563, Rabenstein],
        [50.809889, 12.832477, Reichenbrand],
        [50.816145, 12.869841, Schoenau],
        [50.813329, 12.847036, Siegmar],
        [50.797878, 12.862445, Stelzendorf],
        //Im Süden
        [50.794817, 12.918745, Altchemnitz],
        [50.785026, 12.958352, Erfenschlag],
        [50.781062, 12.923181, Harthau],
        [50.806140, 12.900730, Helbersdorf],
        [50.813697, 12.891361, Kappel],
        [50.791411, 12.902598, Markersdorf],
        [50.796962, 12.960481, Reichenhain],
        //Chemnitz Mitte
        [50.836102, 12.879950, Altendorf],
        [50.833851, 12.900577, Kassberg],
        [50.845998, 12.909569, Schlosschemnitz],
    ];
  
    function initialize() {
        var map = new google.maps.Map(document.getElementById('map-canvas'));
        var bounds = new google.maps.LatLngBounds();
        var infowindow = new google.maps.InfoWindow();
   
            for (var i in LocationData) {
                var p = LocationData[i];
                var latlng = new google.maps.LatLng(p[0], p[1]);
                bounds.extend(latlng);
               
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: p[2]
                });
           
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(this.title);
                    infowindow.open(map, this);
                });
            }
            map.fitBounds(bounds);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(p[2]);
        infowindow.open(map, marker);
    });
  
    google.maps.event.addListener(marker, 'click', (function(mm, tt) {
        return function() {
            infowindow.setContent(tt);
            infowindow.open(map, mm);
        }
    })(marker, p[2]));
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>

Und das wäre der Text als Variable :
Code:
var Borna = '<div class="content-map"><h1>Vereine in Borna:</h1>'
            'Zum Profil von Verein Am Bornaer Hang <a href="/jomsocial/199-verein-am-bornaer-hang/profile">Link</a></div>';


Für Eure Hilfe wäre ich sehr Dankbar.

Mfg Tobias
 
Javascript:
var Borna = '<div class="content-map"><h1>Vereine in Borna:</h1>' +
                     'Zum Profil von Verein Am Bornaer Hang <a href="/jomsocial/199-verein-am-bornaer-hang/profile">Link</a></div>';

Ich glaube dir fehlt ein + um die beiden Strings zu verbinden. Eigentlich solltest du einen JS Fehler erhalten.
 
@philishake Danke für deine Antwort, habe diese Woche vergessen rein zu Posten das ich eine Lösung gefunden habe... Ich habe ein bisschen probiert und das klappte sogar...

Javascript:
    function initialize() {
        var map = new google.maps.Map(document.getElementById('map-canvas'));
        var bounds = new google.maps.LatLngBounds();
        var infowindow = new google.maps.InfoWindow();
 
            for (var i in LocationData) {
                var p = LocationData[i];
                var latlng = new google.maps.LatLng(p[0], p[1]);
                bounds.extend(latlng);
             
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: 'Vereinsname',
                    content: p[2]
                });
         
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(this.content);
                    infowindow.open(map, this);
                });
            }
            map.fitBounds(bounds);
    }

und zwar bei der Variable marker wurde "content" hinzugefügt und dann unten bei "google.maps.event.addListener(marker, 'click', function)" habe ich das this.title in this.content geändert. Und dann hat es funktioniert.

Dank deiner Hilfe mit dem Plus hat es auch richtig im contentbereich geklappt... Deshalb auch hier noch mal mein Dankeschön :)

Mfg Tobias
 
Zurück