Google maps, zobraz data pro marker – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Google maps, zobraz data pro marker – JavaScript, AJAX, jQuery – Fórum – Programujte.comGoogle maps, zobraz data pro marker – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.
Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Earl Cash0
Věrný člen
14. 9. 2011   #1
-
0
-

Zdravím,

řeším problém, jak pro určitý marker zobrazit data. V dokumentaci google píše o tzv. "closures". Použil jsem tedy něco podobného, jen pro svůj účel, ale stejně se mi nedaří dosáhnout očekávaného výsledku.

Data beru z db, pomocí php je vypíšu v JSON formátu do hidden inputu. O zbytek se pak stará následující javascript:

marker_icon = "../img/flag.png";
map = null;
map_center_pos = new google.maps.LatLng (63.54855223203644, 96.85546875);
markers = new Array();
info_bubble = null;
data = null; // data z databaze (prenos pomoci JSON formatu)

function str2latlng (text)
{
    var latlng = text.split (",");
    return new google.maps.LatLng (latlng[0], latlng[1]);
}



function showInfo (marker, data_index)
{

   if ( info_bubble != null ){
     info_bubble.close();
     info_bubble = null;
   }

   if ( data_index < 0 || data_index > data.length ){
     alert ("data_index: out of range.");
     return;
   }

   info_bubble_content = "<h3>"+data[data_index]["name"]+"</h3>";
   info_bubble_content += "Ulice: "+data[data_index]["street"]+"<br />";
   info_bubble_content += "Město: "+data[data_index]["city"]+"<br />";
   info_bubble_content += "Tel: "+data[data_index]["phone"]+"<br />";
   info_bubble_content += "Fax: "+data[data_index]["fax"]+"<br />";
   info_bubble_content += "Mob: "+data[data_index]["cell"]+"<br />";
   info_bubble_content += "Email: <a href='mailto:"+data[data_index]["email"]+"'>"+data[data_index]["email"]+"</a> <br />";
   info_bubble_content += "WWW: <a href='http://"+data[data_index]["website"]+"' target='_blank'>"+data[data_index]["website"]+"</a> <br />";
   info_bubble = new google.maps.InfoWindow ();
   info_bubble.setContent (info_bubble_content);

   google.maps.event.addListener (marker, "click", function () { info_bubble.open (map, marker) });
}



function initialize_map ()
{
   var mapOptions = {
         zoom:3,
	 center: map_center_pos,
 	 mapTypeId: google.maps.MapTypeId.ROADMAP
   };

   data = eval ('('+document.getElementById("prodejci_pos").value+')');
   map = new google.maps.Map (document.getElementById ("map_canvas"), mapOptions);

   for (i=0;i<data.length;i++){
     if (data[i]["latlng"] == null)
       continue;

     markers[i] = (new google.maps.Marker ( { position: str2latlng (data[i]["latlng"]), map: map, title: data[i]["name"], icon: marker_icon } ) );
     showInfo (markers[i], i);
   }

}


google.maps.event.addDomListener (window, "load", initialize_map);

Problém je, že se zobrazí pouze poslední obsah z data[] (logické, protože se používá pouze jedna proměnná pro uchování infowindow). Jde mi tedy o identifikaci jednotlivých markerů a jejich provázání s obsahem v data[]. Nějaké nápady? Zkoušel jsem hledat kvantum informací na jiných forech, ale nic mě nenasměrovalo správným směrem.

btw, Aurora super, ale ještě si zvykám. :)

Nahlásit jako SPAM
IP: 88.146.130.–
Oh my goodness, shut me down! Machines making machines. How perverse. (C-3PO)
Reklama
Reklama
Earl Cash0
Věrný člen
16. 9. 2011   #2
-
0
-

Tak jsem trošku přepracoval svou myšlenku do vzorového příkladu. Tentokrát je problém v platnosti identifikátoru (i).

