JavaScript Google Maps API 5x initialisieren

[D00M]

Ich will auf einer Website 5(!!) Google Maps Karten, die muss ich nartürlich erst alle initalisieren. Der Standardcode ist bei mir

function initializemap1() {
    var latlng = new google.maps.LatLng(HIERKOORDINATE1, HIERKOORDINATE2);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };


    var map = new google.maps.Map(document.getElementById("map1"),
        myOptions);

        var marker = new google.maps.Marker({
          map: map,
          position: map.getCenter()
        });
	  }
      google.maps.event.addDomListener(window, 'load', initializemap1);

Nartürlich könnte ich das jetzt 5x kopieren und jew. die Werte ändern.
Aber das ist nicht sehr sauber. In der Schule hab ich immer schön eingetrichtert bekommen in solchen Fällen mit Arrays zu arbeiten, das hab ich auch probiert aber ich bin nicht gerade der Profi im Programmieren:
Hier mein Code für 2Maps (die Koordinaten sind fürs Testen erstmal einfach zufällig gewählt)

for (var i = 0; i < 3; i++) {
	Koordinaten1 = new Array(38, 50;
	Koordinaten2 = new Array(3, 6);  
  function initializemap+i() {

    var latlng = new google.maps.LatLng(Koordinaten1[i], Koordinaten2[i]);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };


    var map = new google.maps.Map(document.getElementById("map"+i),
        myOptions);

        var marker = new google.maps.Marker({
          map: map,
          position: map.getCenter()
        });
	  }
      google.maps.event.addDomListener(window, 'load', initializemap+i);
}

Mir ist aber schon klar das das nicht klappen wird, da

 function initializemap+i() 
UND
google.maps.event.addDomListener(window, 'load', initializemap+i);

syntaktisch einfach falsch sind. Wie schreibt man das denn richtig?

 

[UnKnOwN_86]

Da ist so einiges falsch, da ich dir nicht den kompletten Lösungweg einfach abtippen möchte werde ich dir nur einen Hinweis geben.

Erweitere die function mit parametern zur Übergabe, dies funktioniert in dem man zwischen den Klammern nach dem Funktionnamen die Parameter angibt.

Ohne Parameter

function initializemap1(){
//some Code...
}

Mit Parameter

function initializemap1(xCoordinate, yCoordinate, mapCtrlID){
//some Code...
}

Diese Parameter kannst du nun innerhalb der Funktion verwenden.

Anstatt

var latlng = new google.maps.LatLng(HIERKOORDINATE1, HIERKOORDINATE2);

wäre es dann mit den Parametern:

var latlng = new google.maps.LatLng(xCoordinate, yCoordinate);

Danach musst du nur noch die Funktion zweimal oder öfters aufrufen, und in dem du die Parameter mit den Werter erstetzt.

Aufruf ohne Parameter

initializemap1();

Aufruf mit Parameter

initializemap1(38, 50, 'map1')

Hoffe ich konnte dir auf die Sprünge helfen, und das meine Nachredner deinen Code nicht in der Luft zerfetzten.

 

[D00M]

Oh, da war ich mit meinen Array wohl auf der falschen Fährte
Mit deinen Hinweisen konnte ich gut was anfangen, wobei du die Lösung ja eigentlich selber schon geschrieben hast.
Hier der Code

  function initializemap(Koordinaten1, Koordinaten2, mapnumber) {

    var latlng = new google.maps.LatLng(Koordinaten1, Koordinaten2);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };


    var map = new google.maps.Map(document.getElementById(mapnumber),
        myOptions);

        var marker = new google.maps.Marker({
          map: map,
          position: map.getCenter()
        });
	  }
      google.maps.event.addDomListener(window, 'load', initializemap);
initializemap(38, 34, 'map1');
initializemap(38, 45, 'map2');

Edit:funktioniert leider nicht Hab ich noch irgendwas falsch gemacht?
Edit2:
Ich glaube so ist das "richtiger" scheint aber immer noch nicht zu klappen

google.maps.event.addDomListener(window, 'load', initializemap(38, 34, 'map1'));
google.maps.event.addDomListener(window, 'load', initializemap(38, 45, 'map2'));

 

[character]

Jetzt wird erst initializemap aufgerufen und dann dessen Ergebnis als DOM-Listener verwendet. Da die Funktion nichts zurueckgibt, ist das "Ergebnis" undefined. Wass effektiv passiert, ist also das hier:

google.maps.event.addDomListener(window, 'load', undefined);

In solchen Faellen musst du eine weitere Funktion (Closure) verwenden, um den Aufruf von initializemap mit Argumenten zu ermoeglichen. Bspw. so:

