gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.
1. Initialize the plugin by referencing the necessary files:
<script src="http://maps.google.com/maps/api/js"></script>
<script src="gmaps.min.js"></script>
2. Define container.
<div id="map"></div>
3. Basic usage may look something like this.
var map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
Refer following links for detailed documentation, configuration options, methods and examples:
jQuery plugin based on raphael.js that allows you to display dynamic vector maps.
1. Initialize the plugin by referencing the necessary files:
<link rel="stylesheet" type="text/css" href="/path/to/mapael.css">
<script src="http://maps.google.com/maps/api/js"></script>
<script src="/path/to/raphael.min.js"></script>
<script src="/path/to/gmaps.min.js"></script>
2. Define container.
<div class="container">
<div class="map">Alternative content</div>
</div>
3. Basic usage may look something like this.
$(".container").mapael({
map : {
name : "world_countries"
}
});
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL | ||||||
|---|---|---|---|---|---|---|---|
| Plugin Link | http://www.vincentbroute.fr/mapael/ | ||||||
| Github Page | https://github.com/neveldo/jQuery-Mapael | ||||||
| Template Page |
|
jVectorMap is a vector-based, cross-browser and cross-platform component for interactive geography-related data visualization on the web. It provides numerious features like smooth zooming and panning, fully-customizable styling, markers, labels and tooltips.
1. Initialize the plugin by referencing the necessary files:
<link rel="stylesheet" href="/path/to/jquery-jvectormap-2.0.1.css" type="text/css" media="screen"/>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery-jvectormap-2.0.1.min.js"></script>
<script src="/path/to/jquery-jvectormap-world-mill.js"></script>
2. Define container.
<div id="world-map" style="width: 600px; height: 400px"></div>
3. Basic usage may look something like this.
$('#world-map').vectorMap({map: 'world_mill'});
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://jvectormap.com/ |
| Github Page | https://github.com/bjornd/jvectormap |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/vector-maps-jvector.html |
JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9.
1. Initialize the plugin by referencing the necessary files:
<link href="/path/to/jqvmap.css" media="screen" rel="stylesheet" type="text/css">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.vmap.js"></script>
<script src="/path/to/jquery.vmap.world.js"></script>
2. Define container.
<div id="vmap" style="width: 600px; height: 400px;"></div>
3. Basic usage may look something like this.
$('#vmap').vectorMap({ map: 'world_en' });
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://jqvmap.com/ |
| Github Page | https://github.com/manifestinteractive/jqvmap |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/vector-maps-jvq.html |