ugrás a tartalomhoz

Google Map API - több pont elhelyezése - finomítás

Fedor · 2009. Ápr. 7. (K), 20.15
Sziasztok!

Van egy Google Map API-s térképem két ponttal. Ezek elhelyezése még ment:

////////

        function createMarker(point, duma) 
        {
          var marker = new GMarker(point);
          GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(duma);});
          map.addOverlay(marker);
	      marker.openInfoWindowHtml(duma)
          return marker;
        }
        
      var point = new GLatLng(47.8836, 19.813);
      var duma ="pont1";
      map.addOverlay(createMarker(point, duma));  
	  
	  ////////
	  
	  function createMarker(point2, duma2) 
        {
          var marker2 = new GMarker(point2);
          GEvent.addListener(marker2, "click", function() {marker2.openInfoWindowHtml(duma2);});
          map.addOverlay(marker2);
	      marker2.openInfoWindowHtml(duma2)
          return marker2;
        }
        
      var point2 = new GLatLng(47.874977, 19.800309);
      var duma2 ="pont2";
      map.addOverlay(createMarker(point2, duma2));       
	  
	  ////////
A gondom az, hogy a másodiknak megjelölt pont leírása a kis buborékban automatikusan felugrik, az elsőé viszont nem, miközben egyformának kéne lenniük, tehát vagy mind a kettőnek legyen alapból bubija, vagy (ami még jobb lenne) egyiknek sem. Sajnos a Google leírásában nem találtam meg a megoldást.

Esetleg van valakinek ezirányú tapasztalata? Előre is köszi a segítséget.
‹ css formázás TinyMce file upload, majd adatküldés a szerkesztőnek ›
 ■
1

felesleges sor(ok)

cSuwwi · 2009. Ápr. 8. (Sze), 01.31
A createMarker funkciók azonosak, felesleges 2x ugyanazt beszúrni, használhatja az összes meghívás ugyanazt a függvényt. Azért nyílt le, mert az openInfoWindowHtml a függvényben 2x is szerepelt (egyszer onclickre, meg egyszer közvetlenül utána)
function createMarker(point, duma)   
        {  
          var marker = new GMarker(point);  
          GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(duma);}); 
          map.addOverlay(marker);
          return marker;
        }  
          
      var point = new GLatLng(47.8836, 19.813);  
      var duma ="pont1";  
      map.addOverlay(createMarker(point, duma));    
                 
      var point2 = new GLatLng(47.874977, 19.800309);  
      var duma2 ="pont2";  
      map.addOverlay(createMarker(point2, duma2));
Mellesleg, ha nem ismernéd van a googlenek egy API játszótere, ott remekül lehet próbálgatni a beállításokat, és szinte minden google API-s fejlesztés elérhető:
Google AJAX APIs Playground
2

Jártam ott...

Fedor · 2009. Ápr. 8. (Sze), 08.56
Köszi, bevált. Így tényleg jobb, és még a kód is egyszerűbb. A későbbiekben sokkal több ponttal is meg kell csinálnom ugyanezt (akkor már adatbázisból), szóval minél rövidebb, annál jobb :-)

A játszótéren már jártam, próbálgattam, leszedtem a geocoder programot is, csak hát az angoltudásom, hát az sajnos nem 110%-os, így a nagyon finom részletek fölött néha átsiklok :-(
3

marker ID...?

hhanuman · 2010. Jan. 21. (Cs), 18.02
sziasztok, szükségem lenne egy profi segítségére: sidebar-ból linkelhető pontokat akarok létrehozni a térképen. az oké megcsinálom a markert, de eddig mindenhol csak tömbben tárolt és így is hivatkozott markerekre láttam példát, ami a blogspotnál a WYSIWYG szerkesztő és az xml fordító miatt nm működik (a "-okat pl csak "-ként eszi meg).
tud valaki írni egy rövid példát ahol adunk egy ID-t a markernek és hozzá kívülre egy a href linket, ahol onclick hatására az adott ID-jű markerre ugrik a térkép (getElementById) és mondjuk megnyitja az infoWindow-t?
ezzel szenvedek már 2 hete, tegnap 12 órán át próbálkoztam, valaki szabadítson meg...!
4

LabeledMarker

blacus · 2010. Jan. 21. (Cs), 22.44
lehet a megoldás.
Nézz rá erre
5

Text fájlból

Dömcsi · 2010. Jan. 21. (Cs), 23.21
Itt találsz egy egyszerű megoldást.
6

marker-hivatkozás tömb helyett ID-vel?

hhanuman · 2010. Jan. 22. (P), 12.08
@blacus:
ez tök jó, itt még nem jártam, de ez sem ad megoldást a problámámra: én csak a markerek kezelését szeretném tömbös helyett ID-alapúra megcsinálni, a markerek formázása (ikon, felirat, stb) az már gyerekjáték:)

