PageRenderTime 56ms CodeModel.GetById 25ms RepoModel.GetById 1ms app.codeStats 0ms

/web/public/javascripts/jquery-ui-map/demos/jquery-mobile-example-3.html

https://github.com/ryantanner/thesis
HTML | 157 lines | 134 code | 23 blank | 0 comment | 0 complexity | 25b48ef4aa650082b3f3a9201ec3ebab MD5 | raw file
  1. <!DOCTYPE html>
  2. <html>
  3. <head profile="http://dublincore.org/documents/dcq-html/">
  4. <title>jQuery mobile with Google maps geo directions example</title>
  5. <meta name="keywords" content="Google maps, jQuery, plugin, mobile, iphone, ipad, android, HTML5, Geo search, Google direction" />
  6. <meta name="description" content="Geo directions example with jQuery mobile, Google maps and HTML5" />
  7. <meta http-equiv="content-language" content="en"/>
  8. <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
  9. <meta name="DC.title" content="jQuery mobile with Google maps geo search example" />
  10. <meta name="DC.subject" content="Google maps;jQuery;plugin;mobile;iphone;ipad;android;HTML5;Geo search;Google direction;" />
  11. <meta name="DC.description" content="Geo directions example with jQuery mobile, Google maps and HTML5" />
  12. <meta name="DC.creator" content="Johan S&auml;ll Larsson" />
  13. <meta name="DC.language" content="en"/>
  14. <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
  15. <style rel="stylesheet">
  16. body { background: #ddd; }
  17. .ui-body-c a.ui-link { color: #008595; font-weight: bold; text-decoration: none; }
  18. .hidden { display:none; }
  19. .min-width-480px label.ui-input-text { font-weight:bold; display: block; }
  20. .adp-directions { width:100%; }
  21. .adp-placemark, .adp-summary, .adp-legal { display:none; margin: 0; }
  22. .adp-placemark, .adp-step, .adp-stepicon, .adp-substep{ border-top: none;text-align:center; vertical-align: middle; padding: 0.8em 0; background:#e9eaeb;color:#3e3e3e;text-shadow:0 1px 1px #fff;background-image:-moz-linear-gradient(top,#f0f0f0,#e9eaeb);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f0f0f0),color-stop(1,#e9eaeb));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f0f0f0', EndColorStr='#e9eaeb')"}
  23. .adp-directions tr { border:1px solid #b3b3b3; }
  24. h2 { font-size: 16px; overflow: hidden; white-space: nowrap; display: block; }
  25. .more { text-align: center; }
  26. </style>
  27. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  28. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  29. <script type="text/javascript">
  30. // Demonstration purpose only...
  31. $(document).bind("mobileinit", function () {
  32. $.mobile.ajaxEnabled = true;
  33. });
  34. </script>
  35. <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
  36. <script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
  37. <script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
  38. <script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script>
  39. </head>
  40. <body>
  41. <div id="gmap-3" data-role="page">
  42. <div data-role="header">
  43. <h1><a data-ajax="false" href="/">jQuery mobile with Google maps</a> directions</h1>
  44. </div>
  45. <script type="text/javascript">
  46. $('#gmap-3').live("pageshow", function() {
  47. //$('#map_canvas_2').gmap('refresh');
  48. $('#map_canvas_1').gmap('getCurrentPosition', function(position, status) {
  49. if ( status === 'OK' ) {
  50. var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
  51. $('#map_canvas_1').gmap('get', 'map').panTo(latlng);
  52. $('#map_canvas_1').gmap('search', { 'location': latlng }, function(results, status) {
  53. if ( status === 'OK' ) {
  54. $('#from').val(results[0].formatted_address);
  55. }
  56. });
  57. } else {
  58. alert('Unable to get current position');
  59. }
  60. });
  61. });
  62. // To stop the click from looping into nonsense
  63. $('#gmap-3').live("pagecreate", function() {
  64. $('#map_canvas_1').gmap({'center': '59.3426606750, 18.0736160278'});
  65. $('#submit').click(function() {
  66. $('#map_canvas_1').gmap('displayDirections', { 'origin': $('#from').val(), 'destination': $('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(success, response) {
  67. if ( success ) {
  68. $('#results').show();
  69. } else {
  70. $('#results').hide();
  71. }
  72. });
  73. return false;
  74. });
  75. });
  76. </script>
  77. <div data-role="content">
  78. <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
  79. <div id="map_canvas_1" style="height:300px;"></div>
  80. <p>
  81. <label for="from">From</label>
  82. <input id="from" class="ui-bar-c" type="text" value="G&ouml;teborg, Sweden" />
  83. </p>
  84. <p>
  85. <label for="to">To</label>
  86. <input id="to" class="ui-bar-c" type="text" value="Stockholm, Sweden" />
  87. </p>
  88. <a id="submit" href="#" data-role="button" data-icon="search">Get directions</a>
  89. </div>
  90. <div id="results" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" style="display:none;">
  91. <div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">Results</div>
  92. <div id="directions"></div>
  93. <div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-bottom ui-btn-up-undefined"></div>
  94. </div>
  95. <h2>More Google maps and jQuery examples</h2>
  96. <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
  97. <li data-role="list-divider">More examples</li>
  98. <li><a data-ajax="false" href="advanced-example.html">Microformats, Google streetview and jQuery dialog example</a></li>
  99. <li><a data-ajax="false" href="other-examples.html">Click and drag events with Google geo search example</a></li>
  100. <li><a data-ajax="false" href="load JSON example.html">Import markers with JSON example</a></li>
  101. <li><a data-ajax="false" href="load Microformat example.html">Import markers with microformats example</a></li>
  102. <li><a data-ajax="false" href="load RDFa example.html">Import markers with RDFa example</a></li>
  103. <li><a data-ajax="false" href="load Microdata example.html">Import markers with microdata example</a></li>
  104. <li><a data-ajax="false" href="load Fusion.html">Import markers with Google Fusion tables</a></li>
  105. <li><a data-ajax="false" href="multiple maps example.html">Multiple maps on a single page example</a></li>
  106. <li><a data-ajax="false" href="basic-example.html">Google maps and jQuery example</a></li>
  107. <li><a data-ajax="false" href="google-maps-jquery-filtering.html">Filter markers example</a></li>
  108. </ul>
  109. </div>
  110. <div data-role="footer" data-theme="a">
  111. <h3>Need help?</h3>
  112. <p class="more">Please feel free to ask for help in the <a data-ajax="false" href="http://groups.google.com/group/jquery-ui-map-discuss">forum</a></p>
  113. </div>
  114. <div id="ft" class="hidden" itemscope itemtype="http://data-vocabulary.org/Person">
  115. Author:
  116. <span itemprop="name">Johan S&auml;ll Larsson</span>
  117. <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
  118. <span itemprop="locality">G&ouml;teborg</span>,
  119. <span itemprop="country-name">Sweden</span>
  120. </span>
  121. </div>
  122. </div>
  123. <script type="text/javascript">
  124. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  125. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  126. </script>
  127. <script type="text/javascript">
  128. try {
  129. var pageTracker = _gat._getTracker("UA-17614686-3");
  130. pageTracker._trackPageview();
  131. } catch(err) {}
  132. </script>
  133. </body>
  134. </html>