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:
  1. ////////  
  2.   
  3.         function createMarker(point, duma)   
  4.         {  
  5.           var marker = new GMarker(point);  
  6.           GEvent.addListener(marker, "click"function() {marker.openInfoWindowHtml(duma);});  
  7.           map.addOverlay(marker);  
  8.           marker.openInfoWindowHtml(duma)  
  9.           return marker;  
  10.         }  
  11.           
  12.       var point = new GLatLng(47.8836, 19.813);  
  13.       var duma ="pont1";  
  14.       map.addOverlay(createMarker(point, duma));    
  15.         
  16.       ////////  
  17.         
  18.       function createMarker(point2, duma2)   
  19.         {  
  20.           var marker2 = new GMarker(point2);  
  21.           GEvent.addListener(marker2, "click"function() {marker2.openInfoWindowHtml(duma2);});  
  22.           map.addOverlay(marker2);  
  23.           marker2.openInfoWindowHtml(duma2)  
  24.           return marker2;  
  25.         }  
  26.           
  27.       var point2 = new GLatLng(47.874977, 19.800309);  
  28.       var duma2 ="pont2";  
  29.       map.addOverlay(createMarker(point2, duma2));         
  30.         
  31.       ////////         
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.
 
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)
  1. function createMarker(point, duma)     
  2.         {    
  3.           var marker = new GMarker(point);    
  4.           GEvent.addListener(marker, "click"function() {marker.openInfoWindowHtml(duma);});   
  5.           map.addOverlay(marker);  
  6.           return marker;  
  7.         }    
  8.             
  9.       var point = new GLatLng(47.8836, 19.813);    
  10.       var duma ="pont1";    
  11.       map.addOverlay(createMarker(point, duma));      
  12.                    
  13.       var point2 = new GLatLng(47.874977, 19.800309);    
  14.       var duma2 ="pont2";    
  15.       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
  1. //a térkép inicializálása, ez lényegtelen  
  2.   if (GBrowserIsCompatible()) {  
  3.     var map = new GMap2(document.getElementById("map_canvas"));  
  4.     map.setCenter(new GLatLng(37.4419, -122.1419), 13);  
  5.   
  6.   
  7. //itt kezdődik a móka  
  8. //az ekőző példánál maradva  
  9. //saját hozzátoldás: az ID változó, de nem tudom hol kéne deklarálni  
  10. function createMarker(point, duma)       
  11.         {      
  12.           var marker = new GMarker(point);  
  13.           var id;  
  14.           GEvent.addListener(marker, "click"function()   
  15.   
  16. {marker.openInfoWindowHtml(duma);});     
  17.           map.addOverlay(marker);   
  18.           return marker;    
  19.         }      
  20. //EZ ITT A KÉRDÉS:   
  21. //hogyan hozzak létre egy függvényt, ami a linkre kattintáshoz fűzve a markerhez  
  22. //ugrasztja a térképet és megnyitja a szöveget?  
  23. //A markerre az ID-n keresztül szeretnék hivatkozni, de nem tudom  
  24. //szintaktikailag mi a helyes, hogyan kell attribútumot átadni              
  25. function myclick(imarkerid)   
  26.         {  
  27.           var markerid = document.getElementById(id)  
  28.           GEvent.trigger(markerid, "click");  
  29.           marker.openInfoWindowHtml(duma);  
  30.         }      
  31. //létrehozzuk a pontokat       
  32. //az ID betoldás az én bűnöm...  
  33. //ez alapján hivatkozunk az adott markerre  
  34. //nem tudom jó-e a szintaxis...  
  35.       var point = new GLatLng(37.4439, -122.1419);      
  36.       var duma ="pont1";  
  37.       var id = '1'  
  38.       map.addOverlay(createMarker(point, duma));        
  39.                      
  40.       var point2 = new GLatLng(37.4419, -122.1439);      
  41.       var duma2 ="pont2";      
  42.       var id = '2'  
  43.       map.addOverlay(createMarker(point2, duma2));        
  44.      
  45.   }  
  46. }  
é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:(...
  1. <div id="links">  
  2.     <a href="#" onclick="myclick(1)">első link</a><br/>  
  3.     <a href="#" javascript:myclick(2)>második link</a><br/>  
  4.     <a href="javascript:void(0)" onclick="myclick(1)">harmadik link</a><br/>  
  5. </div>  
8

Esetleges megoldás

blacus · 2010. Jan. 22. (P), 19.02
A linken amit mutattam van egy ilyen:
  1. LabeledMarker.prototype.initialize = function(map) {  
  2.     GMarker.prototype.initialize.call(this, map);  
  3.   
  4.     var div = document.createElement("div");  
  5.     div.className = this.labelClass;  
  6.     div.innerHTML = this.labelText;  
  7.     div.style.position = "absolute";  
  8.     map.getPane(G_MAP_MARKER_PANE).appendChild(div);  
  9.   
  10.     this.map = map;  
  11.     this.div = div;  
  12. }  
ha kiegészíted egy ilyennel:
  1. LabeledMarker.prototype.initialize = function(map,id) {  
  2.    // többi kód  
  3.    div.id = 'marker_' + id;  
  4. }  
É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.