@Dömcsi:
Mike Williams-szel, a tutorial készítőjével már vagy a tizedik levelet váltom:) jópofa segítőkész csávó, de még nem kaptam választ rá hogyan lehet kikerülni a markerek tömbben tárolását, mint ahogy a linkelt példádban is csinálja (var gmarkers = [];)

azért köszi a segítséget:P
valaki? ötlet?
7

valami ilyesmire gondoltam -a js-guruk debuggolhatják!

hhanuman · 2010. Jan. 22. (P), 12.49

//a térkép inicializálása, ez lényegtelen
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(37.4419, -122.1419), 13);


//itt kezdődik a móka
//az ekőző példánál maradva
//saját hozzátoldás: az ID változó, de nem tudom hol kéne deklarálni
function createMarker(point, duma)     
        {    
          var marker = new GMarker(point);
          var id;
          GEvent.addListener(marker, "click", function() 

{marker.openInfoWindowHtml(duma);});   
          map.addOverlay(marker); 
          return marker;  
        }    
//EZ ITT A KÉRDÉS: 
//hogyan hozzak létre egy függvényt, ami a linkre kattintáshoz fűzve a markerhez
//ugrasztja a térképet és megnyitja a szöveget?
//A markerre az ID-n keresztül szeretnék hivatkozni, de nem tudom
//szintaktikailag mi a helyes, hogyan kell attribútumot átadni            
function myclick(imarkerid) 
        {
          var markerid = document.getElementById(id)
          GEvent.trigger(markerid, "click");
          marker.openInfoWindowHtml(duma);
        }    
//létrehozzuk a pontokat     
//az ID betoldás az én bűnöm...
//ez alapján hivatkozunk az adott markerre
//nem tudom jó-e a szintaxis...
      var point = new GLatLng(37.4439, -122.1419);    
      var duma ="pont1";
      var id = '1'
      map.addOverlay(createMarker(point, duma));      
                   
      var point2 = new GLatLng(37.4419, -122.1439);    
      var duma2 ="pont2";    
      var id = '2'
      map.addOverlay(createMarker(point2, duma2));      
   
  }
}
és itt jönne a LÉNYEG: hogyan hozzak létre olyan linket, ami nem visz el sehova,
hanem kattintás hatására meghívja a függvényt, ami kikerese nekem ID alapján a markert, odaugrik és megnyitja a kis felhőjét?
hogyan kéne átadnom a függvénynek az ID-t hogy működjön?
//többféle variációt írok, nem tudom melyik a helyes:(...

<div id="links">
	<a href="#" onclick="myclick(1)">első link</a><br/>
	<a href="#" javascript:myclick(2)>második link</a><br/>
	<a href="javascript:void(0)" onclick="myclick(1)">harmadik link</a><br/>
</div>
8

Esetleges megoldás

blacus · 2010. Jan. 22. (P), 19.02
A linken amit mutattam van egy ilyen:

LabeledMarker.prototype.initialize = function(map) {
	GMarker.prototype.initialize.call(this, map);

	var div = document.createElement("div");
	div.className = this.labelClass;
	div.innerHTML = this.labelText;
	div.style.position = "absolute";
	map.getPane(G_MAP_MARKER_PANE).appendChild(div);

	this.map = map;
	this.div = div;
}
ha kiegészíted egy ilyennel:

LabeledMarker.prototype.initialize = function(map,id) {
   // többi kód
   div.id = 'marker_' + id;
}
És a marker meghívása:

for(var i=0; i<...)
{
<a href="#" onclick="myclick('marker_' + i)">i. link</a><br/>
}

Egy kicsit elnagyolt a kód, de a lényeget remélem látod.