!!! 5
html
  head
    script(type="text/javascript", src="http://maps.google.com/maps/api/js?sensor=true")
    script(type="text/javascript", src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js")
    script(type="text/javascript", src="jquery.ui.map.full.min.js")
    link(rel='stylesheet', href='style.css'))
  body
    #map_canvas
    script
      $('#map_canvas').gmap({'zoom':11, 'center':'35.360556,138.727778'}).bind('init', function(ev, map) {
        $('#map_canvas').gmap('addMarker', {
            'position': '35.360556,138.727778',
            'bounds': false,
            'icon':new google.maps.MarkerImage(
              'https://si0.twimg.com/profile_images/1101313417/40dea9e7-aef7-4320-8d71-6d1108ffa98c.png',
              new google.maps.Size(32, 32),
              new google.maps.Point(0,0),
              new google.maps.Point(0, 32),
              new google.maps.Size(32, 32)
          )
        }).click(function() {
          $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this);
        });
      });

$(function () {
    var f = function(x) { return Math.pow(x,4) - Math.pow(x,2) + 6 };
    var s = function(x) { return 12 / (Math.abs(x)+1) };
    var g = function(x) { return 1/2 * Math.cos(6*x) + 7/2 };

    var d1 = [];
    var d2 = [];
    var d3 = [];
    var d4 = [];

    for (var i = -1; i <= 1; i += 0.1)
        d1.push([i, f(i)]);

    for (var i = -7; i <= -1; i += 0.1)
        d2.push([i, s(i)]);

    for (var i = 1; i <= 7; i += 0.1)
        d3.push([i, s(i)]);

    for (var i = -2; i <= 2.1; i += 0.1)
        d4.push([i, g(i)]);

    $.plot($("#placeholder"), [ { data:d1, color: "rgb(0,0,255)" }
                  , { data:d2, color: "rgb(0,0,255)" }
                  , { data:d3, color: "rgb(0,0,255)" }
                  , { data:d4, color: "rgb(0,0,255)" }
    ]);
});

$ dev_appserver.py --address=192.168.XXX.XXX prj