libs/js/jquery-geo-1.0a4/docs/examples/destroy.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>destroy example</title>
   5   <meta charset="utf-8">
   6   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   7   <meta name="description" content="An example of destroy">
   8   <meta name="author" content="Ryan Westphal">
   9   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
  10   <link rel="stylesheet" type="text/css" href="css/style.css" />
  11   <style type="text/css">
  12     #map
  13     {
  14       position: fixed;
  15       left: 0;
  16       top: 0;
  17       right: 0;
  18       bottom: 0;
  19     }
  20   </style>
  21 </head>
  22 <body>
  23   <div>
  24     <div id="map">
  25       <div class="info">
  26         <a href="../" class="docLink">&lt; docs</a>
  27         <h1>
  28           destroy</h1>
  29         <p>
  30           This example allows you to create and destroy the geomap widget and test that everything is returned to normal.</p>
  31         <button type="button" data-command="create">create</button>
  32         <button type="button" data-command="destroy">destroy</button>
  33       </div>
  34     </div>
  35   </div>
  36   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  37   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  38   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  39   <script>
  40     $(function () {
  41       $("#map").geomap({
  42         center: [-71.0595678, 42.3604823],
  43         zoom: 8
  44       });
  45
  46       var created = true;
  47
  48       $("button[data-command='create']").button().click(function () {
  49         if (!created) {
  50           $("#map").geomap({
  51             center: [-71.0595678, 42.3604823],
  52             zoom: 8
  53           });
  54           created = true;
  55         }
  56       });
  57
  58       $("button[data-command='destroy']").button().click(function () {
  59         if (created) {
  60           $("#map").geomap("destroy");
  61           created = false;
  62         }
  63       });
  64     });
  65   </script>
  66 </body>
  67 </html>