diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index cb060b6f1134048313eb82c2e7118025b909fdcc..b86d86a5d1e12a73cb7883a789341f9951c7a741 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -5,6 +5,9 @@ namespace App\Http\Controllers;
 use App\Http\Requests;
 use Illuminate\Http\Request;
 
+use App\Tps;
+use App\Schedule;
+
 class HomeController extends Controller
 {
     /**
@@ -24,6 +27,8 @@ class HomeController extends Controller
      */
     public function index()
     {
-        return view('home');
+        $allTPS = Tps::all();
+        $allSchedule = Schedule::all();
+        return view('home', ['allTPS' => $allTPS,  'allSchedule'=>  $allSchedule]);
     }
 }
diff --git a/app/Http/Controllers/ScheduleController.php b/app/Http/Controllers/ScheduleController.php
index c95d537fc6399b9d2491738308490e9e6f555f2d..c0e9972b20aa88b79ecf7f0f83cda917ac43ef2a 100644
--- a/app/Http/Controllers/ScheduleController.php
+++ b/app/Http/Controllers/ScheduleController.php
@@ -85,6 +85,7 @@ class ScheduleController extends Controller
             $sched->time = Input::get('time','');
             $sched->amount = Input::get('amount',1);
             $sched->is_done = Input::get('is_done', 0);
+            $sched->rute = Input::get('rute', "[]");
             $sched->created_by = Auth::user()->id;
             $sched->id = 0;
             $sched->save();
