Added demo.

Added jquery_easing.js to lib. README.md improved.
terikon · Mar 13, 2015 · d6a29e5 · d6a29e5
1 parent 24c300a
commit d6a29e5
Show file tree

Hide file tree

Showing 3 changed files with 408 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@ transparent.
 - [Contribute](#contribute)
 
 This project is based on excellent [marker-animate](https://github.com/combatwombat/marker-animate) project by Robert Gerlach.
-The project was modified slightly to provide additional functionality, so modified forked version found
+marker-animate was modified slightly to provide additional functionality, so modified forked version found
 [here](https://github.com/viskin/marker-animate) should be used.
 
 This project is one big step towards animated OverlappingMarkerSpiderfier.
@@ -41,11 +41,18 @@ from Github, and include it in your page.
 
 marker-animate-unobtrusive depends on Google Maps and [jquery](http://jquery.com/download) libraries, so include them as well.
 
+jquery_easing must be downloaded from [here](http://gsgd.co.uk/sandbox/jquery/easing/).
+
+Modified version of marker-animate should be used, [download it from here](https://raw.githubusercontent.com/viskin/marker-animate/OverlappingMarkerSpiderfier/markerAnimate.js).
+
+So dependencies look like follows:
+
 ```html
 <!-- Dependencies -->
+<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script src="jquery.min.js"></script>
 <script src="jquery_easing.js"></script>
-<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
+<script src="markerAnimate.js"></script>
 <script src="markerAnimateUnobtrusive.min.js"></script>
 ```
 

diff --git a/demo/markermove-unobtrusive.html b/demo/markermove-unobtrusive.html
@@ -0,0 +1,194 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+    <meta charset="utf-8">
+    <title>Google Maps Animated Marker Move Demo</title>
+
+<style type="text/css">
+  html,body,#map_canvas {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
+    font-size: 12px;
+  }
+  .control {
+    position: absolute;
+    bottom: 28px;
+    right: 6px;
+    width: 200px;
+    height: 78px;
+    background: rgba(0,0,0,0.85);
+    box-shadow: rgba(0,0,0,0.5) 0 3px 5px;
+    -moz-box-shadow: rgba(0,0,0,0.5) 0 3px 5px;
+    -webkit-box-shadow: rgba(0,0,0,0.5) 0 3px 5px;
+    color: #fff;
+    padding: 10px;
+
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+  }
+  #controls {
+    bottom: 28px;
+    right: 6px;
+    width: 200px;
+    height: 78px;
+  }
+  #log {
+    bottom: 28px;
+    left: 6px;
+    width: 200px;
+    height: 78px;
+    overflow-y: scroll;
+
+  }
+  #controls .row {
+    overflow: hidden;
+    margin-bottom: 10px;
+  }
+  #controls .row label {
+    width: 60px;
+    float: left;
+    font-weight: bold;
+    margin-right: 10px;
+    line-height: 23px;
+  }
+  #controls .row select,
+  #controls .row input {
+    width: 120px;
+    float: left;
+  }
+  #controls .row input#durationOption {
+    width: 113px;
+  }
+  #controls .row a {
+    display: block;
+    color: #7EB1FF;
+    text-decoration: none;
+    font-size: 10px;
+  }
+
+</style>
+
+    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
+
+    <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script> <!-- optional for animateTo -->
+    <script type="text/javascript" src="../lib/jquery_easing.js"></script> <!-- also optional for animateTo. But much nicer -->
+
+    <script type="text/javascript" src="../node_modules/marker-animate/markerAnimate.js"></script>
+    <script type="text/javascript" src="../dist/markerAnimateUnobtrusive.min.js"></script>
+
+
+    <script>
+
+      markerAnimateUnobtrusive.decorateMarker(google.maps.Marker);
+
+      var marker, map;
+      function initialize() {
+        var myLatlng = new google.maps.LatLng(53.871963457471786,10.689697265625);
+        var mapOptions = {
+          zoom: 4,
+          center: myLatlng,
+          mapTypeId: google.maps.MapTypeId.ROADMAP
+        }
+        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
+
+        marker = new google.maps.Marker({
+            position: myLatlng,
+            map: map,
+            title: 'Hello World!'
+        });
+
+        var $log = $("#log");
+        google.maps.event.addListener(marker, 'position_changed', function () {
+            $log.html($log.html() + "marker.position_changed<br/>");
+        });
+
+      }
+
+
+      ///////////////////////////////////////////////////
+
+      $(function() {
+        initialize();
+
+        google.maps.event.addListener(map, 'click', function(event) {          
+          var duration = parseInt($('#durationOption').val());
+
+          if (duration < 0) {
+            duration = 1;
+            $('#durationOption').val(duration);
+          }
+          markerAnimateUnobtrusive.setOptions({ easing: $('#easingOption').val(), duration: duration });
+          marker.setPosition(event.latLng);
+        });
+
+        if (window.location.hash == "#iframe") {
+          $('#backLink').hide();
+          $('#controls').css('height', '55px');
+        }
+
+      });      
+
+    </script>
+  </head>
+  <body>
+    <div id="map_canvas"></div>
+
+    <div id="controls" class="control">
+      <div class="row">
+        <label for="easingOption">Easing:</label>
+        <select id="easingOption">
+          <option value="linear">linear</option>
+          <option value="swing">swing</option>
+          <option value="easeInQuad">easeInQuad</option>
+          <option value="easeOutQuad">easeOutQuad</option>
+          <option value="easeInOutQuad">easeInOutQuad</option>
+          <option value="easeInCubic">easeInCubic</option>
+          <option value="easeOutCubic">easeOutCubic</option>
+          <option value="easeInOutCubic">easeInOutCubic</option>
+          <option value="easeInQuart">easeInQuart</option>
+          <option value="easeOutQuart">easeOutQuart</option>
+          <option value="easeInOutQuart">easeInOutQuart</option>
+          <option value="easeInQuint">easeInQuint</option>
+          <option value="easeOutQuint">easeOutQuint</option>
+          <option value="easeInOutQuint" selected>easeInOutQuint</option>
+          <option value="easeInSine">easeInSine</option>
+          <option value="easeOutSine">easeOutSine</option>
+          <option value="easeInOutSine">easeInOutSine</option>
+          <option value="easeInExpo">easeInExpo</option>
+          <option value="easeOutExpo">easeOutExpo</option>
+          <option value="easeInOutExpo">easeInOutExpo</option>
+          <option value="easeInCirc">easeInCirc</option>
+          <option value="easeOutCirc">easeOutCirc</option>
+          <option value="easeInOutCirc">easeInOutCirc</option>
+          <option value="easeInElastic">easeInElastic</option>
+          <option value="easeOutElastic">easeOutElastic</option>
+          <option value="easeInOutElastic">easeInOutElastic</option>
+          <option value="easeInBack">easeInBack</option>
+          <option value="easeOutBack">easeOutBack</option>
+          <option value="easeInOutBack">easeInOutBack</option>
+          <option value="easeInBounce">easeInBounce</option>
+          <option value="easeOutBounce">easeOutBounce</option>
+          <option value="easeInOutBounce">easeInOutBounce</option>
+        </select>
+      </div>
+      <div class="row">
+        <label for="durationOption">Duration:</label>
+        <input type="number" id="durationOption" value="1000">
+      </div>
+      <div class="row" id="backLink">
+        <a href="http://robsite.net/google-maps-animated-marker-move">More on robsite.net &rarr;</a>
+      </div>
+
+    </div>
+
+    <div id="log" class="control">
+    </div>
+
+  </body>
+</html>