Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP] Google Maps link to marker
Forum PHP.pl > Forum > Przedszkole
piotrd
7.08.2012, 20:00:59
w sekcji HEAD pobieram z SQL w pętli współrzędne i otrzymuję w efekcie 

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function mapa() {
  3. 	var opcje = {zoom: 15, center: pozycja, mapTypeId: google.maps.MapTypeId.ROADMAP}
  4. 	var mapa = new google.maps.Map(document.getElementById("GoogleMap"), opcje);
  5. 	var pozycja = new google.maps.LatLng(51.7596551014072, 19.45899602920531);
  6. 	var dymek = new google.maps.InfoWindow();
  7. 	var flaga = 'x.png';
  8.  
  9. 	var a_43 = new google.maps.InfoWindow ({content: '<p><span class="title">test5</span>,<br /><br />5</p>'});
  10. 	var b_43 = new google.maps.LatLng(51.76191289573248, 19.447795124359118);
  11. 	var c_43 = new google.maps.Marker({position: b_43, map: mapa, icon: flaga});
  12. 	google.maps.event.addListener(c_43, 'click', function() {a_43.open(mapa, c_43);});
  13.  
  14. 	var a_42 = new google.maps.InfoWindow ({content: '<p><span class="title">test4</span>,<br /><br />4</p>'});
  15. 	var b_42 = new google.maps.LatLng(51.76191289573248, 19.447795124359118);
  16. 	var c_42 = new google.maps.Marker({position: b_42, map: mapa, icon: flaga});
  17. 	google.maps.event.addListener(c_42, 'click', function() {a_42.open(mapa, c_42);});
  18.  
  19. 	var a_41 = new google.maps.InfoWindow ({content: '<p><span class="title">test3</span>,<br /><br />3</p>'});
  20. 	var b_41 = new google.maps.LatLng(51.757344065590104, 19.449125500030505);
  21. 	var c_41 = new google.maps.Marker({position: b_41, map: mapa, icon: flaga});
  22. 	google.maps.event.addListener(c_41, 'click', function() {a_41.open(mapa, c_41);});
  23.  
  24. 	var a_40 = new google.maps.InfoWindow ({content: '<p><span class="title">test2</span>,<br /><br />2</p>'});
  25. 	var b_40 = new google.maps.LatLng(51.76042542039522, 19.47418806106566);
  26. 	var c_40 = new google.maps.Marker({position: b_40, map: mapa, icon: flaga});
  27. 	google.maps.event.addListener(c_40, 'click', function() {a_40.open(mapa, c_40);});
  28.  
  29. 	var a_39 = new google.maps.InfoWindow ({content: '<p><span class="title">test1</span>,<br /><br />1</p>'});
  30. 	var b_39 = new google.maps.LatLng(51.7574503227045, 19.473801822967516);
  31. 	var c_39 = new google.maps.Marker({position: b_39, map: mapa, icon: flaga});
  32. 	google.maps.event.addListener(c_39, 'click', function() {a_39.open(mapa, c_39);});
  33.  
  34. }
  35. </script>
[HTML] pobierz, plaintext


na mapie mam ładnie pokazane markery z opisami pojawiającymi się w dymkach po kliknięciu na nie, następnie w sekcji BODY tworze w pętli linki 

[HTML] pobierz, plaintext 
  1. <ol>
  2. <li><strong><a href="java script:google.maps.event.addListener(d_43, 'click', function() {b_43.open(mapa, d_43);});">test5</a></strong> (5)</li>
  3. <li><strong><a href="java script:google.maps.event.addListener(d_42, 'click', function() {b_42.open(mapa, d_42);});">test4</a></strong> (4)</li>
  4. <li><strong><a href="java script:google.maps.event.addListener(d_41, 'click', function() {b_41.open(mapa, d_41);});">test3</a></strong> (3)</li>
  5. <li><strong><a href="java script:google.maps.event.addListener(d_40, 'click', function() {b_40.open(mapa, d_40);});">test2</a></strong> (2)</li>
  6. <li><strong><a href="java script:google.maps.event.addListener(d_39, 'click', function() {b_39.open(mapa, d_39);});">test1</a></strong> (1)</li>
  7. </ol>
[HTML] pobierz, plaintext


mam prośbę o podpowiedź co wstawić w HREF aby wyświetlić dany marker na mapie?
mls
8.08.2012, 12:31:04
Zmienna jest zdefiniowana wewnątrz funkcji i ma zasięg lokalny. Wobec tego nie widać jej nigdzie poza funkcją "mapa".
piotrd
8.08.2012, 21:11:17
ok rozumiem, ale gdy tworzę nową funkcję po 

[HTML] pobierz, plaintext 
  1. function mapa() {
  2. ...
  3. }
[HTML] pobierz, plaintext


zawierającą

[HTML] pobierz, plaintext 
  1. function link() {
  2. google.maps.event.addListener(c_39, 'click', function() {a_39.open(mapa, c_39);});
  3. }
[HTML] pobierz, plaintext


