Google maps, zobraz data pro marker

Fórum › JavaScript, AJAX, jQuery

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.

Earl Cash0

Věrný člen

Kultivátor příspěvků ve starém fóru – 3.19 % z celku

14. 9. 2011 #1

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)

Earl Cash0

Věrný člen

16. 9. 2011 #2

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

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

Mam uplne stejny problem...

Nahlásit jako SPAM

IP: 85.13.103.–

Earl Cash0

Věrný člen

4. 12. 2011 #5

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

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.–

← Zpět na seznam vláken ← Zpět do Fóra