jQuery-tinyMap

This plugin will helping you to create the simple or complex Google Maps on the page.

For complete options, methods and examples (Traditional Chinese):
http://app.essoduke.org/tinyMap/

Download builder:
http://app.essoduke.org/tinyMap/customize/

Features

Easy to configure and use.
Supports Marker, Text label, Polyline, Polygon, Circle, KML, Direction layers.
Custom events of map or layers.
Dynamic change the map.
MarkerClusterer support.

Install

Include the Google Maps API v3 before jQuery tinyMap.

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="jquery.tinyMap.js"></script>

Create the HTML container.

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

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

#map{width: WIDTH; height: HEIGHT}

Usage

Full options: http://app.essoduke.org/tinyMap/#parameters

//Setting up the map
$('#map').tinyMap({
    'center': {'lat': 'Lat', 'lng': 'Lng'},
    // or 'center': 'lat, lng'
    // or 'center': [lat, lng]
    // or 'center': 'ADDRESS'
    'zoom': 14,
    // Map events binding
    'event': {
        'idle': function () {}
        // OR
        'idle': {
            'func': function () {},
            'once': true / false //Run once
        }
        ...
        ...
    }
    ...
    ...
});

Create the Markers

$(selector).tinyMap({
    'marker': [
        {
            'addr': ['Lat', 'Lng'],
            // Or address string e.g. `1600 Pennsylvania Ave NW, Washington, DC 20500`
            // Or {lat: 'lat', lng: 'lng'}
            'title': 'Hello World!', // (Optional)
            'text': 'Cogito ergo sum!', // (optional)
            'icon': 'http://domain/icon.png' // (optional)
            // Binding Click event
            'event': function (event) {
                console.log(this.text); // Marker text property.
                console.log(event.latLng.lat()); // Mousr event
            }
            /* OR 
            'event': {
                'click': function (event) {...},
                'mouseover': function (event) {...}
            }
               OR
            'event': {
                'click': {
                    'func': function () {...}
                    'once': true / false
                },
                'mouseover': {
                    ...
                }
            }
            */
        }
        ...
        ...
    ]
});

Methods

// Methods
// e.g. Move the map center to specified location
$(selector).tinyMap('panto', 'Address string');
$(selector).tinyMap('panto', ['Lat', 'Lng']);
$(selector).tinyMap('panto', {lat: 'Lat', lng: 'Lng'});

// Dynamic setting up
$(selector).tinyMap('modify', {OPTIONS});

// e.g. Disable draggable
$(selector).tinyMap('modify', {
    'draggable': false
    //Resetting  zoom level
    'zoom': 16
});

// Clear specified layers
// Options: marker, polyline, polygon, circle, direction, kml
$(selector).tinyMap('clear', 'marker,polyline,polygon...etc');
// or use array
$(selector).tinyMap('clear', ['marker', 'polyline', 'polygon'...]);
// or clear all layers
$(selector).tinyMap('clear');

Using tinyMap instance

var map = $(selector);
var instance = map.data('tinyMap'); 
var markers = instance._markers; // All markers on the Map.

License

This plugin is released under the MIT License.

ikaritw/jQuery-tinyMap