@@ -98,7 +99,7 @@ class ScheduleController extends Controller
     {
         if ($this->has_role('all_schedule'))
         {
-            return view('menu.insertSchedule', ['dataTPS' => Tps::all(['id', 'nama']),'dataManager' => User::all(['id', 'name'])]);
+            return view('menu.insertSchedule', ['dataTPS' => Tps::all(['id', 'nama', 'latitude', 'longitude']),'dataManager' => User::all(['id', 'name'])]);
         }else{
             return redirect('/schedule');
         }
@@ -123,7 +124,7 @@ class ScheduleController extends Controller
             return view('menu.editSchedule',
              ['id' => $id,
              'data' => Schedule::find($id),
-             'dataTPS' => Tps::all(['id', 'nama']),
+             'dataTPS' => Tps::all(['id', 'nama', 'latitude', 'longitude']),
              'dataManager' => User::all(['id', 'name'])]);
         }else{
             return redirect('/schedule');
@@ -143,6 +144,8 @@ class ScheduleController extends Controller
             $sched->time = Input::get('time');
             if(Input::has('amount'))
             $sched->amount = Input::get('amount');
+            if(Input::has('rute'))
+            $sched->rute = Input::get('rute');
             $sched->is_done = Input::get('is_done');
             \Event::fire(new \App\Events\TableModified($sched));
             $sched->save();
@@ -199,7 +202,7 @@ class ScheduleController extends Controller
         $data = [
             'content' => $notif,
         ];
-        $user =  Input::get('id_user'); 
+        $user =  User::find(Input::get('id_user')); 
         Mail::send('email.notification', $data, function ($message) use ($user)  {
             $message->from(env('MAIL_USERNAME', 'user@host.suffix'), 'Notifikasi');
             $message->to($user->email)->subject('Notifikasi Jadwal');
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index c8b42da34dcb8724cd29f95fb29462a86d653599..50450149f1f931c55cdd33d3bbe1422c9d6ae171 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -1,7 +1,26 @@
 @extends('layouts.app')
 
 @section('content')
-            <div class="hbox hbox-auto-xs hbox-auto-sm ng-scope">
+
+
+<?php
+
+$jsonTPS = "[";
+foreach ($allTPS as $tps) {
+  $jsonTPS .= "{ \"id\": " . $tps->id . ", \"lat\": " . $tps->latitude . ", \"lng\": " . $tps->longitude . ", \"nama\": \"" . $tps->nama . "\"},";
+}
+$jsonTPS .= "]";
+
+$tpsSchedules = array();
+foreach ($allSchedule as $schedule) {
+  $tpsSchedules[$schedule->id_tps][] = $schedule;
+}
+
+$jsonSchedules = json_encode($tpsSchedules);
+
+?>
+
+            <div class="hbox-auto-sm ng-scope">
                 <div class="col">
                   <div class="app-content-body ">
                       <div class="bg-light lter">    
@@ -14,24 +33,19 @@
                             <li class="active"><i class="fa fa-angle-right"></i>Map</li>
                           </ul>
                       </div>
-                    <div class="wrapper-lg bg-light">
-                           <div class="row">
-                              <div class="col-md-12">
-                                <div class="panel panel-default">
-                                  <div class="panel-heading font-semibold" style="height: 400px; padding: 2px;">
-                                    <div id="map" style="height: 100%;"></div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                        </div>
-                  </div>
+                    <div class="wrapper-lg bg-light" style="height: 100vh; padding: 0;">
+                      <div id="map" style="height: 100%;"></div>
+                    </div>
                 </div>
             </div>
 
             <script>
+              var listTPS = <?=$jsonTPS?>;
+              var listSchedules = <?=$jsonSchedules?>;
+              var activeRoutes = [];
+
               function initMap() {
-                var customMapType = new google.maps.StyledMapType([{"featureType":"road","stylers":[{"hue":"#5e00ff"},{"saturation":-79}]},{"featureType":"poi","stylers":[{"saturation":-78},{"hue":"#6600ff"},{"lightness":-47},{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"lightness":22}]},{"featureType":"landscape","stylers":[{"hue":"#6600ff"},{"saturation":-11}]},{},{},{"featureType":"water","stylers":[{"saturation":-65},{"hue":"#1900ff"},{"lightness":8}]},{"featureType":"road.local","stylers":[{"weight":1.3},{"lightness":30}]},{"featureType":"transit","stylers":[{"visibility":"simplified"},{"hue":"#5e00ff"},{"saturation":-16}]},{"featureType":"transit.line","stylers":[{"saturation":-72}]},{}], {
+                var customMapType = new google.maps.StyledMapType([{"featureType": "administrative","elementType": "all", "stylers": [{"visibility": "off"}]},{"featureType":"road","stylers":[{"hue":"#5e00ff"},{"saturation":-79}]},{"featureType":"poi","stylers":[{"saturation":-78},{"hue":"#6600ff"},{"lightness":-47},{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"lightness":22}]},{"featureType":"landscape","stylers":[{"hue":"#6600ff"},{"saturation":-11}]},{},{},{"featureType":"water","stylers":[{"saturation":-65},{"hue":"#1900ff"},{"lightness":8}]},{"featureType":"road.local","stylers":[{"weight":1.3},{"lightness":30}]},{"featureType":"transit","stylers":[{"visibility":"simplified"},{"hue":"#5e00ff"},{"saturation":-16}]},{"featureType":"transit.line","stylers":[{"saturation":-72}]},{}], {
                     name: 'Custom Style'
                 });
                 var customMapTypeId = 'custom_style';
@@ -53,11 +67,45 @@
                   strokeWeight: 0.1
                 };
 
-                var marker = new google.maps.Marker({
-                  position: map.getCenter(),
-                  icon: trashCan,
-                  map: map
-                });
+                listTPS.forEach(function (item, index){
+                  console.log(item);
+
+                  var marker = new google.maps.Marker({
+                    position: new google.maps.LatLng(item.lat,item.lng),
+                    icon: trashCan,
+                    title: item.nama,
+                    map: map
+                  });
+
+                  marker.addListener('click', function() {
+                    map.setZoom(14);
+                    map.setCenter(marker.getPosition());
+
+                    var schedulesTPS = listSchedules[item.id];
+
+                    activeRoutes.forEach(function(route){
+                      route.setMap(null);
+                    });
+                    
+                    activeRoutes = [];
+                    
+                    if (typeof schedulesTPS != 'undefined') {
+
+
+                      schedulesTPS.forEach(function(schedule){
+                        var route = new google.maps.Polyline({
+                          path: JSON.parse(schedule.rute),
+                          strokeColor: '#FFFF00',
+                          strokeOpacity: 1.0,
+                          strokeWeight: 2
+                        });
+                        route.setMap(map);
+                        activeRoutes.push(route);
+                      })
+                    }
+
+                  });
+                })
 
                 map.mapTypes.set(customMapTypeId, customMapType);
                 map.setMapTypeId(customMapTypeId);
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index fe8eed40ae51a89a723b857e4f26f184be899514..a9a6b94db54d48f635428ad3a38015be192cc816 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -159,7 +159,7 @@
         <div id="content" class="app-content" role="main">
             @yield('content')
         </div>
-        <div class="wrapper-md padder-lg b-t bg-light" style=" height: 200px" ></div>
+        <div class="wrapper-md padder-lg b-t bg-light" style=" height: 100px" ></div>
          <!-- footer -->
         <footer id="footer" class="app-footer" role="footer">
           <div class="wrapper-md padder-lg b-t bg-light">
diff --git a/resources/views/menu/editSchedule.blade.php b/resources/views/menu/editSchedule.blade.php
index 5f82b804708998129cd05c8e36da8f4436eae8d0..01d9af71adf21f2eb83c19c277d1f346bf0fd723 100644
--- a/resources/views/menu/editSchedule.blade.php
+++ b/resources/views/menu/editSchedule.blade.php
@@ -45,7 +45,7 @@
         <div class="form-group">
           <label class="col-sm-2 control-label">Nama TPS</label>
           <div class="col-sm-10">
-            <select name="id_tps" ui-jq="chosen" class="w-full">
+            <select id="tps" name="id_tps" ui-jq="chosen" class="w-full">
                 <optgroup label="Nama Pengelola">
                     @foreach ($dataTPS as $TPS)
                     <option value=<?php echo $TPS->id;?>
@@ -97,6 +97,15 @@
           </div>
         </div>
 
+        <div class="line line-dashed b-b line-lg pull-in"></div>
+        <div class="form-group">
+          <label class="col-sm-12">Rute pengangkutan</label>
+          <div class="col-sm-12" style="height: 400px; padding: 2px;">
+            <input type="hidden" id='path' name='rute' value="<?php echo $data->rute; ?>" >
+            <div id="map" style="height: 100%;"></div>
+          </div>
+        </div>
+
         <div class="form-group">
           <div class="col-sm-4 col-sm-offset-2">
             <a href="{{ url('/schedule') }}"><button type="button" class="btn btn-default m-r-sm">Cancel</button></a>
@@ -111,4 +120,100 @@
 </div>
 </div>
 
+
+
+<?php
+  $json = "{";
+
+  foreach ($dataTPS as $TPS) {
+    $json .= "\"" . $TPS->id . "\": { \"lat\":" . $TPS->latitude . ", \"lng\":" . $TPS->longitude . "}, ";    
+  }
+
+  $json .= '}';
+?>
+
+<script>
+  var rute = <?php echo $data->rute; ?>;
+  var TPSPosition = <?=$json?>;
+
+  var marker = null;
+  var poly;
+  var map;
+
+  function initMap() {
+    var customMapType = new google.maps.StyledMapType([{"featureType": "administrative","elementType": "all", "stylers": [{"visibility": "off"}]},{"featureType":"road","stylers":[{"hue":"#5e00ff"},{"saturation":-79}]},{"featureType":"poi","stylers":[{"saturation":-78},{"hue":"#6600ff"},{"lightness":-47},{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"lightness":22}]},{"featureType":"landscape","stylers":[{"hue":"#6600ff"},{"saturation":-11}]},{},{},{"featureType":"water","stylers":[{"saturation":-65},{"hue":"#1900ff"},{"lightness":8}]},{"featureType":"road.local","stylers":[{"weight":1.3},{"lightness":30}]},{"featureType":"transit","stylers":[{"visibility":"simplified"},{"hue":"#5e00ff"},{"saturation":-16}]},{"featureType":"transit.line","stylers":[{"saturation":-72}]},{}], {
+        name: 'Custom Style'
+    });
+    var customMapTypeId = 'custom_style';
+
+    map = new google.maps.Map(document.getElementById('map'), {
+      zoom: 12,
+      center: {lat: -6.914744, lng: 107.609810},
+      mapTypeControlOptions: {
+        mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
+      }
+    });
+
+    poly = new google.maps.Polyline({
+      strokeColor: '#FFFF00',
+      strokeOpacity: 1.0,
+      strokeWeight: 3
+    });
+    poly.setMap(map);
+
+    updateTPS();
+
+    var path = poly.getPath();
+    rute.forEach(function(item){
+      path.push(new google.maps.LatLng(item.lat,item.lng));
+    })
+
+    map.addListener('click', addLatLng);
+    map.addListener('rightclick', removeLatLng);
+
+    map.mapTypes.set(customMapTypeId, customMapType);
+    map.setMapTypeId(customMapTypeId);
+  }
+
+  function addLatLng(event) {
+    var path = poly.getPath();
+    path.push(event.latLng);
+
+    document.getElementById('path').value = JSON.stringify(path.j);
+  }
+
+  function removeLatLng(event) {
+    var path = poly.getPath();
+    path.pop();
+
+    document.getElementById('path').value = JSON.stringify(path.j);
+  }
+  
+  function updateTPS() {
+    console.log(document.getElementById('tps').value);
+    var position = TPSPosition[document.getElementById('tps').value];
+
+    latLng = new google.maps.LatLng(position.lat,position.lng)
+
+    if (marker == null) {
+      marker = new google.maps.Marker({
+        position: latLng,
+        map: map
+      });
+    } else {
+      marker.setPosition(latLng);
+    }
+
+    var path = poly.getPath();
+    path.clear();
+    path.push(latLng);
+
+
+    document.getElementById('path').value = "";
+  }
+
+</script>
+<script async defer
+src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQhtIUXQLjOphZJncykzuYoH85EWJ9JMc&callback=initMap">
+</script>
 @endsection
\ No newline at end of file
diff --git a/resources/views/menu/editTps.blade.php b/resources/views/menu/editTps.blade.php
index 4410a88137b32fd22e921cbc4196d70c98991b1e..08f9835659638c2b2fd17b897e049704726a12b4 100644
--- a/resources/views/menu/editTps.blade.php
+++ b/resources/views/menu/editTps.blade.php
@@ -122,7 +122,7 @@
   var marker = null;
 
   function initMap() {
-    var customMapType = new google.maps.StyledMapType([{"featureType":"road","stylers":[{"hue":"#5e00ff"},{"saturation":-79}]},{"featureType":"poi","stylers":[{"saturation":-78},{"hue":"#6600ff"},{"lightness":-47},{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"lightness":22}]},{"featureType":"landscape","stylers":[{"hue":"#6600ff"},{"saturation":-11}]},{},{},{"featureType":"water","stylers":[{"saturation":-65},{"hue":"#1900ff"},{"lightness":8}]},{"featureType":"road.local","stylers":[{"weight":1.3},{"lightness":30}]},{"featureType":"transit","stylers":[{"visibility":"simplified"},{"hue":"#5e00ff"},{"saturation":-16}]},{"featureType":"transit.line","stylers":[{"saturation":-72}]},{}], {
+    var customMapType = new google.maps.StyledMapType([{"featureType": "administrative","elementType": "all", "stylers": [{"visibility": "off"}]},{"featureType":"road","stylers":[{"hue":"#5e00ff"},{"saturation":-79}]},{"featureType":"poi","stylers":[{"saturation":-78},{"hue":"#6600ff"},{"lightness":-47},{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"lightness":22}]},{"featureType":"landscape","stylers":[{"hue":"#6600ff"},{"saturation":-11}]},{},{},{"featureType":"water","stylers":[{"saturation":-65},{"hue":"#1900ff"},{"lightness":8}]},{"featureType":"road.local","stylers":[{"weight":1.3},{"lightness":30}]},{"featureType":"transit","stylers":[{"visibility":"simplified"},{"hue":"#5e00ff"},{"saturation":-16}]},{"featureType":"transit.line","stylers":[{"saturation":-72}]},{}], {
         name: 'Custom Style'
     });
     var customMapTypeId = 'custom_style';
@@ -141,14 +141,14 @@
     });
 
     map.addListener('click', function(e) {
-      placeMarkerAndPanTo(e.latLng, map);
+      placeMarkerOrMove(e.latLng, map);
     });
 
     map.mapTypes.set(customMapTypeId, customMapType);
     map.setMapTypeId(customMapTypeId);
   }
 
-  function placeMarkerAndPanTo(latLng, map) {
+  function placeMarkerOrMove(latLng, map) {
 
     marker.setPosition(latLng);
 
diff --git a/resources/views/menu/insertSchedule.blade.php b/resources/views/menu/insertSchedule.blade.php
index 11a5cfba9215f1c11e40bcb4ac57179860faeffb..4dabb1ec9f9f2cd90630bf75e3f1727b3aba2cf8 100644
--- a/resources/views/menu/insertSchedule.blade.php
+++ b/resources/views/menu/insertSchedule.blade.php
@@ -31,7 +31,8 @@
           <label class="col-sm-2 control-label">Nama Supir Truk</label>
           <div class="col-sm-10">
             <select name="id_user" ui-jq="chosen" class="w-full">
-                <optgroup label="Nama Pengelola">
+                <option value="0">[silakan pilih]</option>
+                <optgroup label="Nama Supir">
                     @foreach ($dataManager as $Manager)
                     <option value=<?php echo $Manager->id;?>><?php echo $Manager->name;?></option>
                     @endforeach
@@ -44,8 +45,9 @@
         <div class="form-group">
           <label class="col-sm-2 control-label">Nama TPS</label>
           <div class="col-sm-10">
-            <select name="id_tps" ui-jq="chosen" class="w-full">
-                <optgroup label="Nama Pengelola">
+            <select id="tps" name="id_tps" onchange="updateTPS()" ui-jq="chosen" class="w-full">
+                <option value="0">[silakan pilih]</option>
+                <optgroup label="Nama TPS">
                     @foreach ($dataTPS as $TPS)
                     <option value=<?php echo $TPS->id;?>><?php echo $TPS->nama;?></option>
                     @endforeach
@@ -63,7 +65,7 @@
         <div class="line line-dashed b-b line-lg pull-in"></div>
         <div class="form-group">
           <label class="col-sm-2 control-label">Waktu Pengantaran</label>
-          <div class="col-sm-10" ng-controller="DatepickerDemoCtrl">
+          <div class="col-sm-10">
             <div class="input-group w-md">
               <input type="text" name="time" class="form-control" datepicker-popup="" ng-model="dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
               <span class="input-group-btn">
@@ -73,6 +75,16 @@
           </div>
         </div>
 
+        <div class="line line-dashed b-b line-lg pull-in"></div>
+        <div class="form-group">
+          <label class="col-sm-12">Rute pengangkutan</label>
+          <div class="col-sm-12" style="height: 400px; padding: 2px;">
+            <input type="hidden" id='path' name='rute' value='0'>
+            <div id="map" style="height: 100%;"></div>
+          </div>
+        </div>
+
+
         <div class="form-group">
           <div class="col-sm-4 col-sm-offset-2">
             <a href="{{ url('/schedule') }}"><button type="button" class="btn btn-default m-r-sm">Cancel</button></a>
@@ -87,4 +99,92 @@
 </div>
 </div>
 
+
+<?php
+  $json = "{";
+
+  foreach ($dataTPS as $TPS) {
+    $json .= "\"" . $TPS->id . "\": { \"lat\":" . $TPS->latitude . ", \"lng\":" . $TPS->longitude . "}, ";    
+  }
+
+  $json .= '}';
+?>
+
+<script>
+  var TPSPosition = <?=$json?>;
+
+  var marker = null;
+  var poly;
+  var map;
+
+  function initMap() {
+  var customMapType = new google.maps.StyledMapType([{"featureType": "administrative","elementType": "all", "stylers": [{"visibility": "off"}]},{"featureType":"road","stylers":[{"hue":"#5e00ff"},{"saturation":-79}]},{"featureType":"poi","stylers":[{"saturation":-78},{"hue":"#6600ff"},{"lightness":-47},{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"lightness":22}]},{"featureType":"landscape","stylers":[{"hue":"#6600ff"},{"saturation":-11}]},{},{},{"featureType":"water","stylers":[{"saturation":-65},{"hue":"#1900ff"},{"lightness":8}]},{"featureType":"road.local","stylers":[{"weight":1.3},{"lightness":30}]},{"featureType":"transit","stylers":[{"visibility":"simplified"},{"hue":"#5e00ff"},{"saturation":-16}]},{"featureType":"transit.line","stylers":[{"saturation":-72}]},{}], {
+      name: 'Custom Style'
+  });
+  var customMapTypeId = 'custom_style';
+
+  map = new google.maps.Map(document.getElementById('map'), {
+    zoom: 12,
+    center: {lat: -6.914744, lng: 107.609810},
+    mapTypeControlOptions: {
+      mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
+    }
+  });
+
+  poly = new google.maps.Polyline({
+    strokeColor: '#FFFF00',
+    strokeOpacity: 1.0,
+    strokeWeight: 3
+  });
+  poly.setMap(map);
+
+  map.addListener('click', addLatLng);
+  map.addListener('rightclick', removeLatLng);
+
+  map.mapTypes.set(customMapTypeId, customMapType);
+  map.setMapTypeId(customMapTypeId);
+  }
+
+  function addLatLng(event) {
+    var path = poly.getPath();
+    path.push(event.latLng);
+
+    document.getElementById('path').value = JSON.stringify(path.j);
+  }
+
+  function removeLatLng(event) {
+    var path = poly.getPath();
+    path.pop();
+
+    document.getElementById('path').value = JSON.stringify(path.j);
+  }
+  
+  function updateTPS() {
+    console.log(document.getElementById('tps').value);
+    var position = TPSPosition[document.getElementById('tps').value];
+
+    latLng = new google.maps.LatLng(position.lat,position.lng)
+
+    if (marker == null) {
+      marker = new google.maps.Marker({
+        position: latLng,
+        map: map
+      });
+    } else {
+      marker.setPosition(latLng);
+    }
+
+    var path = poly.getPath();
+    path.clear();
+    path.push(latLng);
+
+
+    document.getElementById('path').value = "";
+  }
+
+</script>
+<script async defer
+src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQhtIUXQLjOphZJncykzuYoH85EWJ9JMc&callback=initMap">
+</script>
+
 @endsection
\ No newline at end of file
diff --git a/resources/views/menu/insertTps.blade.php b/resources/views/menu/insertTps.blade.php
index e24248e7d51da95413ecd4bb1ef9766b1d946145..e6cfeeebd589c900e9e7061e4c1c3cc1204a4f83 100644
--- a/resources/views/menu/insertTps.blade.php
+++ b/resources/views/menu/insertTps.blade.php
@@ -111,7 +111,7 @@
   var marker = null;
 
   function initMap() {
-  var customMapType = new google.maps.StyledMapType([{"featureType":"road","stylers":[{"hue":"#5e00ff"},{"saturation":-79}]},{"featureType":"poi","stylers":[{"saturation":-78},{"hue":"#6600ff"},{"lightness":-47},{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"lightness":22}]},{"featureType":"landscape","stylers":[{"hue":"#6600ff"},{"saturation":-11}]},{},{},{"featureType":"water","stylers":[{"saturation":-65},{"hue":"#1900ff"},{"lightness":8}]},{"featureType":"road.local","stylers":[{"weight":1.3},{"lightness":30}]},{"featureType":"transit","stylers":[{"visibility":"simplified"},{"hue":"#5e00ff"},{"saturation":-16}]},{"featureType":"transit.line","stylers":[{"saturation":-72}]},{}], {
+  var customMapType = new google.maps.StyledMapType([{"featureType": "administrative","elementType": "all", "stylers": [{"visibility": "off"}]},{"featureType":"road","stylers":[{"hue":"#5e00ff"},{"saturation":-79}]},{"featureType":"poi","stylers":[{"saturation":-78},{"hue":"#6600ff"},{"lightness":-47},{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"lightness":22}]},{"featureType":"landscape","stylers":[{"hue":"#6600ff"},{"saturation":-11}]},{},{},{"featureType":"water","stylers":[{"saturation":-65},{"hue":"#1900ff"},{"lightness":8}]},{"featureType":"road.local","stylers":[{"weight":1.3},{"lightness":30}]},{"featureType":"transit","stylers":[{"visibility":"simplified"},{"hue":"#5e00ff"},{"saturation":-16}]},{"featureType":"transit.line","stylers":[{"saturation":-72}]},{}], {
       name: 'Custom Style'
   });
   var customMapTypeId = 'custom_style';
@@ -125,14 +125,14 @@
   });
 
   map.addListener('click', function(e) {
-    placeMarkerAndPanTo(e.latLng, map);
+    placeMarkerOrMove(e.latLng, map);
   });
 
   map.mapTypes.set(customMapTypeId, customMapType);
   map.setMapTypeId(customMapTypeId);
   }
 
-  function placeMarkerAndPanTo(latLng, map) {
+  function placeMarkerOrMove(latLng, map) {
 
     if (marker == null) {
       marker = new google.maps.Marker({