wtedy i tak nie działa
Pawel_W
9.08.2012, 00:01:05 
[HTML] pobierz, plaintext 
  1. var mapa;
  2. function mapa(){}
  3. function link(){}
[HTML] pobierz, plaintext

i wtedy nie zapominj z mapa powypieprzać te vary smile.gif
piotrd
9.08.2012, 12:28:53
za piękne aby było prawdziwe, męczę się z tym już 3 dzień bez efektów
przeniosłem vary poza funkcję mapa() ale linki nadal nie działają

cały html

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pl-PL">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>x</title>
  7. <link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
  8. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  9. <script type="text/javascript">
  10. var pozycja = new google.maps.LatLng(51.7596551014072, 19.45899602920531);
  11. var opcje = {zoom: 14, center: pozycja, mapTypeId: google.maps.MapTypeId.ROADMAP}
  12. var marker = new google.maps.Marker({position: pozycja, draggable: true});
  13. var dymek = new google.maps.InfoWindow();
  14. var flaga = 'x.png';
  15. var mapa;
  16.  
  17. var a_45, b_45, c_45;
  18. var a_44, b_44, c_44;
  19. var a_43, b_43, c_43;
  20.  
  21. function mapa() {
  22. 	mapa = new google.maps.Map(document.getElementById("GoogleMap"), opcje);
  23.  
  24. 	a_45 = new google.maps.InfoWindow ({content: '<p><span class="title">test</span><br /><br />test</p>'});
  25. 	b_45 = new google.maps.LatLng(51.75694559918423, 19.493585796661364);
  26. 	c_45 = new google.maps.Marker({position: b_45, map: mapa, icon: flaga});
  27. 	google.maps.event.addListener(c_45, 'click', function() {a_45.open(mapa, c_45);});
  28.  
  29. 	a_44 = new google.maps.InfoWindow ({content: '<p><span class="title">test</span><br /><br />test</p>'});
  30. 	b_44 = new google.maps.LatLng(51.75604239564689, 19.499765606231676);
  31. 	c_44 = new google.maps.Marker({position: b_44, map: mapa, icon: flaga});
  32. 	google.maps.event.addListener(c_44, 'click', function() {a_44.open(mapa, c_44);});
  33.  
  34. 	a_43 = new google.maps.InfoWindow ({content: '<p><span class="title">test</span><br /><br />test</p>'});
  35. 	b_43 = new google.maps.LatLng(51.7535983425582, 19.486805172271715);
  36. 	c_43 = new google.maps.Marker({position: b_43, map: mapa, icon: flaga});
  37. 	google.maps.event.addListener(c_43, 'click', function() {a_43.open(mapa, c_43);});
  38. }
  39. </script>
  40. </head>
  41.  
  42. <body onload="mapa();">
  43. <div id="GoogleMap"></div>
  44. <div id="form" style="float: left; margin-left: 20px;">
  45. </div>
  46. <div id="osoby" style="float: left; margin-left: 20px;">
  47. <p>x:</p>
  48. <ol>
  49. <li><strong><a href="#" onclick="java script:google.maps.event.addListener(c_45,'click',function(){a_45.open(mapa,c_45);return: false;});">test</a></strong>: test</li>
  50. <li><strong><a href="#" onclick="java script:google.maps.event.addListener(c_44,'click',function(){a_44.open(mapa,c_44);return: false;});">test</a></strong>: test</li>
  51. <li><strong><a href="#" onclick="java script:google.maps.event.addListener(c_43,'click',function(){a_43.open(mapa,c_43);return: false;});">test</a></strong>: test</li>
  52. </ol>
  53. </div>
  54. </body>
  55. </html>
  56.  
[HTML] pobierz, plaintext
Pawel_W
9.08.2012, 13:16:27
od kiedy w onclick podaje się kod po java script: questionmark.gif
piotrd
9.08.2012, 13:22:50
to 
[HTML] pobierz, plaintext 
  1. <a href="#" onclick="google.maps.event.addListener(c_47,'click',function(){a_47.open(mapa,c_47);return: false;});">
[HTML] pobierz, plaintext

i to
[HTML] pobierz, plaintext 
  1. a href="java script:google.maps.event.addListener(c_47,'click',function(){a_47.open(mapa,c_47);return: false;});">
[HTML] pobierz, plaintext

nie działa
d3ut3r
9.08.2012, 13:27:46
o coś takiego chodzi ? bo nie jestem pewien czy rozumiem twój problem smile.gif

http://jsfiddle.net/9pDmV/
piotrd
9.08.2012, 13:29:38
dokładnie tak, o to chodzi
d3ut3r
9.08.2012, 13:31:42
poczytaj o google.maps.event.trigger
piotrd
9.08.2012, 20:59:39
stwierdzam że to jest awykonalne bo nie można odwołać się to funkcji która już została zainicjowana przez <body onload>
musze wszystko napisac od nowa i w funkcji mapa() wykonać pętle linków które później wyświetlę na stronie
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.