tinyMap to handle Google Map

http://app.essoduke.org/tinyMap/

HTML

XHTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="js/jquery.tinyMap.min.js"></script> <div id="gmap" style="width: 100%; height: 440px"></div>

1 2 3 4 5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="js/jquery.tinyMap.min.js"></script>   <div id="gmap" style="width: 100%; height: 440px"></div>

Javascript

function init_map(){ map = $('#gmap'); map.tinyMap({ zoom: 3, scrollwheel: false, marker: [ {addr: ['33.882648', '130.879787'], text: 'Kyomachi Shop', 'id': 'Kyomachi Shop'}, {addr: ['33.885827', '130.880040'], text: 'Uomachi Shop', 'id': 'Uomachi Shop'}, {addr: ['33.885411', '130.882519'], text: 'COLET Shop', 'id': 'COLET Shop'}, {addr: ['25.042333', '121.544913'], text: 'Taipei SOGO Branch', 'id': 'Taipei SOGO Branch'}, {addr: ['25.040868', '121.565605'], text: 'Taipei HanKyu Branch', 'id': 'Taipei HanKyu Branch'}, {addr: ['1.274893', '103.843510'], text: '100AM Shop', 'id': '100AM Shop'}, {addr: ['1.301506', '103.838549'], text: '313somerset Shop', 'id': '313somerset Shop'}, {addr: ['31.205884', '121.467854'], text: 'SunMoonLightCenter', 'id': 'SunMoonLightCenter'}, {addr: ['31.233118', '121.411928'], text: 'GLOBAL HARBOR', 'id': 'GLOBAL HARBOR'} ] }); $('#gmapcontrols button').on('click', function(e){ var obj = $(this), id = obj.text(), m = {}, marker = {}, markers = [], i = 0; // 取得 tinyMap 實例 m = map.data('tinyMap'); // 取得所有標記 markers = m._markers; close_all_markers(); for (i = 0; i < markers.length; i += 1) { marker = markers[i]; // 若標記 id 符合則開啟 infoWindow if (id === marker.id) { marker.infoWindow.open(m.map, marker); // 移動地圖 m.map.panTo(marker.position); map.tinyMap('modify', {zoom:15}) break; } } }); } function close_all_markers(){ // 取得 tinyMap 實例 m = map.data('tinyMap'); // 取得所有標記 markers = m._markers; for (i = 0; i < markers.length; i++) { marker = markers[i]; // 關閉所有 infoWindow marker.infoWindow.close(); } }

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

function init_map(){ map = $('#gmap'); map.tinyMap({ zoom: 3, scrollwheel: false,     marker: [         {addr: ['33.882648', '130.879787'], text: 'Kyomachi Shop', 'id': 'Kyomachi Shop'},         {addr: ['33.885827', '130.880040'], text: 'Uomachi Shop', 'id': 'Uomachi Shop'},         {addr: ['33.885411', '130.882519'], text: 'COLET Shop', 'id': 'COLET Shop'},         {addr: ['25.042333', '121.544913'], text: 'Taipei SOGO Branch', 'id': 'Taipei SOGO Branch'},         {addr: ['25.040868', '121.565605'], text: 'Taipei HanKyu Branch', 'id': 'Taipei HanKyu Branch'},         {addr: ['1.274893', '103.843510'], text: '100AM Shop', 'id': '100AM Shop'},         {addr: ['1.301506', '103.838549'], text: '313somerset Shop', 'id': '313somerset Shop'},         {addr: ['31.205884', '121.467854'], text: 'SunMoonLightCenter', 'id': 'SunMoonLightCenter'}, {addr: ['31.233118', '121.411928'], text: 'GLOBAL HARBOR', 'id': 'GLOBAL HARBOR'} ] });     $('#gmapcontrols button').on('click', function(e){ var obj = $(this),         id = obj.text(),         m = {},         marker = {},         markers = [],         i = 0;     // 取得 tinyMap 實例     m = map.data('tinyMap');     // 取得所有標記     markers = m._markers;     close_all_markers();       for (i = 0; i < markers.length; i += 1) {         marker = markers[i];         // 若標記 id 符合則開啟 infoWindow         if (id === marker.id) {             marker.infoWindow.open(m.map, marker);             // 移動地圖             m.map.panTo(marker.position);             map.tinyMap('modify', {zoom:15})             break;         }     } }); }   function close_all_markers(){ // 取得 tinyMap 實例     m = map.data('tinyMap');     // 取得所有標記     markers = m._markers;       for (i = 0; i < markers.length; i++) {         marker = markers[i];         // 關閉所有 infoWindow         marker.infoWindow.close();     } }