✔ Google Maps JS Problem

bensky

bensky

Erfahrenes Mitglied
Hallo Leute,

ich habe mir ein kleines Script geschrieben was freunde aus meiner Umgebung auf der Karte ausgibt. Ich möchte dort nun noch links unter die Karte setzen die bei onmouseover zum aktuellen GMap point springen. Leider funktionier das noch nicht. Kann das an meiner Funktion "click_marker" liegen?

Danke schon mal im Voraus.
ben

soll soll die Funktion aufgerufen werden:
HTML: 
<a href="javascript:click_marker(0)">Marker 1</a>
<br/>
<a href="javascript:click_marker(1)">Marker 2</a>
<br/>
<a href="javascript:click_marker(2)">Marker 3</a>

das hier ist meine functions.js

HTML: 
//var centerLatitude = 40.6897;
//var centerLongitude = -95.0446;

var centerLongitude  = 10.6788226040248;
var centerLatitude = 53.8919890381801;


var startZoom = 5;
var map;
var faceoner_mappicon = new GIcon();

//fürs LOGO
faceoner_mappicon.image = 'faceoner_mappicon.png';
faceoner_mappicon.iconSize = new GSize(21, 43);
faceoner_mappicon.iconAnchor = new GPoint(24, 14);
faceoner_mappicon.infoWindowAnchor = new GPoint(24, 24);


function addMarker(latitude, longitude, description) {
	var marker = new 
	   GMarker(  new GLatLng(latitude, longitude),faceoner_mappicon);

	GEvent.addListener(marker, 'click',
		function() {
			marker.openInfoWindowHtml(description);
		}
	);
	map.addOverlay(marker);
}


function init()
{
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.setCenter(new GLatLng(centerLatitude,
			centerLongitude), startZoom);

		for(id in markers) {
			addMarker(markers[id].latitude,
				markers[id].longitude, markers[id].name);
		}
	}
}


function click_marker(id) {
	markers[id].openInfoWindowHtml(description);
}

window.onload = init;
window.onunload = GUnload;
 
Hi Sven,

also hier erst mal ein Auszug aus meinen markers:

