tinyMap: find nearest marker
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&language=zh-TW&libraries=geometry"></script>
<script src="http://app.essoduke.org/tinyMap/jquery.tinyMap-2.8.9.min.js"></script>
<button id="change">Change</button>
<div id="map"></div>
CSS
#map{width:100%;height:300px}
JavaScript
var map = $('#map');
// Using GeoLocation API
var cleancut = [
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"lightness": 100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
},
{
"color": "#C6E2FF"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#C5E3BF"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#D1D1B8"
}
]
}
];
map.tinyMap({
center: { lat: '24.178898', lng: '120.646882' },
zoom: 13,
marker: [
{ addr: ['24.178898149830436', '120.64688279833984'] },
{ addr: ['24.178898640503858', '120.64688285656738'] },
{ addr: ['24.178898306871402', '120.64688234338379'] },
{ addr: ['24.178898498524844', '120.64688229677124'] },
{ addr: ['24.178898279240775', '121.57376289367676'] }
],
// 設置 markerCluster: true 以啟用分組
markerCluster: true
});
$('#change').on('click', function () {
map.tinyMap('modify', {
'styles': cleancut
});
});