tutorials.de Buch-Aktion 02/2012
ERLEDIGT
JA
ANTWORTEN
10
ZUGRIFFE
1024
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    Avatar von bensky
    bensky bensky ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    (nrw)
    Beiträge
    191
    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-Code:
    <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-Code:
    //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;
     

  2. #2
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Moin Ben,



    könntest du bitte mal den Aufbau von markers[] posten, ohne diesen zu sehen, kann man nichts Genaues sagen.
     

  3. #3
    Avatar von bensky
    bensky bensky ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    (nrw)
    Beiträge
    191
    Hi Sven,

    also hier erst mal ein Auszug aus meinen markers:

    HTML-Code:
    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
    Geändert von bensky (16.09.08 um 01:03 Uhr)
     

  4. #4
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    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 :
    1
    2
    3
    4
    
    for(var id in markers)
    {
      [B]markers[id].marker=[/B]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 :
    1
    2
    3
    4
    
    function click_marker(id) 
    {
      [B]markers[id].marker[/B].openInfoWindowHtml(markers[id].name);
    }
     

  5. #5
    Avatar von bensky
    bensky bensky ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    (nrw)
    Beiträge
    191
    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-Code:
    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;
     

  6. #6
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    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 :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    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);
                        }       
    );
     

  7. #7
    Avatar von bensky
    bensky bensky ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    (nrw)
    Beiträge
    191
    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-Code:
    // 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?
     

  8. #8
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    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 :
    1
    2
    3
    4
    5
    6
    7
    
    { 
    'latitude'  : '53.2112274311048', 
    'longitude' : '10.5788226040248', 
    'name'      : 'Mustermann',
    'vorname'   : 'Max',
    'photo_code': 'http://www.tutorials.de/forum/avatars/bensky.gif?dateline=1079044813' 
    }
    ..............
    Code :
    1
    2
    3
    4
    
    function click_marker(id) {
      var html=markers[id].vorname+' ' +markers[id].name+'<br /><img src="'+markers[id].photo_code+'">'; 
        markers[id].marker.openInfoWindowHtml(html);
    }
     

  9. #9
    Avatar von bensky
    bensky bensky ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    (nrw)
    Beiträge
    191
    Funktionier auch wunderbar.
    Vielen Dank.
    Machst du das eigentlich beruflich oder hast du davon einfach so, sooo viel Ahnung?
    Gruß Ben
     

  10. #10
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Hauptberuflich bin ich Koch
     

  11. #11
    Avatar von bensky
    bensky bensky ist offline Mitglied Gold
    Registriert seit
    Mar 2004
    Ort
    (nrw)
    Beiträge
    191
    Is klar, und du backst den ganzen Tag Kekse
    Dank dir nochmal vielmals!!

    Wenn du so gut kochst wie du java lösungen in das keyboard hackst....man man man
     

Ähnliche Themen

  1. Google Maps "ReverseGeocoding"-Bsp. auf mehrere Maps anwenden
    Von jbender im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 30.03.10, 21:06
  2. Google Maps api
    Von Aurora-One im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 01.02.10, 21:15
  3. Google Maps API
    Von walle_89 im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 08.09.09, 10:15
  4. Google Maps
    Von weissi im Forum PHP
    Antworten: 12
    Letzter Beitrag: 03.02.09, 08:07
  5. Google-Maps Problem
    Von gege im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 05.12.06, 11:22