tinyMap: v2.9.3 example

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=zh-TW&amp;libraries=geometry"></script>
<script src="http://app.essoduke.org/tinyMap/jquery.tinyMap-2.9.3.min.js?ver=2.9.3"></script>
<div id="map" class="map"></div>

CSS

.map{width:100%;height:100vh}

JavaScript

var map = $('#map');
  
map.tinyMap({
      'center': ['122.636028', '120.357932'],
      'zoom': 14,
      'direction': [
          {
              'from': '高雄車站',
              'fromText': '出發',
              'to': '高鐵左營站',              
              'waypoint': [
                  {
                      'location': '高雄市立十全國小',
                      'text': '休息'
                  }
              ],
              'icon': {
                  'from': 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
                  'to': 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png',
                  'waypoint': 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
              }
          }
      ]
  });