JavaScript Google Maps - mit Markern Bilder öffnen / Variablenübergabe

D00M · 20. Mai 2013

Hallo!
Ich hoffe ihr könnt mir helfen, so langsam verzweifle ich

Ich will eine Google Maps Karte machen wo ich viele verschiendene Marker platziere, die bei Klick ein zugehöriges Bild öffnen (Das wiederum realisiert mit JQuery-Fancybox )
Die Markerspezifischen Daten (also position des Markers auf der Karte und Pfad + Titel des dazugehörigen Bildes) habe ich in einem Array (als JSON) angelegt.
Die Marker werden auch angezeigt - wunderbar. Nur schaffe ich es nicht das öffnen der Bilder zu realisieren.
Im Prinzip müssen nur die Variablen "path" und "title" an den addListener übergeben werden.
Problem dabei ist, dass alle Marker dieselbe Variable "var marker" verwenden!
So wie es jetzt (path und title schon vorher aufgerufen) bekommen alle Marker das gleiche Bild zugewiesen - eben wegen dieser Variablenzuweisung.

Hier der relevante Code:

Code:

var markers = [];
for (var i = 0; i < 32; i++) {
    var dataPhoto = data.photos[i];
    var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);
    var path = dataPhoto.url;
    var title = dataPhoto.title;
     var marker = new google.maps.Marker({position: latLng});


    google.maps.event.addListener(marker, 'click', function() {
    $.fancybox.open(
        [
            {                              
                href : path, //Hier brauche ich die Variablen aus dem Array!
                title : title, 
            }
        ],
        {
             [...]
                },
            }
        });
    });

Ich glaube das ist nicht ganz so einfach zu verstehen was hier mein Problem ist, ich hab versucht es so gut es geht zu beschreiben, und hoffe jemand kann mir helfen

Grüße
D00M

liKe2k1 · 21. Mai 2013

Recht easy, jeden einzelnen Marker (var marker = new... ) in einem Array ablegen.

Code:

var markers= [];
var iCount = 32;
for(var i=0; i<=iCount; i++) {
   markers.push( new google.maps....);
}

Dein Event muss natürlich dann auf markers statt marker zugreifen

D00M · 21. Mai 2013

Vielen Dank!

Wäre nie darauf gekommen das mit einem weiteren Array zu lösen

Bin auch noch relativ unerfahren in Javascript/programmieren.

Habe es jetzt mal nach deiner Idee umgesetzt, leider gibt es schon wieder ein Problem:

Wenn man einen beliebigen Marker anklickt, wird immer das gleiche und zwar das letzte Bild meiner JSON Datei angezeigt, die Fehlerquelle habe ich auch schon gefunden, nur keine Ahnung wie ich das behebe..:

Der eventListener wird ja nur durchlaufen, wenn man auch wirklich auf den Marker klickt. Das passiert aber logischerweise erst nachdem die Schleife bereits durchlaufen ist. Folglich steht das i aus dem Array auf 32 und jeder Marker zeigt dann das letzte Bild an.

Hier nochmal der Code zur Veranschaulichung:

Code:

        var markers= [];
        var counter=33;
        for(var i=0; i<counter-1; i++) {
            var path = data.photos[i].url;
            var title = data.photos[i].title;
            markers.push(
                new google.maps.Marker({
                      position: new google.maps.LatLng(
                data.photos[i].latitude,data.photos[i].longitude
                        )
                    }
                )
                
            );
            var marker= markers[i];
            google.maps.event.addListener(markers[i], 'click', function() {
                alert(title);
                $.fancybox.open(
                    [
                        {    
                            href : path,
                            title : title,
                        }
                    ],
                    {
                        wrapCSS    : 'fancybox-custom',
                        closeClick : true,
                        openEffect : 'none',
                        helpers : {
                            title : {
                                type : 'inside'
                                    },
                    }
                });
            });
        }
        var markerCluster = new MarkerClusterer(map, markers);

liKe2k1 · 22. Mai 2013

Erst das Event erstellen, dann den Marker ins Array verschieben.

Code:

var marker = new google.maps... 

google.maps.event.addListener...

markers.push(marker);

D00M · 22. Mai 2013

Habe nicht ganz verstanden wie du das meinst.
Wenn ich den push nach unten schiebe muss ich ja oben wieder var marker definieren und dann im eventListener aufrufen. Problem bestheht aber weiterhin

Zusätzlich habe ich noch ausprobiert die abfrage von path und title in den Listener zu schieben, bringt aber auch nichts.
Kannst du mir nochmal erklären was du damit meinst? Ich bin wie gesagt noch nicht so bewandert in JS

Code:

for(var i=0; i<counter-1; i++) {
            var marker= new google.maps.Marker({
                      position: new google.maps.LatLng(
                        data.photos[i].latitude,data.photos[i].longitude)})
                        
            google.maps.event.addListener(marker, 'click', function() {
            var path = data.photos[i].url;
            var title = data.photos[i].title;
                $.fancybox.open(
                    [
                        {    
                            href : path,
                            title : title,
                        }
                    ],
                    {
                        wrapCSS    : 'fancybox-custom',
                        closeClick : true,
                        openEffect : 'none',
                        helpers : {
                            title : {
                                type : 'inside'
                                    },
                    }
                });
            });
            markers.push(marker);

Irgendwie muss man jedem marker eine fortlaufende variable geben. Damit die Marker noch eindeutig angesprochen werden können. Geht das überhaupt?

liKe2k1 · 22. Mai 2013

Hey,

hab es mal selbst gerade ausprobiert.

Der Trick ist simpel.

Code:

var marker = new google.maps.Marker({map: map, position: new google.maps.LatLng(locations[i][1], locations[i][2])});
google.maps.event.addListener(marker, 'click', (function(marker, i) { // beachte die Parameter übergabe von marker und i
  // Deine Fancybox
})(marker, i)); // Das muss so ;)

Keine zwischengespeicherten Arrays.

Hier mal mein Beispiel:

Code:

<script type="text/javascript">

var locations =
[
	 ['Schöne Hafenstadt', 53.5510846 , 9.9936818 ],
	 ['Hauptstadt', 52.519171 , 13.4060912 ],
	 ['IT Metropole', 50.937531 , 6.9602786 ],
	 ['Oktoberfest!', 48.1366069 , 11.5770851 ],
];
	 
var infowindow = new google.maps.InfoWindow();

function init() 
{
	var myLatlng = new google.maps.LatLng(52.2118881,8.8134735);
	var mapOptions = {
	  zoom: 5,
	  center: myLatlng,
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	
	for(var i=0; i < locations.length; i++) {
		var marker = new google.maps.Marker({map: map, position: new google.maps.LatLng(locations[i][1], locations[i][2])});
		google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
				infowindow.setContent(locations[i][0]);
				infowindow.open(map, marker);
			}
		})(marker, i));
	}
}

