Guest User

Untitled

a guest
Aug 17th, 2018
123
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.68 KB | None | 0 0
  1. Google Maps v3. Infowindow with jquery tabs
  2. var checkText = "Coordinates";
  3.  
  4. var content = [
  5. '<div id="tabs">',
  6. '<ul>',
  7. '<li><a href="#tab_1"><span>One</span></a></li>',
  8. '<li><a href="#tab_2"><span>Two</span></a></li>',
  9. '</ul>',
  10. '<div id="tab_1">',
  11. '<p>Marker i:"</p>'+
  12. '<form id='button'>'+
  13. '<div>'+
  14. '<input type='submit' value='Submit' />'+
  15. '</div>'+
  16. '</form>',
  17. '</div>',
  18. '<div id="tab_2">',
  19. '<p>Info: '+checkText+'</p>',
  20. '</div>',
  21. '</div>'
  22. ].join('');
  23.  
  24. google.maps.event.addListener(infoWindow, 'domready', function() {
  25. $("#tabs").tabs();
  26. });
  27.  
  28. google.maps.event.addListener(marker, 'click', function(event) {
  29. infoWindow.setContent(content);
  30. infoWindow.open(map, marker);
  31. });
  32.  
  33. marker.draggrable = true; // letting the marker to move
  34. checkText = marker.getPosition(); // changing the tab info whenever marker moves
  35.  
  36. google.maps.event.addListener(marker, 'dragend', function(event) {
  37. checkText = this.getPosition();
  38. content = [
  39. '<div id="tabs">',
  40. '<ul>',
  41. '<li><a href="#tab_1"><span>One</span></a></li>',
  42. '<li><a href="#tab_2"><span>Two</span></a></li>',
  43. '</ul>',
  44. '<div id="tab_1">',
  45. '<p>Marker i:"</p>'+
  46. '<form id="button">'+
  47. '<div>'+
  48. '<input type="submit" value="Submit" />'+
  49. '</div>'+
  50. '</form>',
  51. '</div>',
  52. '<div id="tab_2">',
  53. '<p>Info: '+checkText+'</p>',
  54. '</div>',
  55. '</div>'
  56. ].join('');
  57.  
  58. });
  59.  
  60. (function () {
  61. var marker = new google.maps.Marker({
  62. map: map,
  63. draggable: false,
  64. position: new google.maps.LatLng(40.30, -3.71)
  65. });
  66. var content = "<div id='tabs'>" +
  67. "<form id='button'>" +
  68. "<div>" +
  69. "<input id='btn' type='submit' value='Submit'/>" +
  70. "</div>" +
  71. "</form>" +
  72. "</div>";
  73.  
  74. google.maps.event.addListener(marker, 'click', function (event) {
  75. infoWindow.setContent(content);
  76. infoWindow.open(map, this);
  77. map.setCenter(this.getPosition());
  78.  
  79. });
  80.  
  81. google.maps.event.addListener(infoWindow, 'domready', function (e) {
  82. //attach the click event to the button.
  83. document.forms.button.btn.onclick = function (e) {
  84. e.preventDefault(); //cancels the post back.
  85. var currentZoomLevel = map.getZoom();
  86. map.setZoom(currentZoomLevel - 2); //zoom out two levels
  87. };
  88. });
  89.  
  90. })();
Add Comment
Please, Sign In to add comment