google.maps.event.addDomListener(
  window, 'load', 
  function () {
    initializemap(...);
    initializemap(...);
    initializemap(...);
  }
);

Variablennamen sollte man hier ausserdem klein (koordinate1) und den Funktionsnamen mit CamelCase (initializeMap) schreiben. Aus Konsistenzgruenden solltest du vielleicht auch gleich alles englisch machen (coordinate).

 

[UnKnOwN_86]

Ich würde sowie so auf die Zeile verzichten:

google.maps.event.addDomListener(...)

und es wie folgt lösen:

function initializemap(Koordinaten1, Koordinaten2, mapnumber) {
//Code...
}

function intMaps() {
	initializemap(30, 40, "map1");
	initializemap(50, 60, "map2");
}

<body onload="intMaps()">

 

[character]

Ja, man kann nie genug JavaScript-Code direkt in seinem HTML haben, nicht wahr? Google weist sogar extra nochmal darauf hin, dass das Bad Practice ist...

Eigentlich will man hier aber sowieso nicht auf window.onload warten, sondern den Kram schon initialisieren, wenn das DOM fertig ist. Ich weiss aber nicht, ob die Google-Maps-APIs das direkt anbieten. Generell bietet es sich an jQuery und Co. zu verwenden.

 

[UnKnOwN_86]

Kannst du mir das zeigen wo Google dies erwähnt?
Wenn ich mir die aktuelle API ziehe ist das im body load event und auch im HTML drinnen. Siehe:
https://developers.google.com/maps/documentation/javascript/tutorial?hl=de

Auszug:

Karte laden

  <body onload="initialize()">

Während eine HTML-Seite aufgebaut wird, wird das DOM (Document Object Model) umgesetzt und alle externen Bilder und Skripts werden empfangen und in das document-Objekt aufgenommen. Damit sichergestellt wird, dass die Karte erst nach dem vollständigen Ladevorgang auf die Seite platziert wird, führen wir die Funktion, die das Map-Objekt erzeugt, erst aus, wenn das <body>-Element der HTML-Seite ein onload-Ereignis empfängt. Auf diese Weise tritt kein unvorhersehbares Verhalten auf und wir haben mehr Kontrolle darüber, wie und zu welchem Zeitpunkt die Karte dargestellt wird.

Das onload-Attribut des body-Tags ist ein Beispiel für einen Ereignis-Handler. Das Google Maps-API für JavaScript bietet außerdem eine Reihe von Ereignissen, mit denen Sie Statusänderungen feststellen können.

Ich wollte jetzt nicht unbedingt JQuery und document ready erwähnen da es meiner Meinung nach die Kenntnisse des TE überschreitet.

 

[character]

Although easy to understand, having an onload event within a <body> tag mixes content with behavior. Generally, it is good practice to separate your content code (HTML) from your behavioral code (JavaScript) and provide your presentation code (CSS) separately as well. You can do so by replacing the inline onload event handler with a DOM listener within your Maps API JavaScript code [...]

https://developers.google.com/maps/documentation/javascript/events#DomEvents

Ich wollte jetzt nicht unbedingt JQuery und document ready erwähnen da es meiner Meinung nach die Kenntnisse des TE überschreitet.

Mag sein, aber er hat den besseren Weg (addDomListener) schon die ganze Zeit verwendet und verstanden, was er macht. Warum sollte man ihm das nun wieder "aberziehen"?

 

[UnKnOwN_86]

Aha bei den Events wird es dann doch erwähnt, danke für den Link.

Mag sein, aber er hat den besseren Weg (addDomListener) schon die ganze Zeit verwendet und verstanden, was er macht. Warum sollte man ihm das nun wieder "aberziehen"?

Jo, hast recht... mein Fehler...

 

[D00M]

Vielen Dank euch beiden jetzt klappts!
1 Frage hätte ich nun aber noch:
Wie sieht es performancemäßig aus? Verkraften auch ältere PCs oder Smartphones das Laden von 5 Maps auf einer Webseite?

Oder, anders formuliert: macht es performancemäßig viel aus ob 1 oder 5 Karten geladen werden?

 

[UnKnOwN_86]

Das Laden der Seite wird vielleicht länger dauern, aber wenn diese mal da ist sollte es keine Probleme geben.

Außer jemand nutzt sein MultiTouch Smartphone voll aus und schiebt in den Karten mit seinen 5 Fingern einer Hand gleichzeitig herum, dann könnte das Laden der Elemente etwas langsam funktionieren.