HTML: 
var markers = [ 
{ 
'id': 0, 'latitude': 53.8919890381801, 'longitude': 10.6788226040248, 'name': 'Simsala' 
},
{ 'id': 1, 'latitude': 53.2112274311048, 'longitude': 7.787825050745, 'name': 'suntke'
 }

Ich versuche krampfhaft seit Stunden, eigentlich seit heute Morgen eine "Oberfläche" zu erstellen wo ich per onmouseover, oder wie in meinem Beispiel per klick den Anzegeiten marker in der Karte in die Mitte zentrieren kann und sich dann der Ballon aufklappt und die Infos anzeigt...ich bin dem aber wie es aussieht nicht gewachen, ich hab mittlerweile alles versucht und selbst mein tolles Buch "google Maps Anwendungen" hilft mir nicht weiter :( vielleicht hast du ja ne Idee.

Es soll so funktionieren wie bei dem Beispiel meines angefügten links, nur halt möchte ich es selber verstehen und nicht einfach da raus klauen :-(

http://econym.googlepages.com/example_map11.htm

Es sollen auch, wie im Beispiel rechts (Marker 1) angezeigt werden, nur nicht dynamisch schondern möchte ich die links selber statisch setzten, mit der id 0 bis x.
Aber ich kriegs nicht hin ;(

Vielleicht hast du ja einen tip für mich ;)
danke schon mal im voraus
 
Zuletzt bearbeitet:
Das Problem ist, dass du die Methode openInfoWindowHtml auf die einzelnen Objekte von markers[] anwendest.
Nur sind das keine GMarker-Objekte.

Die Lösung könnte so aussehen:
Wenn du die Marker erstellst, speichere sie in dem dazugehörigen Element von markers[]

Dazu notiere zuerst am Schluss von addMarker() Folgendes:
return marker;

...dadurch wird von der Funktion der GMarker zurückgegeben und man kann ihn weiterverwenden, bspw. so:
Code: 
for(var id in markers)
{
  markers[id].marker=addMarker(markers[id].latitude, markers[id].longitude, markers[id].name);
}

Die Elemente von markers[] werden so um eine Eigenschaft "marker" erweitert..diese beinhaltet das GMarker-Objekt.

Jetzt hast du in click_marker ein GMarker-Objekt verfügbar, auf welches du bequem zugreifen kannst:)
Code: 
function click_marker(id) 
{
  markers[id].marker.openInfoWindowHtml(markers[id].name);
}
 
Wahnsinn Sven, 1000send dank.
Ich hab gestern echt stunden verbracht um das so hinzukriegen;(
Es sieht wohl so aus, als wäre ich trotz lesen des Buches, einfach zum dumm :)

Echt super dein Tip, hat sofort funktioniert!
Aber komisch ist, das ich jetzt zwar über die links fahren kann und er wie er sollte die map auf den punkt positioniert aber leider nicht mehr den ballon anzeigt wenn ich auf den punkt selber klicke...aber das bekomm ich schon irgendwie hin...

Hast du vielleicht noch einen Tip, wie ich es schaffe Html in das Fenster zu bekommen?
Im Buch und der googleApi ref steht das es mit innerHtml geht, ich hab das auch eingebaut aber er zeig mir nur den namen der Person an, nicht die Stadt und auch nicht den HTML code ;(
Liegt das vielleicht auch daran das ich kein objekt extra erstellt habe?
Danke nochmals!

HTML: 
var centerLongitude  = 10.6788226040248;
var centerLatitude   = 53.8919890381801;
var startZoom = 7;
var map;
//Array für marker erstellen
//var gmarkers = [];
var html;
var faceoner_mappicon = new GIcon();

//fürs LOGO
faceoner_mappicon.image = 'faceoner_mappicon.png';
faceoner_mappicon.iconSize = new GSize(21, 43);
faceoner_mappicon.iconAnchor = new GPoint(24, 14);
faceoner_mappicon.infoWindowAnchor = new GPoint(24, 24);

function addMarker(latitude, longitude, name, id, town) {
	var marker = new 
	   GMarker(  new GLatLng(latitude, longitude),faceoner_mappicon);
           
       GEvent.addListener(marker, 'click',
	   function() {

			//Ein DOM-Element im HTML-Formular erzeugen
			//var inputForm = document.createElement("form");

			inputForm.innerHTML = '<fieldset style="width:150px;">'
				+ '<B>ich bin zu dämlich um html auszugeben</b>'
				+ '</fieldset>';
				
				marker.openInfoWindowHtml(name,town,inputForm);
				}		
	);
	map.addOverlay(marker);
	return marker;
}

// funktion um die Fenster per klick aufzumachen
function click_marker(id) {
	  markers[id].marker.openInfoWindowHtml(markers[id].name,markers[id].town);
	//gmarkers[id].openInfoWindowHtml();
}

function init()
{
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(centerLatitude,centerLongitude), startZoom);

		for(id in markers) {
			
		    markers[id].marker = addMarker(markers[id].latitude, markers[id].longitude, markers[id].name, markers[id].town);
			//addMarker(markers[id].latitude, markers[id].longitude, markers[id].name, markers[id].id);
		    //die Marker in das Array laden um später per klick das fenster anzuzeigen
			//gmarkers[id] = markers[id]; //markers;
			}
	}
}

window.onload = init;
window.onunload = GUnload;
 
openInfoWindowHTML erwartet 1 Parameter, und als solchen den auszugebenden HTML-Code als String.

Es ist also viel einfacher, als du es versuchst :)
(du erzeugst da ein form-HTMLObjekt, benötigt wird aber der Code dieses Formulars als String) :
Code: 
GEvent.addListener(marker, 
                  'click',
                  function() 
                    {
                      html = name+'<br>'+town+
                             '<form><fieldset style="width:150px;">'+ 
                             '<B>ich bin zu dämlich um html auszugeben</b>'+
                             '</fieldset></form>';
                      
                      marker.openInfoWindowHtml(html);
                    }		
);
 
Man, gibt es eigentlich auch was, was du nicht weißt?
Vielen, vielen Dank!

Geht das denn bei der "onmouse_over" lösung auch so?
Ich habs so versucht:

HTML: 
// funktion um die Fenster per klick aufzumachen
function click_marker(id) {
      html[id] = vorname+' ' +name+'<br />'+photo_code;  
	  markers[id].marker.openInfoWindowHtml(html[id]);  //openInfoWindowHtml(html);
	  //markers[id].marker.openInfoWindowHtml(markers[id].name,markers[id].town);  
	  //gmarkers[id].openInfoWindowHtml();
}

geht aber irgendwie nicht?
 
Die Sachen wie name, vorname und photo_code befinden sich ja vermutlich in markers[id]...daher musst du sie auch von dort holen.

Bsp:
Code: 
{ 
'latitude'  : '53.2112274311048', 
'longitude' : '10.5788226040248', 
'name'      : 'Mustermann',
'vorname'   : 'Max',
'photo_code': 'http://www.tutorials.de/forum/avatars/bensky.gif?dateline=1079044813' 
}
..............
Code: 
function click_marker(id) {
  var html=markers[id].vorname+' ' +markers[id].name+'<br /><img src="'+markers[id].photo_code+'">'; 
	markers[id].marker.openInfoWindowHtml(html);
}
 
Funktionier auch wunderbar.
Vielen Dank.
Machst du das eigentlich beruflich oder hast du davon einfach so, sooo viel Ahnung?
Gruß Ben :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück