zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Google Maps & Marker mit Popup

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.08.2010, 17:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2010
Beiträge: 8
Tom Sailor befindet sich auf einem aufstrebenden Ast
Standard Google Maps & Marker mit Popup

Hallo, ich bin blutiger Anfänger und kämpfe seit ein paar Tagen mit einem Uniprojekt.

Ich habe eine Googlemaps Karte mit acht Markern. Die Marker werden in einem Array aufgelistet. Nun soll, so die Vorgabe, beim Click auf die Marker je ein spezifisches Fenster mit Informationen aufpoppen. Ich weiß, Pop-Ups sind Bäh, aber Vorgabe ist Vorgabe... Ich habe alles, bis auf die Pop-Ups. Ein den Markern zugewiesenes Alert funktioniert. Beim Popup geht ein neuer Tab auf und Firefox sagt, er könne 'undefined' nicht finden. Irgendeine Idee? Wenn mir jemand die Lösung für die function buildClickHandler(i) posten könnte wäre ich sehr dankbar

Code:
// JavaScript Document
var aLatLng =[
				  {"lat":52.1326, "lon": 5.2912},//the Netherlands 
				  {"lat":-14.2350, "lon":-51.9252},//Brazil
				  {"lat":-32.5227, "lon": -55.7658}, //Uruguay
				  {"lat":7.9465, "lon":-1.0231}, //Ghana
				  {"lat":-38.4160, "lon":-63.6166}, //Argentina
				  {"lat":51.1656, "lon":10.4515}, //Germany
				  {"lat":-23.4425, "lon":-58.4438}, //Paraguay
				  {"lat":40.4636, "lon": -3.7492} //Spain
				  ];