<html>
    <head>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&region=cz"></script>
    </head>
    <body>
        <div id="map_canvas" style="width:80%;margin 0 auto;border:1px solid black; height:500px;"></div>
        <script type="text/javascript">
        var mapOptions = {
            zoom:3,
            center: new google.maps.LatLng (0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
            data = new Array ();
            data[0] = {"name":"test #01", "description":"description01010101"};
            data[1] = {"name":"test #02", "description":"description01010101"};
            data[2] = {"name":"test #03", "description":"description01010101"};
            markers = new Array ();
            
            map = new google.maps.Map (document.getElementById ("map_canvas"), mapOptions);
            info = null;
            var lat = 0;
            var lng = 0;

            for (i=0;i<data.length;i++){
                markers[i] = new google.maps.Marker ( { position: new google.maps.LatLng (lat, lng), map: map, title: "test one" } );
                markers[i].set ("data_id", i);
                google.maps.event.addListener (markers[i], "datatransfer", function (marker) { info = new google.maps.InfoWindow (); info.setContent (data[marker.data_id]); info.open (map, marker); });
                google.maps.event.addListener (markers[i], "click", function () { google.maps.event.trigger (markers[i], "datatransfer", markers[i]); });
                lat += 5;
                lng += 5;
            }
        </script>
    </body>
</html>

Napadá mě, jestli nejde nějakým způsobem získat objekt markeru, na který se kliknulo a  z něj pak vytáhnout data_id. Hledal jsem co všechno se přenáší v objektu event, ale nic použitelného kromě latLng jsem nenašel ( a to bohužel použít nemohu, protože souřadnice mohou být zadány s různým počtem desetinných míst). Opravdu vás nic nenapadá? Možná na celý problém nahlížím ze špatného úhlu. Hodilo by se mi malé nakopnutí.

Nahlásit jako SPAM
IP: 46.36.57.–
Oh my goodness, shut me down! Machines making machines. How perverse. (C-3PO)
Earl Cash0
Věrný člen
17. 9. 2011   #3
-
0
-

Díky *všem* za pomoc.

Nahlásit jako SPAM
IP: 46.36.57.–
Oh my goodness, shut me down! Machines making machines. How perverse. (C-3PO)
zelig
~ Anonymní uživatel
1 příspěvek
3. 12. 2011   #4
-
0
-

Mam uplne stejny problem...

Nahlásit jako SPAM
IP: 85.13.103.–
Řešení
Earl Cash0
Věrný člen
4. 12. 2011   #5
-
0
-
Vyřešeno Nejlepší odpověď

No nakonec se mi to podařilo vyřešit timto způsobem:

	<script type="text/javascript">
		marker_icon = "../img/flag.png";
		map = null;
		map_center_pos = new google.maps.LatLng (49.88755653624282, 15.57861328125);
		markers = new Array();
		info_bubble = null;
		data = null; // data z databaze (prenos pomoci JSON formatu)

		function str2latlng (text)
		{
			var latlng = text.split (",");
			return new google.maps.LatLng (latlng[0], latlng[1]);
		}

		function showInfo (event)
		{
			if ( info_bubble != null ){
				info_bubble.close();
				info_bubble = null;
			}

			data_index = -1;

			for (i=0;i<data.length;i++){
				var marker_latlng = str2latlng (data[i]["latlng"]);
				if ( marker_latlng.equals (event.latLng) ){
					data_index = i;
					break;
				}
			}

			if ( data_index == -1 ){
				return;
			}

			map.setCenter (event.latLng);

			info_bubble_content = "<h3>"+data[data_index]["name"]+"</h3>";
			info_bubble_content += "Ulice: "+data[data_index]["street"]+"<br />";
			info_bubble_content += "Město: "+data[data_index]["city"]+"<br />";
			info_bubble_content += "Tel: "+data[data_index]["phone"]+"<br />";
			info_bubble_content += "Fax: "+data[data_index]["fax"]+"<br />";
			info_bubble_content += "Mob: "+data[data_index]["cell"]+"<br />";
			info_bubble_content += "Email: <a href='mailto:"+data[data_index]["email"]+"'>"+data[data_index]["email"]+"</a> <br />";
			info_bubble_content += "WWW: <a href='http://"+data[data_index]["website"]+"' target='_blank'>"+data[data_index]["website"]+"</a> <br />";
			info_bubble = new google.maps.InfoWindow ();
			info_bubble.setContent (info_bubble_content);
			info_bubble.setPosition (event.latLng);
			info_bubble.open (map);
		}

		function initialize_map ()
		{
			var mapOptions = {
				zoom:7,
				center: map_center_pos,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			
			data = eval ('('+document.getElementById("prodejci_pos").value+')');
			map = new google.maps.Map (document.getElementById ("map_canvas"), mapOptions);

			for (i=0;i<data.length;i++){
				if (data[i]["latlng"] == null)
					continue;
				markers[i] = (new google.maps.Marker ( { position: str2latlng (data[i]["latlng"]), map: map, title: data[i]["name"], icon: marker_icon } ) );
				google.maps.event.addListener (markers[i], "click", showInfo);
			}
		}

		google.maps.event.addDomListener (window, "load", initialize_map);
	</script>
Nahlásit jako SPAM
IP: 46.36.57.–
Oh my goodness, shut me down! Machines making machines. How perverse. (C-3PO)
Jiljí Kocian
~ Anonymní uživatel
1 příspěvek
18. 6. 2013   #6
-
0
-

Dobrý den,

     nejsem moc zběhlý v internetu. Již několik měsíců se snažím doplnit značku-terčík u našeho hotelu Pod sedlem v Loučné nad Desnou-Rejhoticích, což je v Jeseníkách okr. Šumperk. Při zadání pokynu ubytování Kouty nad Desnou vyjede příslušná mapka v hotely a ubytovnami. Např. hotel Musil má terčík A, hotel Dlouhé Stráně terč B. Náš hotel Pod sedlem, který je hned tesně pod hotelem Dlouhé Stráně a je neméně důležitý, je bez označení terčem. Máme GPS polohu 50 5 58.815 N,17 6 24.638 E.

     Snažně Vás prosím, pomozte mi problém napravit, jelikož jsme v dané chvíli neviditelní a případní hosté nás komplikovaně hledají. FIRMU JILJÍ KOCIAN S HOTELM POD SEDLEM 788 11LOUČNÁ NAD DESNOU-REJHOTICE 131  MÁM UVEDENOU VE FIRMÁCH GOOGLE.

     Děkuji mnohokrát a zůstávám s pozdravem

                       Jiljí Kocian, hotel Pod sedlem

Nahlásit jako SPAM
IP: 194.228.11.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 21 hostů

Podobná vlákna

Google maps — založil plasmo

Google maps vzdialenosť — založil Anonym

Google maps API — založil paloS_1

Google Maps bez API — založil Neregistrovaný

Google Maps API návod — založil kotajda

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý