Giter Club home page Giter Club logo

jquery-tinymap's Introduction

jQuery-tinyMap

This plugin will help you to create 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.
  • Dynamically change the map.
  • MarkerClusterer support.
  • KML file output.

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': [
        {
            // Marker place location
            'addr': ['Lat', 'Lng'],
            // Or address string e.g. `1600 Pennsylvania Ave NW, Washington, DC 20500`
            // Or {lat: 'lat', lng: 'lng'}
            'title': 'Display on Mouseover', // (Optional)
            'text': 'Display in infoWindow', // (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 more events
            'event': {
                'click': function (event) {...},
                'mouseover': function (event) {...}
            }
               OR runeonce
            '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 overlayers
// 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'); 

// Overlays KML output
// Get the kml string.
var kml = $(selector).tinyMap('getKML'); 
// Or using options:
$(selector).tinyMap('getKML', {
    'download': true|false,  // Direct download KML not return the string.
    'marker': true|false,    // Include marker overlay
    'polyline': true|false,  // Include polyline overlay
    'direction': true|false  // Include direction overlay
});

Using tinyMap instance

var map = $(selector);
var instance = map.data('tinyMap'); 
var markers = instance._markers; // All markers on the Map.
var polylines = instance._polylines; // All polyline layers
var polygons = instance._polygons; // All polygon layers
var circles = instance._circles; // All circle layers
// You could display all available objects by `console.dir(instance)`

License

This plugin is released under the MIT License.

jquery-tinymap's People

Contributors

essoduke avatar sanketh95 avatar

Watchers

TienYang avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.