Neighborhood-Map/index.html at master · sankitshane/Neighborhood-Map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name='viewport' content="width=device-width, initial-scale= 1">
    <title>
      Neighborhood Map
    </title>
    <link rel="stylesheet" href="style/main.css">
    <link rel="shortcut icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=zocial" />
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body onload="knock.mark()">
  <!--Header Tab of the page contain two menus, one top-left side and other top-right side-->
  <header>
    <div class="header_component slide1 nav-icon" data-bind="click : makeitwork,css:{open : newClass() == true }">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <h2 class="header_component">Neighborhood Map</h2>
    <div class="header_component slide2 nav-icon" data-bind="click : makeitwork_new,css:{open : newClass_new() == true }">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </header>
  <div id="news_button">
    <input type="checkbox" id="id-name--2" name="set-name" class="switch-input" data-bind="checked: isChecked">
    <label for="id-name--2" class="switch-label">News <span class="toggle--on">On</span><span class="toggle--off">Off</span></label>
  </div>
  <!--Slide Menu of the Left-->
  <nav id='slide-menu' data-bind="css: { 'menu-active' : newClass() == true}">
    <h2>Menu</h2>
    <ul>
      <!--Check button to automatically find your location-->
      <li class="menu-element">
        <input type="checkbox" id="id-name--1" name="set-name" class="switch-input" data-bind="checked : geoisChecked">
        <label for="id-name--1" class="switch-label">Geo Location <span class="toggle--on">On</span><span class="toggle--off">Off</span></label>
      </li>
      <!--Search for perticular places with autocomplete functionality-->
      <li class="menu-element">
        <h3>Search for a perticular place</h3>
      </li>
      <!--Button to zoom on the place in the text input-->
      <li>
        <input type="text" name="Place" placeholder="New York City" id="search_place" data-bind="textInput: search_area ">
        <button type="button" class="last_ones" data-bind="click: zoom">Zoom</button>
      </li>
      <!--Button to put markers at your desired location in the input field-->
      <li class="last_ones">
        <button type="button" data-bind="click: storeaddr">Set Marker</button>
      </li>
    </ul>
    <!--Links to Socail Networking sites.Be sure to say Hi sometimes :) -->
    <div id='creator'>
      <article class="links">
        <a class="zocial-googleplus link" href="https://plus.google.com/u/0/113922165364325086198"> Google +</a>
        <a class="zocial-facebook link" href="https://www.facebook.com/sankit.acharya"> FaceBook</a>
        <a class="zocial-twitter link" href="https://twitter.com/Sankit_shane"> Twitter</a>
        <a class="zocial-github link" href="https://github.com/sankitshane"> GitHub</a>
      </article>
    </div>
  </nav>
  <!--Silde Menu from the right, Containing default location-->
  <nav id='slide-menu_right' data-bind="css: { 'menu-active' : newClass_new() == true}">
    <div id="filter_content">
      <button type="button" style="background-color:#283593;border-color:#283593"><img src="cd-icon-filter.svg"><strong> Filter</strong></button>
      <input type="text" id="filter" class="filter_item" data-bind="textInput: filter">
    </div>
    <!--List field to show all the location marked-->
    <ul data-bind="foreach: filteredItems">
      <li data-bind="text: $data.title, click: $data.show"></li>
    </ul>
  </nav>
  <!--News Stand for the marker your just clicked-->
  <div id="news_container" data-bind="css:{ 'hide' : check() == false}" >
    <h2 id="news_header" data-bind="text: $news_header"></h2>
    <ul id="news" data-bind = "foreach: $news">
      <span data-bind="html: $data"><span>
    </ul>
  </div>
  <!--Where the map is loaded-->
  <div id="map"></div>
  <!--FrameWorks-->
  <script type='text/javascript' src='Library/knockout-3.4.0.js' ></script>
  <script type='text/javascript' src='Library/jquery-3.1.0.js' ></script>
  <!--Scripts-->
  <script type='text/javascript' src='script/script.js'></script>
  <!--API-->
  <script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry&key=AIzaSyDGzY7uuAXgqbzLzr15kz7o4DVRVCPlC3Q&callback=initMap" async defer onerror="ErrorMapLoading()"></script>
</body>
</html>