third-party/jquery-ui-1.10.2/demos/spinner/latlong.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Spinner - Map</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
   8         <script src="../../jquery-1.9.1.js"></script>
   9         <script src="../../external/jquery.mousewheel.js"></script>
  10         <script src="../../ui/jquery.ui.core.js"></script>
  11         <script src="../../ui/jquery.ui.widget.js"></script>
  12         <script src="../../ui/jquery.ui.button.js"></script>
  13         <script src="../../ui/jquery.ui.spinner.js"></script>
  14         <link rel="stylesheet" href="../demos.css">
  15         <script>
  16         $(function() {
  17                 function latlong() {
  18                         return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
  19                 }
  20                 function position() {
  21                         map.setCenter( latlong() );
  22                 }
  23                 $( "#lat, #lng" ).spinner({
  24                         step: .001,
  25                         change: position,
  26                         stop: position
  27                 });
  28
  29                 var map = new google.maps.Map( $("#map")[0], {
  30                         zoom: 8,
  31                         center: latlong(),
  32                         mapTypeId: google.maps.MapTypeId.ROADMAP
  33                 });
  34         });
  35         </script>
  36         <style>
  37         #map {
  38                 width:500px;
  39                 height:500px;
  40         }
  41         </style>
  42 </head>
  43 <body>
  44
  45 <label for="lat">Latitude</label>
  46 <input id="lat" name="lat" value="44.797">
  47 <br>
  48 <label for="lng">Longitude</label>
  49 <input id="lng" name="lng" value="-93.278">
  50
  51 <div id="map"></div>
  52
  53 <div class="demo-description">
  54 <p>Google Maps integration, using spinners to change latidude and longitude.</p>
  55 </div>
  56 </body>
  57 </html>