Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]OnClick do elementu
Forum PHP.pl > Forum > Przedszkole
Contritio
Witam serdecznie

Mam na mapie google naniesione elementy, są to ikony. Po kliknięciu w ikonkę potrzebuję, aby wyskoczył mi dialogbox jaki mam już stworzony. Problem w tym iż nie wiem jak napisać funkcje w Jquery aby po kliknięciu w tą naniesiona już ikonkę pokazywał mi się dialogbox.

Kod odnośnie ikony naniesionej na googlemaps

<code>
var ikona2 = new google.maps.MarkerImage("img/car.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var cien2 = new google.maps.MarkerImage("img/car.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);
dodajMarker({position: new google.maps.LatLng(52.4101,12.6033), title: 'ZPL92831', icon: ikona2, shadow: cien2});
</code>

a żeby uruchomić dialogbox:

<a href="#modal">Click me!</a>
Aqu
  1. google.maps.event.addListener(marker, 'click', function() {
  2. $('#modal').click();
  3. });

Contritio
Coś chyba źle wpisałem, bo nic sie nie pojawia tongue.gif

  1. <!-- Dialog Box -->
  2.  
  3. <div class="remodal" data-remodal-id="modal">
  4. <div id="control_panel">
  5. <h2>auto 1</h2>
  6. <!-- <img src="img/nagrzewnica.png"> -->
  7.  
  8. <div id="control_panel_left">
  9. <ul>
  10. <li>Temperatura obecna:</li>
  11. <li>Ustawienie temperatury:</li>
  12. <li>Status:</li>
  13. </ul>
  14. </div>
  15. <div id="control_panel_right">
  16. <ul>
  17. 20&ordm;C<hr>
  18. <form action="#">
  19. <input class="textbox" type="text" name="temp" value="lel">
  20. <input class="textbox" type="hidden" name="lel" value="1">
  21. <input class="textbox" type="hidden" name="lel" value="1">
  22. <input class="textbox" type="hidden" name="lel" value="3">
  23. <input class= "set_button" type="submit" value="Submit">
  24. </form><hr>
  25. aktywna
  26. </ul>
  27. </div>
  28. </div>
  29. </div>
  30.  
  31.  
  32.  
  33. <div id="googlemaps">
  34.  
  35. <script type="text/javascript">
  36. <!--
  37. var mapa; // obiekt globalny
  38.  
  39. function dodajMarker(opcjeMarkera)
  40. {
  41. opcjeMarkera.map = mapa;
  42. var marker = new google.maps.Marker(opcjeMarkera);
  43. }
  44.  
  45. function mapaStart()
  46. {
  47. var wspolrzedne = new google.maps.LatLng(54.587599,15.709011);
  48. var opcjeMapy = {
  49. zoom: 5,
  50. center: wspolrzedne,
  51. mapTypeId: google.maps.MapTypeId.MAPS
  52. };
  53. mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
  54.  
  55. // wspólne cechy ikon
  56. var rozmiar = new google.maps.Size(32,32);
  57. var rozmiar_cien = new google.maps.Size(59,32);
  58. var punkt_startowy = new google.maps.Point(0,0);
  59. var punkt_zaczepienia = new google.maps.Point(16,16);
  60.  
  61. // ikonki
  62.  
  63. var ikona2 = new google.maps.MarkerImage("img/car.png", rozmiar, punkt_startowy, punkt_zaczepienia);
  64. var cien2 = new google.maps.MarkerImage("img/car.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);
  65. dodajMarker({position: new google.maps.LatLng(53.4101,14.6033), title: 'ZS88203', icon: ikona2, shadow: cien2, });
  66.  
  67. var ikona2 = new google.maps.MarkerImage("img/car.png", rozmiar, punkt_startowy, punkt_zaczepienia);
  68. var cien2 = new google.maps.MarkerImage("img/car.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);
  69. dodajMarker({position: new google.maps.LatLng(52.4101,12.6033), title: 'ZPL92831', icon: ikona2, shadow: cien2});
  70.  
  71. var ikona2 = new google.maps.MarkerImage("img/oil_icon.png", rozmiar, punkt_startowy, punkt_zaczepienia);
  72. var cien2 = new google.maps.MarkerImage("img/oil_icon.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);
  73. dodajMarker({position: new google.maps.LatLng(53.4101,11.6033), title: 'Stacja benzynowa', icon: ikona2, shadow: cien2});
  74.  
  75. google.maps.event.addListener(marker, 'click', function() {
  76. $('#modal').click();
  77. });
  78.  
  79. }
  80. </script>
  81.  
  82.  
  83. <div id="mapka"></div>
  84. </div>
  85.  
  86.  
  87.  
  88. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  89. <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
  90. <script src="js/jquery.remodal.js"></script>
  91.  
  92. </body>
  93. </html>
  94.  


Up

Nikt nie wie jak to ugryźć ? tongue.gif
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.