Food_Sharing_Draft (copy).ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "# Read Data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Populating the interactive namespace from numpy and matplotlib\n"
     ]
    }
   ],
   "source": [
    "%pylab inline\n",
    "import numpy as np\n",
    "import pandas as pd\n",
    "import matplotlib.pyplot as plt"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 48,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "# leaflet?\n",
    "import json\n",
    "import gspread\n",
    "from oauth2client.client import SignedJwtAssertionCredentials\n",
    "\n",
    "json_key = json.load(open('../My Project.json.nogit'))\n",
    "scope = ['https://spreadsheets.google.com/feeds']\n",
    "\n",
    "credentials = SignedJwtAssertionCredentials(json_key['client_email'], json_key['private_key'].encode(), scope)\n",
    "\n",
    "gc = gspread.authorize(credentials)\n",
    "\n",
    "wks = gc.open(\"Fruit Trees Data\").sheet1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 49,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "names = wks.col_values(2)\n",
    "lat = wks.col_values(5)\n",
    "long = wks.col_values(6)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 50,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "name_vals = names[1:]\n",
    "lat_vals = [float(i) for i in lat[1:]]\n",
    "long_vals = [float(i) for i in long[1:]]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 51,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "latlong = np.array([name_vals,lat_vals,long_vals]).T\n",
    "# print(latlong)\n",
    "\n",
    "data = pd.DataFrame(data = latlong, columns = ('name','lat', 'long'))\n",
    "# data\n",
    "\n",
    "# for reference\n",
    "# data.lat\n",
    "# data.lat[0:5]\n",
    "# data.iloc[0:5]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 52,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "0    Persimmon\n",
       "1        Lemon\n",
       "2        Lemon\n",
       "3       Loquat\n",
       "4       Loquat\n",
       "Name: name, dtype: object"
      ]
     },
     "execution_count": 52,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "data.name[0:5]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 53,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>name</th>\n",
       "      <th>lat</th>\n",
       "      <th>long</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>Persimmon</td>\n",
       "      <td>37.885279</td>\n",
       "      <td>-122.273261</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>Lemon</td>\n",
       "      <td>37.859551</td>\n",
       "      <td>-122.256716</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>Lemon</td>\n",
       "      <td>37.85789</td>\n",
       "      <td>-122.256835</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>Loquat</td>\n",
       "      <td>37.850825</td>\n",
       "      <td>-122.25102</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>Loquat</td>\n",
       "      <td>37.846619</td>\n",
       "      <td>-122.279768</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "        name        lat         long\n",
       "0  Persimmon  37.885279  -122.273261\n",
       "1      Lemon  37.859551  -122.256716\n",
       "2      Lemon   37.85789  -122.256835\n",
       "3     Loquat  37.850825   -122.25102\n",
       "4     Loquat  37.846619  -122.279768"
      ]
     },
     "execution_count": 53,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "data.head(5)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Reference Code (do not run)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Working: write map and point to html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "# Javascript for making map and plotting point\n",
    "function initMap() {\n",
    "  var myLatLng = {lat: -25.363, lng: 131.044};\n",
    "\n",
    "  var map = new google.maps.Map(document.getElementById('map'), {\n",
    "    zoom: 4,\n",
    "    center: myLatLng\n",
    "  });\n",
    "\n",
    "  var marker = new google.maps.Marker({\n",
    "    position: myLatLng,\n",
    "    map: map,\n",
    "    title: 'Hello World!'\n",
    "  });\n",
    "}\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "ename": "SyntaxError",
     "evalue": "invalid syntax (<ipython-input-16-d996b434472f>, line 1)",
     "output_type": "error",
     "traceback": [
      "\u001b[0;36m  File \u001b[0;32m\"<ipython-input-16-d996b434472f>\"\u001b[0;36m, line \u001b[0;32m1\u001b[0m\n\u001b[0;31m    (/, This, example, adds, a, marker, to, indicate, the, position, of, Bondi, Beach, in, Sydney,)\u001b[0m\n\u001b[0m     ^\u001b[0m\n\u001b[0;31mSyntaxError\u001b[0m\u001b[0;31m:\u001b[0m invalid syntax\n"
     ]
    }
   ],
   "source": [
    "# Example plotting image at point on map\n",
    "\n",
    "# Javascript\n",
    "// This example adds a marker to indicate the position of Bondi Beach in Sydney,\n",
    "// Australia.\n",
    "function initMap() {\n",
    "  var map = new google.maps.Map(document.getElementById('map'), {\n",
    "    zoom: 4,\n",
    "    center: {lat: -33, lng: 151}\n",
    "  });\n",
    "\n",
    "  var image = 'images/beachflag.png';\n",
    "  var beachMarker = new google.maps.Marker({\n",
    "    position: {lat: -33.890, lng: 151.274},\n",
    "    map: map,\n",
    "    icon: image\n",
    "  });\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 31,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "# Hardcoding key value into code\n",
    "# Working: keep as backup\n",
    "# (Add key value, and then will work)\n",
    "\n",
    "# Write data to html file \n",
    "\n",
    "file = open(\"main.html\", \"w\") # or Html_file= open(\"filename\",\"w\")\n",
    "\n",
    "# write the header info\n",
    "html_str_header = \"\"\"\n",
    "<html>\n",
    "  <head>\n",
    "    <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\n",
    "    <meta charset=\"utf-8\">\n",
    "    <title>Simple markers</title>\n",
    "    <style>\n",
    "      html, body {\n",
    "        height: 100%;\n",
    "        margin: 0;\n",
    "        padding: 0;\n",
    "      }\n",
    "      #map {\n",
    "        height: 100%;\n",
    "      }\n",
    "    </style>\n",
    "  </head>\n",
    "  <body>\n",
    "      <div id=\"map\"></div>\n",
    "          <script>\n",
    " \"\"\" \n",
    " \n",
    "# Write a single map\n",
    "#html_str_map = \"\"\"\n",
    "#\"\"\"\n",
    "\n",
    "# Write the content\n",
    "html_str_map = \"\"\"\n",
    "function initMap() {\n",
    "  var myLatLngCenter = {lat: 37.8710922, lng: -122.265809};\n",
    "  var myLatLng = {lat: 37.885279, lng: -122.273261};\n",
    "\n",
    "  var map = new google.maps.Map(document.getElementById('map'), {\n",
    "    zoom: 14,\n",
    "    center: myLatLngCenter\n",
    "  });\n",
    "\n",
    "  var marker = new google.maps.Marker({\n",
    "    position: myLatLng,\n",
    "    map: map,\n",
    "    title: 'Hello World!'\n",
    "  });\n",
    "}\n",
    "\"\"\"\n",
    "\n",
    "# Write the footer\n",
    "html_str_footer = \"\"\"\n",
    "    </script>\n",
    "    <script async defer\n",
    "        src=\"https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap\"></script>\n",
    "  </body>\n",
    "</html>\n",
    "\"\"\"\n",
    "\n",
    "file.write(html_str_header) # or Html_file.write(html_str_header)\n",
    "file.write(html_str_map)\n",
    "file.write(html_str_footer)\n",
    "\n",
    "# close the file\n",
    "file.close() # or Html_file.close()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 53,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "# Read nogit file for api key\n",
    "API_file = open(\"../google_api_key.nogit\",\"r\")\n",
    "key = API_file.read()\n",
    "API_KEY_LINE = \"        src=\\\"https://maps.googleapis.com/maps/api/js?key=\" + key + \"&signed_in=true&callback=initMap\\\"></script>\\n\"\n",
    "# API_KEY_LINE"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 54,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "# Api key as variable (more security)\n",
    "# Write data to html file \n",
    "\n",
    "file = open(\"main.html\", \"w\") # or Html_file= open(\"filename\",\"w\")\n",
    "\n",
    "# write the header info\n",
    "html_str_header = \"\"\"\n",
    "<html>\n",
    "  <head>\n",
    "    <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\n",
    "    <meta charset=\"utf-8\">\n",
    "    <title>Simple markers</title>\n",
    "    <style>\n",
    "      html, body {\n",
    "        height: 100%;\n",
    "        margin: 0;\n",
    "        padding: 0;\n",
    "      }\n",
    "      #map {\n",
    "        height: 100%;\n",
    "      }\n",
    "    </style>\n",
    "  </head>\n",
    "  <body>\n",
    "      <div id=\"map\"></div>\n",
    "          <script>\n",
    " \"\"\" \n",
    " \n",
    "# Write a single map\n",
    "#html_str_map = \"\"\"\n",
    "#\"\"\"\n",
    "\n",
    "# Write the content\n",
    "html_str_map = \"\"\"\n",
    "function initMap() {\n",
    "  var myLatLngCenter = {lat: 37.8710922, lng: -122.265809};\n",
    "  var myLatLng = {lat: 37.885279, lng: -122.273261};\n",
    "\n",
    "  var map = new google.maps.Map(document.getElementById('map'), {\n",
    "    zoom: 14,\n",
    "    center: myLatLngCenter\n",
    "  });\n",
    "\n",
    "  var marker = new google.maps.Marker({\n",
    "    position: myLatLng,\n",
    "    map: map,\n",
    "    title: 'Hello World!'\n",
    "  });\n",
    "}\n",
    "\"\"\"\n",
    "\n",
    "# Write the prekey\n",
    "html_str_prekey = \"\"\"\n",
    "    </script>\n",
    "    <script async defer\n",
    "\"\"\"\n",
    "\n",
    "# API_KEY_LINE\n",
    "# Read nogit file for api key\n",
    "#API_file = open(\"../google_api_key.nogit\",\"r\")\n",
    "#key = API_file.read()\n",
    "#API_KEY_LINE = \"        src=\\\"https://maps.googleapis.com/maps/api/js?key=\" + key + \"&signed_in=true&callback=initMap\\\"></script>\\n\"\n",
    "\n",
    "# Write the footer\n",
    "html_str_footer = \"\"\"\n",
    "  </body>\n",
    "</html>\n",
    "\"\"\"\n",
    "\n",
    "file.write(html_str_header) # or Html_file.write(html_str_header)\n",
    "file.write(html_str_map)\n",
    "file.write(html_str_prekey)\n",
    "file.write(API_KEY_LINE)\n",
    "file.write(html_str_footer)\n",
    "\n",
    "# close the file\n",
    "file.close() # or Html_file.close()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 42,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "ename": "SyntaxError",
     "evalue": "invalid syntax (<ipython-input-42-1eb4c38eb8cf>, line 2)",
     "output_type": "error",
     "traceback": [
      "\u001b[1;36m  File \u001b[1;32m\"<ipython-input-42-1eb4c38eb8cf>\"\u001b[1;36m, line \u001b[1;32m2\u001b[0m\n\u001b[1;33m    function initMap() {\u001b[0m\n\u001b[1;37m                   ^\u001b[0m\n\u001b[1;31mSyntaxError\u001b[0m\u001b[1;31m:\u001b[0m invalid syntax\n"
     ]
    }
   ],
   "source": [
    "# Trying to run Javascript in Python... (draft)\n",
    "function initMap() {\n",
    "  var myLatLngCenter = {lat: 37.8710922, lng: -122.265809};\n",
    "  var myLatLng = {lat: 37.885279, lng: -122.273261};\n",
    "\n",
    "  var map = new google.maps.Map(document.getElementById('map'), {\n",
    "    zoom: 14,\n",
    "    center: myLatLngCenter\n",
    "  });\n",
    "  var image = '../apple.jpeg';\n",
    "  var marker = new google.maps.Marker({\n",
    "    position: myLatLng,\n",
    "    map: map,\n",
    "    icon: image\n",
    "    title: 'Hello World!'\n",
    "    \n",
    "  });\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Plotting multiple points on map"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Main code for web app"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 60,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "# Read nogit file for api key\n",
    "API_file = open(\"../google_api_key.nogit\",\"r\")\n",
    "key = API_file.read()\n",
    "API_KEY_LINE = \"        src=\\\"https://maps.googleapis.com/maps/api/js?key=\" + key + \"&signed_in=true&callback=initMap\\\"></script>\\n\"\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 61,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "header = \"\"\"<!DOCTYPE html>\n",
    "<html>\n",
    "  <head>\n",
    "    <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\n",
    "    <meta charset=\"utf-8\">\n",
    "    <title>Simple icons</title>\n",
    "    <style>\n",
    "      html, body {\n",
    "        height: 100%;\n",
    "        margin: 0;\n",
    "        padding: 0;\n",
    "      }\n",
    "      #map {\n",
    "        height: 100%;\n",
    "      }\n",
    "    </style>\n",
    "  </head>\n",
    "  <body>\n",
    "    <div id=\"map\"></div>\n",
    "    <script> \"\"\"\n",
    "\n",
    "footer = \"\"\"\n",
    "  </body>\n",
    "</html>\"\"\"\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 72,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "content = \"\"\"\n",
    "function initMap() {\n",
    "  var map = new google.maps.Map(document.getElementById('map'), {\n",
    "    zoom: 14,\n",
    "    center: {lat: 37.8710922, lng: -122.265809}\n",
    "  });\n",
    "  var persimmon = 'images/persimmon.png';\n",
    "  var fig = 'images/fig.png';\n",
    "  var grape = 'images/grape.png';\n",
    "  var kale = 'images/kale.png';\n",
    "  var lettuce = 'images/lettuce.png';\n",
    "  var nectarine = 'images/nectarine.png';\n",
    "  var olives = 'images/olives.png';\n",
    "  var pear = 'images/pear.png';\n",
    "  var plum = 'images/plum.png';\n",
    "  var rosemary = 'images/rosemary.png';\n",
    "  var lemon = 'images/lemon.png';\n",
    "  var apple = 'images/apple.png';\n",
    "  var orange = 'images/orange.png';\n",
    "  var guava = 'images/guava.png';\n",
    "  var peach = 'images/peach.png';\n",
    "  var blackberry = 'images/blackberry.png';\n",
    "  var raspberry = 'images/raspberry.png';\n",
    "  var cherry = 'images/cherry.png';\n",
    "\"\"\"\n",
    "#fruits = ['persimmon','fig','grape','kale','lettuce','nectarine','olives','pear','plum','rosemary']\n",
    "\n",
    "for i in range(0,len(data)):\n",
    "    if data.name[i] == 'Persimmon':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: persimmon\n",
    "        });\"\"\"\n",
    "        \n",
    "    elif data.name[i] == 'Fig':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: fig\n",
    "        });\"\"\"\n",
    "    \n",
    "    elif data.name[i] == 'Grape':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: grape\n",
    "        });\"\"\"\n",
    "        \n",
    "    elif data.name[i] == 'Nectarine':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: nectarine\n",
    "        });\"\"\"\n",
    "        \n",
    "    elif data.name[i] == 'Pear':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: pear\n",
    "        });\"\"\"\n",
    "    \n",
    "    elif data.name[i] == 'Plum':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: plum\n",
    "        });\"\"\"\n",
    "        \n",
    "    elif data.name[i] == 'Lemon':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: lemon\n",
    "        });\"\"\"\n",
    "    \n",
    "    elif data.name[i] == 'Rosemary':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: rosemary\n",
    "        });\"\"\"\n",
    "    \n",
    "    elif data.name[i] == 'Kale':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: kale\n",
    "        });\"\"\"\n",
    "    \n",
    "    elif data.name[i] == 'Olives':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: olives\n",
    "        });\"\"\"\n",
    "    \n",
    "    elif data.name[i] == 'Lettuce':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: lettuce\n",
    "        });\"\"\"\n",
    "    \n",
    "    elif data.name[i] == 'Apple':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: apple\n",
    "        });\"\"\"\n",
    "        \n",
    "    elif data.name[i] == 'Orange':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: orange\n",
    "        });\"\"\"\n",
    "        \n",
    "    elif data.name[i] == 'Guava':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: guava\n",
    "        });\"\"\"\n",
    "    \n",
    "    elif data.name[i] == 'Peach':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: peach\n",
    "        });\"\"\"\n",
    "    \n",
    "    elif data.name[i] == 'Blackberry':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: blackberry\n",
    "        });\"\"\"\n",
    "    \n",
    "    elif data.name[i] == 'Raspberry':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: raspberry\n",
    "        });\"\"\"\n",
    "    \n",
    "    elif data.name[i] == 'Cherry':\n",
    "        content = content + \"\"\"\\n  var marker\"\"\"\n",
    "        content = content + str(index)\n",
    "        content = content + \"\"\"= new google.maps.Marker({\n",
    "        position: {lat: \"\"\"\n",
    "        content = content + str(data.lat[i])\n",
    "        content = content + ', lng: '\n",
    "        content = content + str(data.long[i])\n",
    "        content = content + \"\"\"},\n",
    "        map: map,\n",
    "        icon: cherry\n",
    "        });\"\"\"\n",
    "\n",
    "content = content + \"\"\"}\n",
    "    </script>\n",
    "    <script async defer\"\"\" "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 73,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "file = open(\"main.html\", \"w\")\n",
    "file.write(header)\n",
    "file.write(content)\n",
    "file.write(API_KEY_LINE)\n",
    "file.write(footer)\n",
    "\n",
    "# close the file\n",
    "file.close() # or Html_file.close()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.4.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}