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:
Markup
<script src="http://maps.google.com/maps/api/js"></script>
<script src="gmaps.min.js"></script>2. Define container.
Markup
<div id="map"></div>3. Basic usage may look something like this.
JavaScript
var map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://hpneo.github.io/gmaps/ |
| Github Page | https://github.com/hpneo/gmaps |
| Template Page | https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/google-maps.html |
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:
Markup
<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.
Markup
<div id="world-map" style="width: 600px; height: 400px"></div>3. Basic usage may look something like this.
JavaScript
$('#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 | https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/jvector-maps.html |