Template

The Maps Template page is a testing area containing a map element, three textboxes, three buttons, and a textarea (where you add text with print()).

(bare minimum version)

How to make jsfiddle work (there are many ways, this works for me)

  1. Choose "no wrap (body)" under framework
  2. In the HTML panel: <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <div id="map_canvas"></div> 
  3. In the CSS panel:  htmlbody#map_canvas margin0padding0height100% }
  4. In the JavaScript panel: everything in between <script></script>
  5. Add google.maps.event.addDomListener(window'load'initialize);  at the end of JavaScript, or  window.onload initialize;
  6. Click "Run"


<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
      table { width: 100%; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function $(id) { return document.getElementById(id); }
      function print(txt) { $("console").value += txt + "\n"; }
      
      var map;
      var mapOptions = {
        center: new google.maps.LatLng(0.0, 0.0),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };


      function initialize() {
        map = new google.maps.Map($("map_canvas"), mapOptions);
      }


      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <table border="0">
      <tr>
        <td width="70%" valign="top" id="map_canvas">
        </td>
        <td width="30%" valign="top">
          Interaction Form
          <form id="form">
            text1 <input id="text1" type="text"><br />
            text2 <input id="text2" type="text"><br />
            text3 <input id="text3" type="text"><br />
            
            <input id="button1" type="button" value="Button 1">
            <input id="button2" type="button" value="Button 2">
            <input id="button3" type="button" value="Button 3">
            <br /><br />
            <textarea id="console" cols="30" rows="20"></textarea>
          </form>
        </td>
      </tr>
    </table>
  </body>
</html>

No comments:

Post a Comment