{
 "metadata": {
  "name": "",
  "signature": "sha256:66b28a33ea105105cc4e35233bb791d55b50e944f3337895b3b6849f7c3fa5df"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "https://developers.google.com/maps/ specifically [Google Maps JavaScript API v3 \u2014 Google Developers](https://developers.google.com/maps/documentation/javascript/)\n",
      "\n",
      "Go to [Getting Started - Google Maps JavaScript API v3 \u2014 Google Developers](https://developers.google.com/maps/documentation/javascript/tutorial)\n",
      "\n",
      "How to read in from a local file -- use script?"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.core.display import HTML, Javascript"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 1
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# load the Google Maps API library\n",
      "# TO DO:  make it easy to add API key\n",
      "\n",
      "def gmap_init():\n",
      "    js = \"\"\"\n",
      "window.gmap_initialize = function() {};\n",
      "$.getScript('https://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=gmap_initialize');\n",
      "\"\"\"\n",
      "    return Javascript(data=js)\n",
      "\n",
      "gmap_init()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "\n",
        "window.gmap_initialize = function() {};\n",
        "$.getScript('https://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=gmap_initialize');\n"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 2,
       "text": [
        "<IPython.core.display.Javascript at 0x10211b8d0>"
       ]
      }
     ],
     "prompt_number": 2
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<style type=\"text/css\">\n",
      "  .map-canvas { height: 300px; }\n",
      "</style"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<style type=\"text/css\">\n",
        "  .map-canvas { height: 300px; }\n",
        "</style"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10211be10>"
       ]
      }
     ],
     "prompt_number": 3
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# generate a random id\n",
      "\n",
      "import uuid\n",
      "div_id = 'i' + str(uuid.uuid4())\n",
      "\n",
      "html = \"\"\"<div id=\"%s\" class=\"map-canvas\"/>\"\"\" % (div_id)\n",
      "\n",
      "js = \"\"\"\n",
      "<script type=\"text/Javascript\">\n",
      "  (function(){\n",
      "    var mapOptions = {\n",
      "        zoom: 8,\n",
      "        center: new google.maps.LatLng(-34.397, 150.644)\n",
      "      };\n",
      "\n",
      "    var map = new google.maps.Map(document.getElementById('%s'),\n",
      "          mapOptions);\n",
      "  })();  \n",
      "</script>\n",
      "\"\"\" % (div_id)\n",
      "\n",
      "HTML(html+js)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"i01cf52c4-de2f-476b-9e61-c4a24428335e\" class=\"map-canvas\"/>\n",
        "<script type=\"text/Javascript\">\n",
        "  (function(){\n",
        "    var mapOptions = {\n",
        "        zoom: 8,\n",
        "        center: new google.maps.LatLng(-34.397, 150.644)\n",
        "      };\n",
        "\n",
        "    var map = new google.maps.Map(document.getElementById('i01cf52c4-de2f-476b-9e61-c4a24428335e'),\n",
        "          mapOptions);\n",
        "  })();  \n",
        "</script>\n"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 4,
       "text": [
        "<IPython.core.display.HTML at 0x102117dd0>"
       ]
      }
     ],
     "prompt_number": 4
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import uuid\n",
      "\n",
      "def gmap(lat=37.8717,long=-122.2728,zoom=8):\n",
      "\n",
      "    div_id = 'i' + str(uuid.uuid4())\n",
      "\n",
      "    html = \"\"\"<div id=\"%s\" class=\"map-canvas\"/>\"\"\" % (div_id)\n",
      "\n",
      "    js = \"\"\"\n",
      "    <script type=\"text/Javascript\">\n",
      "      (function(){\n",
      "        var mapOptions = {\n",
      "            zoom: %s,\n",
      "            center: new google.maps.LatLng(%s, %s)\n",
      "          };\n",
      "\n",
      "        var map = new google.maps.Map(document.getElementById('%s'),\n",
      "              mapOptions);\n",
      "      })();  \n",
      "    </script>\n",
      "    \"\"\" % (zoom, lat,long, div_id)\n",
      "\n",
      "    return HTML(html+js)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 5
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import jinja2\n",
      "\n",
      "TEMPLATE = \"\"\"{{greeting}}, {{name}}\"\"\"\n",
      "\n",
      "my_template = jinja2.Template(TEMPLATE)\n",
      "my_template.render(greeting=\"hello\", name=\"RY\")"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 6,
       "text": [
        "u'hello, RY'"
       ]
      }
     ],
     "prompt_number": 6
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Can we ask google for list of instantiated maps?"
     ]
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Plotting markers"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "https://developers.google.com/maps/documentation/javascript/markers\n",
      "\n",
      "    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);\n",
      "    var mapOptions = {\n",
      "      zoom: 4,\n",
      "      center: myLatlng\n",
      "    }\n",
      "    var map = new google.maps.Map(document.getElementById(\"map-canvas\"), mapOptions);\n",
      "\n",
      "    // To add the marker to the map, use the 'map' property\n",
      "    var marker = new google.maps.Marker({\n",
      "        position: myLatlng,\n",
      "        map: map,\n",
      "        title:\"Hello World!\"\n",
      "    });\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<div id=\"markers\" class=\"map-canvas\"/>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"markers\" class=\"map-canvas\"/>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x102e8d850>"
       ]
      }
     ],
     "prompt_number": 7
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "\n",
      "var myLatlng = new google.maps.LatLng(37.8717,-122.2728);\n",
      "\n",
      "var mapOptions = {\n",
      "  zoom: 8,\n",
      "  center: myLatlng\n",
      "};\n",
      "\n",
      "var map = new google.maps.Map(document.getElementById('markers'),\n",
      "  mapOptions);\n",
      "\n",
      "// To add the marker to the map, use the 'map' property\n",
      "var marker = new google.maps.Marker({\n",
      "    position: myLatlng,\n",
      "    map: map,\n",
      "    title:\"Berkeley\"\n",
      "});"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "\n",
        "var myLatlng = new google.maps.LatLng(37.8717,-122.2728);\n",
        "\n",
        "var mapOptions = {\n",
        "  zoom: 8,\n",
        "  center: myLatlng\n",
        "};\n",
        "\n",
        "var map = new google.maps.Map(document.getElementById('markers'),\n",
        "  mapOptions);\n",
        "\n",
        "// To add the marker to the map, use the 'map' property\n",
        "var marker = new google.maps.Marker({\n",
        "    position: myLatlng,\n",
        "    map: map,\n",
        "    title:\"Berkeley\"\n",
        "});"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x102e8d990>"
       ]
      }
     ],
     "prompt_number": 8
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "Drawing Circles on Map"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "https://developers.google.com/maps/documentation/javascript/examples/circle-simple\n",
      "\n",
      "    // This example creates circles on the map, representing\n",
      "    // populations in the United States.\n",
      "\n",
      "    // First, create an object containing LatLng and population for each city.\n",
      "    var citymap = {};\n",
      "    citymap['chicago'] = {\n",
      "      center: new google.maps.LatLng(41.878113, -87.629798),\n",
      "      population: 2842518\n",
      "    };\n",
      "    citymap['newyork'] = {\n",
      "      center: new google.maps.LatLng(40.714352, -74.005973),\n",
      "      population: 8143197\n",
      "    };\n",
      "    citymap['losangeles'] = {\n",
      "      center: new google.maps.LatLng(34.052234, -118.243684),\n",
      "      population: 3844829\n",
      "    };\n",
      "    var cityCircle;\n",
      "\n",
      "    function initialize() {\n",
      "      // Create the map.\n",
      "      var mapOptions = {\n",
      "        zoom: 4,\n",
      "        center: new google.maps.LatLng(37.09024, -95.712891),\n",
      "        mapTypeId: google.maps.MapTypeId.TERRAIN\n",
      "      };\n",
      "\n",
      "      var map = new google.maps.Map(document.getElementById('map-canvas'),\n",
      "          mapOptions);\n",
      "\n",
      "      // Construct the circle for each value in citymap.\n",
      "      // Note: We scale the population by a factor of 20.\n",
      "      for (var city in citymap) {\n",
      "        var populationOptions = {\n",
      "          strokeColor: '#FF0000',\n",
      "          strokeOpacity: 0.8,\n",
      "          strokeWeight: 2,\n",
      "          fillColor: '#FF0000',\n",
      "          fillOpacity: 0.35,\n",
      "          map: map,\n",
      "          center: citymap[city].center,\n",
      "          radius: citymap[city].population / 20\n",
      "        };\n",
      "        // Add the circle for this city to the map.\n",
      "        cityCircle = new google.maps.Circle(populationOptions);\n",
      "      }\n",
      "    }\n",
      "\n",
      "    google.maps.event.addDomListener(window, 'load', initialize);"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<div id=\"circles\" class=\"map-canvas\"/>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<div id=\"circles\" class=\"map-canvas\"/>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x102e8d8d0>"
       ]
      }
     ],
     "prompt_number": 9
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "\n",
      "// This example creates circles on the map, representing\n",
      "// populations in the United States.\n",
      "\n",
      "// First, create an object containing LatLng and population for each city.\n",
      "var citymap = {};\n",
      "citymap['chicago'] = {\n",
      "  center: new google.maps.LatLng(41.878113, -87.629798),\n",
      "  population: 2842518\n",
      "};\n",
      "citymap['newyork'] = {\n",
      "  center: new google.maps.LatLng(40.714352, -74.005973),\n",
      "  population: 8143197\n",
      "};\n",
      "citymap['losangeles'] = {\n",
      "  center: new google.maps.LatLng(34.052234, -118.243684),\n",
      "  population: 3844829\n",
      "};\n",
      "var cityCircle;\n",
      "\n",
      "\n",
      "var mapOptions = {\n",
      "    zoom: 4,\n",
      "    center: new google.maps.LatLng(37.09024, -95.712891),\n",
      "    mapTypeId: google.maps.MapTypeId.TERRAIN\n",
      "};\n",
      "\n",
      "\n",
      "  var map = new google.maps.Map(document.getElementById('circles'),\n",
      "      mapOptions);\n",
      "\n",
      "  // Construct the circle for each value in citymap.\n",
      "  // Note: We scale the population by a factor of 20.\n",
      "  for (var city in citymap) {\n",
      "    var populationOptions = {\n",
      "      strokeColor: '#FF0000',\n",
      "      strokeOpacity: 0.8,\n",
      "      strokeWeight: 2,\n",
      "      fillColor: '#FF0000',\n",
      "      fillOpacity: 0.35,\n",
      "      map: map,\n",
      "      center: citymap[city].center,\n",
      "      radius: citymap[city].population / 20\n",
      "    };\n",
      "    // Add the circle for this city to the map.\n",
      "    cityCircle = new google.maps.Circle(populationOptions);\n",
      "  }\n",
      "\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "\n",
        "// This example creates circles on the map, representing\n",
        "// populations in the United States.\n",
        "\n",
        "// First, create an object containing LatLng and population for each city.\n",
        "var citymap = {};\n",
        "citymap['chicago'] = {\n",
        "  center: new google.maps.LatLng(41.878113, -87.629798),\n",
        "  population: 2842518\n",
        "};\n",
        "citymap['newyork'] = {\n",
        "  center: new google.maps.LatLng(40.714352, -74.005973),\n",
        "  population: 8143197\n",
        "};\n",
        "citymap['losangeles'] = {\n",
        "  center: new google.maps.LatLng(34.052234, -118.243684),\n",
        "  population: 3844829\n",
        "};\n",
        "var cityCircle;\n",
        "\n",
        "\n",
        "var mapOptions = {\n",
        "    zoom: 4,\n",
        "    center: new google.maps.LatLng(37.09024, -95.712891),\n",
        "    mapTypeId: google.maps.MapTypeId.TERRAIN\n",
        "};\n",
        "\n",
        "\n",
        "  var map = new google.maps.Map(document.getElementById('circles'),\n",
        "      mapOptions);\n",
        "\n",
        "  // Construct the circle for each value in citymap.\n",
        "  // Note: We scale the population by a factor of 20.\n",
        "  for (var city in citymap) {\n",
        "    var populationOptions = {\n",
        "      strokeColor: '#FF0000',\n",
        "      strokeOpacity: 0.8,\n",
        "      strokeWeight: 2,\n",
        "      fillColor: '#FF0000',\n",
        "      fillOpacity: 0.35,\n",
        "      map: map,\n",
        "      center: citymap[city].center,\n",
        "      radius: citymap[city].population / 20\n",
        "    };\n",
        "    // Add the circle for this city to the map.\n",
        "    cityCircle = new google.maps.Circle(populationOptions);\n",
        "  }\n"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x102e8d910>"
       ]
      }
     ],
     "prompt_number": 10
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "[[IPython-User] using Google Charts in IPython](http://lists.ipython.scipy.org/pipermail/ipython-user/2013-May/012694.html):\n",
      "\n",
      "> google.load blanks the page unless you give it a\n",
      "callback <http://stackoverflow.com/questions/9519673/why-does-google-load-cause-my-page-to-go-blank>\n",
      ".\n",
      "\n",
      "Also: [javascript - Google Maps API v3 - TypeError: Result of expression 'google.maps.LatLng' undefined] is not a constructor - Stack Overflow](http://stackoverflow.com/questions/6577404/google-maps-api-v3-typeerror-result-of-expression-google-maps-latlng-undef/8361021#8361021)\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 10
    }
   ],
   "metadata": {}
  }
 ]
}