一種丟棄 Google Maps API 手冊的概念!輕鬆在網頁建立 Google 地圖的 jQuery Plugin
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CHANGELOG.md
LICENSE.MD
README.md
bower.json
jquery.tinyMap.js
jquery.tinyMap.min.js

README.md

jQuery-tinyMap Plugin

This plugin will help to create the Google Maps easier on page.

Online documentation and demonstration:
https://code.essoduke.org/tinyMap/ (Traditional Chinese only)

Install

Include the jQuery library and tinyMap.

<script src="jquery.js"></script>
<script src="jquery.tinyMap.js"></script>

bower

$bower install jquery-tinyMap

Create the HTML container.

<div id="map"></div>

Setting up the container's width and height with CSS:

#map {
    width: 'MAP WIDTH';
    height: 'MAP HEIGHT';
}

Usage

Online documentation:
https://code.essoduke.org/tinyMap/docs (Traditional Chinese only)

// Basic
$(selector).tinyMap({
    // Map center
    'center': {
        'lat': 'Lat', 
        'lng': 'Lng'
    },
    // or 'center': 'lat, lng'
    // or 'center': [lat, lng]
    // or 'center': 'ADDRESS'
    // or 'center': 'N48°45.5952  E20°59.976' // WGS84 format
    'zoom': 14
});

Create the Markers

$(selector).tinyMap({
    'marker': [
        {
            // Custom Identity string (Optional)
            'id'  : 'Marker ID',
            // Marker place location
            'addr': ['Lat', 'Lng'],
            // Or address string. e.g. `1600 Pennsylvania Ave NW, Washington, DC 20500`
            // Or Object {lat: 'lat', lng: 'lng'}
            // Or latlng string 'lat, lng'
            'title': 'Display on Mouseover', // (Optional)
            'text': 'Display in infoWindow', // (Optional)
            'icon': 'http://domain/icon.png' // (Optional)
            // You could define own properties by yourself.
            'hello': 'yes'
            // Binding Click event
            'event': function () {
                console.log(this.text); // Get marker's text property.
                console.log(event.latLng.lat()); // Get markers' position.
                // Access own property
                console.log(this.hello);
            }
            /* More events
            'event': {
                'click': function (event) {...},
                'mouseover': function (event) {...}
            }
            */
            /* or Run Once
            'event': {
                'click': {
                    'func': function () {...}
                    'once': true / false
                },
                'mouseover': {
                    ...
                }
            }
            */
        }
    ]
});

Methods

panTo

// Methods
// e.g. Move map center to the location.
$(selector).tinyMap('panTo', 'Address string');
$(selector).tinyMap('panTo', ['Lat', 'Lng']);
$(selector).tinyMap('panTo', {lat: 'Lat', lng: 'Lng'});
// Error handler
$(selector).tinyMap('panTo', {lat: 'Lat', lng: 'Lng'}, function (status) {
    console.log(status);
});

modify

// Dynamic setting up
// e.g. Disable draggable
$(selector).tinyMap('modify', {
    'draggable': false
    //Resetting  zoom level
    'zoom': 16
});
// e.g. Insert markers
$(selector).tinyMap('modify', {
    'marker': [
        {'addr': '...'},
        {'addr': '...'},
        ...
    ]
});
// e.g. Move the specified marker to new location.
$(selector).tinyMap('modify', {
    'marker': [
        {'id': 'Marker ID', 'addr': ['lat', 'lng']},
        {'id': 'Marker ID', 'addr': ['lat', 'lng']},
        ...
    ]
});

query

// Query LatLng from Address
$(selector).tinyMap('query', 'Taipei 101, Taiwan', function (addr) {
    console.log(addr.geometry.location.lat()); // Latitude
    console.log(addr.geometry.location.lng()); // Longitude
});
// Query Address from LatLng
$(selector).tinyMap('query', ['25.034516521123315','121.56496524810791'], function (addr) {
    console.log(addr.formatted_address); //110台灣台北市信義區信義連通天橋(臺北101至Att4Fun)
});
// Support multiple format of LatLng
$(selector).tinyMap('query', {lat: 25.034516521123315, lng: 121.56496524810791}, function...);
$(selector).tinyMap('query', '25.034516521123315, 121.56496524810791', function...);

get

Get layers on the map.

// Get specified layer
var layer = $(selector).tinyMap('get', 'marker');
// Or multiple layers
var layers = $(selector).tinyMap('get', 'marker,direction');

// Get specified items of layer
var layers = $(selector).tinyMap('get', {
    'marker': [0, 2] // Get the 1st and 3rd markers. (Index must be integer)
    'polyline': ['A', 'C'] // Get the matched Id of polylines.
    'circle': [0, 'A'] // Also could be mixed.
});

// Get map instance
var map = $(selector).tinyMap('get', 'map');

// Callback
$(selector).tinyMap('get', 'marker', function (items) {
    console.dir(items);
});

clear

Clear specitied items of layers.

// Clear overlayers
// @param {Object} layer Layer Object.
$(selector).tinyMap('clear', 'marker,polyline...');

// Specified items in layer
$(selector).tinyMap('clear', {
    'marker': [0, 2] // Remove the 1st and 3rd markers. (Index must be integer)
    'polyline': ['A', 'C'] // Remove the matched Id of polylines.
    'circle': [0, 'A'] // Also could be mixed.
    'direction': [] // Empty array for remove all of them.
});

// Clear all layers
$(selector).tinyMap('clear'); 

close

Close all opened infoWindow of layers.

// Close all infoWindows of layers
// @param {Object} layer Layer Object.
$(selector).tinyMap('close', 'marker,polyline...');

// Specified items in layer
$(selector).tinyMap('close', {
    'marker': [0, 2] // Remove the 1st and 3rd markers. (Index must be integer)
    'polyline': ['A', 'C'] // Remove the matched Id of polylines.
    'circle': [0, 'A'] // Also could be mixed.
    'direction': [] // Empty array for remove all of them.
});

// Close all infoWindows of layers
$(selector).tinyMap('close'); 

getKML

// Overlays KML output
// Get the kml string.
var kml = $(selector).tinyMap('getKML'); 

// Or using options:
$(selector).tinyMap('getKML', {
    'download': false,  // TRUE for direct download the KML file.
    'marker': true,    // Include marker overlay
    'polyline': true,  // Include polyline overlay
    'polygon': true,   // Include polygon overlay
    'circle': true,    // Include circle overlay
    'direction': true  // Include direction overlay
});

API Configure

You could setup the API before using the tinyMap.

// Set up before tinyMap executes.
$.fn.tinyMapConfigure({
    // Google Maps API location
    'api': '//maps.google.com/maps/api/js',
    // Map Lanuguage
    'language': 'zh-TW',
    // Google Maps API Libraries
    'libraries': 'adsense, geometry...',
    // MarkerClusterer library location
    'clusterer': '//google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js'
});

// Then executes.
$(selector).tinyMap(...);

Using tinyMap instance

// Create the map first.
var map = $(selector);
map.tinyMap(...);

// Get the instance from map.
var instance = map.data('tinyMap'); 
// Access map class
var map = instance.map;
// Get markers directly
var markers = instance._markers;
// Or access via `get` method.
var markers = instance.get('marker');
// browse all available methods:
console.log(instance);

License

This plugin is released under the MIT License.