traffic-iframe.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
   4   <head>
   5     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   6     <title>Google Maps JavaScript API Example: Traffic Overlays</title>
   7     <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAEVw7F2FrOuAa5Y0vvjDw-hS4Kh9Yhf3T4FdRv0A-Zia9EqEJDhTpraMfVaMs-QO-RzRPqUC6tPLIqA"
   8       type="text/javascript"></script>
   9     <script type="text/javascript">
  10
  11     var map;
  12     var trafficInfo;
  13     var toggleState = 1;
  14
  15     function initialize() {
  16       if (GBrowserIsCompatible()) {
  17         map = new GMap2(document.getElementById("map_canvas"));
  18         map.setCenter(new GLatLng(39.966596,-75.123825), 9);
  19         map.setUIToDefault();
  20         var trafficOptions = {incidents:true};
  21         trafficInfo = new GTrafficOverlay(trafficOptions);
  22         map.addOverlay(trafficInfo);
  23       }
  24     }
  25
  26     function toggleTraffic() {
  27       if (toggleState == 1) {
  28         map.removeOverlay(trafficInfo);
  29         toggleState = 0;
  30       } else {
  31         map.addOverlay(trafficInfo);
  32         toggleState = 1;
  33       }
  34     }
  35     </script>
  36   </head>
  37
  38   <body onload="initialize()">
  39     <div id="map_canvas" style="width: 640px; height: 480px; float:left; border: 1px solid black;"></div>
  40     <br clear="all"/>
  41     <br/>
  42     <input type="button" value="Toggle Traffic" onClick="toggleTraffic();"/>
  43     <br/>
  44   </body>
  45 </html>
  46