tinyMap: v2.9.0 example

by essoduke chang

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.0.min.js?ver=2.9.0"></script>
<button id="change">Change</button>
<div id="map-markers" class="map"></div>

CSS

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

JavaScript

var map = $('#map-markers');
map.tinyMap({
	'center': ['25.037627167884715', '121.56732559204102'],
	'zoom': 13,
	'marker': [
          {'addr': ['25.041282077030896', '121.56741142272949'], 'id': 'A'},
      	{'addr': ['25.0383270525352', '121.57045841217041'], 'id': 'B'},
      	{'addr': ['25.034516521123315','121.56496524810791'], 'id': 'C'},
      	{'addr': ['25.037627167884715', '121.56732559204102'], 'id': 'D'},
      	{'addr': ['25.039726809855434', '121.55633926391602'], 'title': '012345', 'id': 'E'},
      	{'addr': ['25.037160575899154', '121.55350685119629'], 'id': 'F'},
      	{'addr': ['25.035877438787317', '121.55715465545654'], 'id': 'G'},
      	{'addr': ['25.033972149830436', '121.56063079833984'], 'id': 'H'},
      	{'addr': ['25.031794640503858', '121.56414985656738'], 'id': 'I'},
      	{'addr': ['25.035255306871402', '121.56998634338379'], 'id': 'J'},
	]
});
$('#change').on('click', function () {
	map.tinyMap('modify', {
		'marker': [
              {
				'addr': ['25.041593128099265', '121.5723466873169'],
				'text': '<strong>110台灣台北市信義區忠孝東路五段295巷5號</strong>',
				'icon': 'http://app.essoduke.org/tinyMap/4.png'
			},
			{
                  'id': 'E',
				'addr': ['25.038521464229383', '121.55900001525879'],
				'icon': 'http://app.essoduke.org/tinyMap/6.png',
				'title': 'qwerty',
				'text': 'Hello World',
				'event': function (e) {
					alert(e.latLng.lat() + ', ' + e.latLng.lng());
				}
			}
		]
	});
});