function myInitialize() {
    var latlng = new google.maps.LatLng(53.12, -35.50);
    var myOptions = {
      zoom: 2,
      center: latlng,    
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
for(var i=0; i<aLatLng.length; i++){
	var point = new google.maps.LatLng(aLatLng[i].lat, aLatLng[i].lon );

	var marker = new google.maps.Marker({
		position: point, 
		map: map	 
		}); 
	
        google.maps.event.addListener(marker, 'click', buildClickHandler(i));
}
}

var myPages = new array(netherlands.html, brazil.html, uruguay.html, ghana.html, argentina.html, germany.html, paraguay.html, spain.html);

function buildClickHandler(i) {
    return function() { 
        //open popup window: page[i]) 
		//alert("hello. This is number for popup no:" + i);
		//alert("hello. This is number for popup no: " + aLatLng[i].file + "soon");
		//aLatLng[i].file.thisWidth
		window.open(aLatLng[i].file, scrollbars="no")
    };
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.08.2010, 10:42
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Die Array Einträge haben keine Eigenschaft file
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.08.2010, 10:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2010
Beiträge: 8
Tom Sailor befindet sich auf einem aufstrebenden Ast
Standard

Danke für Deine Antwort Leider stehe ich etwas auf dem Schlauch...

Könntest Du mir evtl. sagen, wo ich was einfügen muss, damit es funktioniert? Oben ist der array mit den Geodaten, unten der clickhandler. Wo muss jetzt noch was hin?

Vielen Dank im Vorraus!
Mit Zitat antworten
  #4 (permalink)  
Alt 31.08.2010, 11:22
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Die Einträge im Objekt aLatLng haben keine Eigenschaft .file, deshalb zeigt das Popup undefined an.

Bist du sicher dass du ein window.open Popup machen sollst? Mit der Google Maps Api kannst du direkt auf der Map Info Fesnter öffnen.
Mit Zitat antworten
  #5 (permalink)  
Alt 31.08.2010, 11:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2010
Beiträge: 8
Tom Sailor befindet sich auf einem aufstrebenden Ast
Standard

Ja, es soll ein ordinäres Pop-Up sein. Infowindow habe ich zunächst selbst auch schon probiert, habe das aber nicht hinbekommen. Am Ende hat sich für jeden Marker immer dasselbe Fenster geöffnet...

Für ein ordinäres Pop-Up muss ich hier "file" einfügen? Wie genau? Wäre nett, wenn Du mir Beispielhaft ein Codeschnipselchen schriebest.

Code:
var aLatLng =[
				  {"lat":52.1326, "lon": 5.2912},//the Netherlands 
				  {"lat":-14.2350, "lon":-51.9252},//Brazil
				  {"lat":-32.5227, "lon": -55.7658}, //Uruguay
				  {"lat":7.9465, "lon":-1.0231}, //Ghana
				  {"lat":-38.4160, "lon":-63.6166}, //Argentina
				  {"lat":51.1656, "lon":10.4515}, //Germany
				  {"lat":-23.4425, "lon":-58.4438}, //Paraguay
				  {"lat":40.4636, "lon": -3.7492} //Spain
				  ];
Sorry, ich habe das alles in einem Semester lernen sollen und das bei einem nicht so begnadeten Dozenten. Ich danke sehr für Deine Geduld und Mühe!
Mit Zitat antworten
  #6 (permalink)  
Alt 31.08.2010, 12:09
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Du widersprichst dir, weiter oben hast du gesagt das die Popups Vorgabe wären, was ich mir schon schwer vorstellen konnte, da es kaum Sinn macht, wenn man die goole Maps API benutzt.

Aber du scheinst wirklich grosse Lücken zu haben. Wie kommt euer Dozent darauf euch solch eine Software aufzudrücken, wenn ihr nicht mal wisst wie man Objekte benutzt?
Vielleicht hilft dir dieser Artikel Organisation von JavaScripten

Code:
var aLatLng =[
{"lat":52.1326, "lon": 5.2912},//the Netherlands 
/* .. */
];
Das ist ein Array von Objekten. Das Objekt wird durch die literale {} erzeugt. 'lat' und 'lon' sind Eigenschaften und hinter den Doppelpunkt die Werte.

Es sähe also so aus, wenn du eine Eigenschaft hinzufügst:

Code:
var aLatLng =[
{"lat":52.1326, "lon": 5.2912, eigenschaft: wert},//the Netherlands 
/* .. */
];
Nachtrag: Wobei eigenschaft immer als String interpretiert wird, d.h. solange dort keine Sonderzeichen stehen, brauchst du keine Anführungszeichen (sie schaden aber auch nicht)
Mit Zitat antworten
  #7 (permalink)  
Alt 31.08.2010, 13:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2010
Beiträge: 8
Tom Sailor befindet sich auf einem aufstrebenden Ast
Standard

Danke! Ja, der Dozent ist nicht sehr fähig. Hat zwar selber Ahnung, kann aber nicht so gut erklären.

Wir sollen in der Tat ordinäre Pop-ups verwenden. Weil ich das aber nicht hinbekam, habe ich es mit Infowindows versucht. Im Moment versuche ich nur, dass ganze irgendwie hinzubekommen. Das Nacharbeiten folgt dann.

So sieht es jetzt aus. Die Karte wird aber gar nicht mehr angezeigt
Code:
var aLatLng =[
				  {"lat":52.1326, "lon": 5.2912 ".file":"netherlands.html"},//the Netherlands 
				  {"lat":-14.2350, "lon":-51.9252 ".file":"brazil.html"},//Brazil
				  {"lat":-32.5227, "lon": -55.7658 ".file":"uruguay.html"}, //Uruguay
				  {"lat":7.9465, "lon":-1.0231 ".file":"ghana.html"}, //Ghana
				  {"lat":-38.4160, "lon":-63.6166 ".file":"argentina.html"}, //Argentina
				  {"lat":51.1656, "lon":10.4515 ".file":"germany.html"}, //Germany
				  {"lat":-23.4425, "lon":-58.4438 ".file":"paraguay.html"}, //Paraguay
				  {"lat":40.4636, "lon": -3.7492 ".file":"spain.html"} //Spain
				  ];
Mit Zitat antworten
  #8 (permalink)  
Alt 31.08.2010, 13:23
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Der Punkt ist der Trenner, wenn du die Eigenschaft aufrufst (ich empfehle dir wirklich den von mir verlinkten Artikel zu lesen)
Mit Zitat antworten
  #9 (permalink)  
Alt 31.08.2010, 13:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2010
Beiträge: 8
Tom Sailor befindet sich auf einem aufstrebenden Ast
Standard

Sorry hätte mich klarer ausdrücken sollen. Habe es nämlich zunächst ohne Punkt probiert und da funktioniert es auch nicht. Danach erst der Versuch mit Punkt. Jedenfalls, ob mit oder ohne, die Karte wird gar nicht mehr angezeigt.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 31.08.2010, 13:35
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Wo finde ich die Fehlerkonsole?
und ich kann dir nur immer wieder empfehlen, den Artikel zu lesen.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Google Maps einbinden mit "height:100%" housefr3@k CSS 1 03.03.2010 14:27
google maps ausschnitt xhtml 1.0 strict einbinden opa-rudi (X)HTML 2 16.12.2008 13:20
Google Maps Marker setzen unicorn Javascript & Ajax 3 24.06.2008 18:16
Google earth (maps): Abmahnwelle EvT Offtopic 1 04.03.2008 22:07
Google Maps einbinden: per Javascript oder per Iframe? AndreasB Barrierefreiheit 0 03.12.2007 01:53


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:04 Uhr.