examples/speed_test_example.html

<!DOCTYPE>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClustererPlus V3 Example</title>

    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        font-family: Arial;
        font-size: 14px;
      }

      #panel {
        float: left;
        width: 300px;
        height: 550px;
      }

      #map-container {
        margin-left: 300px;
      }

      #map {
        width: 100%;
        height: 550px;
      }

      #markerlist {
        height: 400px;
        margin: 10px 5px 0 10px;
        overflow: auto;
      }

      .title {
        border-bottom: 1px solid #e0ecff;
        overflow: hidden;
        width: 256px;
        cursor: pointer;
        padding: 2px 0;
        display: block;
        color: #000;
        text-decoration: none;
      }

      .title:visited {
        color: #000;
      }

      .title:hover {
        background: #e0ecff;
      }

      #timetaken {
        color: #f00;
      }

      .info {
        width: 200px;
      }

      .info img {
        border: 0;
      }

      .info-body {
        width: 200px;
        height: 200px;
        line-height: 200px;
        margin: 2px 0;
        text-align: center;
        overflow: hidden;
      }

      .info-img {
        height: 220px;
        width: 200px;
      }

    </style>

    <script src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
    <script src="../src/data.json" type="text/javascript"></script>
    <script type="text/javascript">
      var script = '<script type="text/javascript" src="../src/markerclusterer';
      if (document.location.search.indexOf('packed') !== -1) {
        script += '_packed';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>

    <script type="text/javascript" src="speed_test.js"></script>

    <script type="text/javascript">      
      google.maps.event.addDomListener(window, 'load', speedTest.init);
    </script>
  </head>
  <body>
    <div id="panel">
      <h3>An example of MarkerClustererPlus</h3>
      <p>
        <a href="?packed">Packed</a> |
        <a href="?">Standard</a> version of the script.
      </p>

      <div>
        <input type="checkbox" checked="checked" id="usegmm"/>
        <span>Use MarkerClusterer</span>
      </div>

      <div>
        Markers:
        <select id="nummarkers">
          <option value="10">10</option>
          <option value="50">50</option>
          <option value="100" selected="selected">100</option>
          <option value="500">500</option>
          <option value="1000">1000</option>
        </select>

        <span>Time used: <span id="timetaken"></span> ms</span>
      </div>

      <strong>Marker List</strong>
      <div id="markerlist">

      </div>
    </div>
    <div id="map-container">
      <div id="map"></div>
    </div>
  </body>
</html>