gmap_iframe.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <html>
  2. <head>
  3. <title>Iframe for my google Map</title>
  4. <script type="text/javascript"
  5. src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
  6. <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
  7. <script type="text/javascript" src="js/jquery-ui-1.8.15.custom.min.js"></script>
  8. <script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
  9. <style type="text/css">
  10. /* http://meyerweb.com/eric/tools/css/reset/
  11. v2.0 | 20110126
  12. License: none (public domain)
  13. */
  14. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  15. margin: 0;
  16. padding: 0;
  17. border: 0;
  18. font-size: 100%;
  19. font: inherit;
  20. vertical-align: baseline;
  21. }
  22. /* HTML5 display-role reset for older browsers */
  23. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  24. display: block;
  25. }
  26. body {
  27. line-height: 1;
  28. }
  29. ol, ul {
  30. list-style: none;
  31. }
  32. blockquote, q {
  33. quotes: none;
  34. }
  35. blockquote:before, blockquote:after, q:before, q:after {
  36. content: '';
  37. content: none;
  38. }
  39. table {
  40. border-collapse: collapse;
  41. border-spacing: 0;
  42. }
  43. </style>
  44. <script>
  45. // var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
  46. $(document).ready(function() {
  47. $('#map_canvas').gmap({
  48. zoom : 9,
  49. mapTypeId : google.maps.MapTypeId.HYBRID
  50. }).bind('init', function(ev, map) {
  51. parent.LG.wb.App.Browser.map = window.map = map;
  52. google.maps.event.addListener(map, 'dblclick', function(event) {
  53. // placeMarker(event.latLng);
  54. parent.LG.wb.App.Browser.findPages(event.latLng);
  55. });
  56. //panoramioLayer.setMap(map);
  57. });
  58. });
  59. function setZoom(z) {
  60. map.setZoom(z);
  61. }
  62. function clearMarkers() {
  63. $('#map_canvas').gmap('clear', 'markers');
  64. }
  65. /**
  66. *
  67. * @param m_opt {
  68. 'position' : p,
  69. 'bounds' : true
  70. }
  71. * @param inf_opt {
  72. 'content' : c
  73. }
  74. */
  75. function addMarker(m_opt, inf_opt, item, zoom) {
  76. // var item = item;
  77. var zoom = zoom;
  78. var m_opt = m_opt;
  79. var inf_opt = inf_opt;
  80. var map = map;
  81. var marker = $('#map_canvas').gmap('addMarker', m_opt, function(map, marker) {
  82. map.setZoom(zoom);
  83. map.panTo(marker.getPosition());
  84. }).click(function() {
  85. this.map.panTo(this.getPosition());
  86. item.panToMe();
  87. });
  88. // parent.LG.wb.App.Browser.setMarker(item,marker);
  89. return marker;
  90. }
  91. function addMarker_(position, content) {
  92. var p = position;
  93. var c = content;
  94. return $('#map_canvas').gmap('addMarker', {
  95. 'position' : p,
  96. 'bounds' : true
  97. }).click(function() {
  98. $('#map_canvas').gmap('openInfoWindow', {
  99. 'content' : c
  100. }, this);
  101. });
  102. }
  103. function domap(data) {
  104. console.log(data);
  105. $('#map_canvas').gmap(data);
  106. }
  107. </script>
  108. </head>
  109. <body>
  110. <div>
  111. <div id="map_canvas" style="width:792px;height:312px"></div>
  112. </div>
  113. </body>
  114. </html>