google.maps.event.addDomListener(window, 'load', init);
</script>

D00M · 22. Mai 2013

Erstmal vielen Dank für deine Mühe, du hast mir schon enorm weitergeholfen!
Ich habe jetzt mal dein Beispiel übernommen, das klappt auch wunderbar, wenn ich die Bilder mit dem Infowindow aufrufe:

Code:

                return function() {
                var path=locations[i][3];
                infowindow.setContent("<img src="+path+" />");
                infowindow.open(map, marker);

Am liebsten würde ich aber die Bilder mit Fancybox aufrufen, da die Bilder relativ groß sind es damit dann sehr unkomfortabel mit der Infowindow box wird. Leider macht Fancybox aber noch Probleme

Code:

var locations =
[
     ['Schöne Hafenstadt', 53.5510846 , 9.9936818, 'img/hh.jpg' ],
     ['Hauptstadt', 52.519171 , 13.4060912, 'img/b.jpg' ],
     ['IT Metropole', 50.937531 , 6.9602786, 'img/k.jpg' ],
     ['Oktoberfest!', 48.1366069 , 11.5770851, 'img/m.jpg' ],
];

[...]


  for(var i=0; i < locations.length; i++) {

        var marker = new google.maps.Marker({map: map, position: new google.maps.LatLng(locations[i][1], locations[i][2])});
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            var path = locations[i][0];
            var title = locations[i][3];
                $.fancybox.open(
                    [
                        {    
                            href : path,
                            title : title,
                        }
                    ],
                    {
                        wrapCSS    : 'fancybox-custom',
                        closeClick : true,
                        openEffect : 'none',
                        helpers : {
                            title : {
                                type : 'inside'
                                    },
                                }
                    }
                )


            
        })
        );
    }

Offenbar macht die Variablenübergabe an href: und title: noch Probleme, denn wenn ich einen absoluten Pfad für die beiden angebe scheint es zu klappen, aber auch nur dann wenn ich vorher Zeile 17 und 18 gelöscht habe. Kann ich path und title denn erst dort zuordnen oder muss ich das früher machen?
(marker, i)); habe ich rausgenommen, da dann sofort die Bilder aufgepoppt sind

EDIT: Es muss auch nicht unbedingt mit Fancybox realisiert werden, wenn ein Image Popup auch einfacher zu realisieren ist. Nur bisher hab ich noch nichts geeignetes gefunden

liKe2k1 · 22. Mai 2013

Bei mir hat folgendes geholfen:

Code:

                {    
                    href : locations[i][3],
                    title : locations[i][0]
                }

Getestet:

Code:

<script type="text/javascript">
      var locations =
      [
        ['Schöne Hafenstadt', 53.5510846 , 9.9936818, 'img/hh.jpg' ],
        ['Hauptstadt', 52.519171 , 13.4060912, 'img/b.jpg' ],
        ['IT Metropole', 50.937531 , 6.9602786, 'img/k.jpg' ],
        ['Oktoberfest!', 48.1366069 , 11.5770851, 'img/m.jpg' ]
      ];


      function init() 
      {
        var myLatlng = new google.maps.LatLng(52.2118881,8.8134735);
        var mapOptions = {
          zoom: 5,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        for(var i=0; i < locations.length; i++) {
          
          var marker = new google.maps.Marker({map: map, position: new google.maps.LatLng(locations[i][1], locations[i][2])});
          
          google.maps.event.addListener(marker, 'click', (function(marker, i) {

            return function() {
              $.fancybox.open(
                [{    
                  href :  locations[i][3],
                  title : locations[i][0],
                }],
                {
                  wrapCSS    : 'fancybox-custom',
                  closeClick : true,
                  openEffect : 'none',
                  helpers : {
                    title : {
                      type : 'inside'
                    },
                  }
                });
            }
            
          })(marker, i));
        }
      }
       
      google.maps.event.addDomListener(window, 'load', init);
      </script>

D00M · 22. Mai 2013

Ja! Es klappt! Vielen vielen Dank! Ohne dich hätte ich das nicht geschafft

Hab zwar noch nicht ganz verstanden wieso man title und path nicht als extra variable nehmen kann, aber sei es drum hauptsache es funktioniert!
Nochmal Vielen Dank für deine Mühe!

Suche

JavaScript Google Maps - mit Markern Bilder öffnen / Variablenübergabe

D00M

Ensign

liKe2k1

Cadet 3rd Year

D00M

Ensign

liKe2k1

Cadet 3rd Year

D00M

Ensign

liKe2k1

Cadet 3rd Year

D00M

Ensign

liKe2k1

Cadet 3rd Year

D00M

Ensign

Ähnliche Themen