Yoga Map is a fully-featured jQuery Plugin integrated with Google Maps API v3 plug-in that allows you to quickly and easily place map on your site in the style of site design

Designed by the best web experts and created with the utmost attention to design, usability, UX, and UI

Yoga Map Plugin is the perfect choice to simplify and accelerate the customization of your map

Multiple Markers

Info window

Scrollwheel

Custom Style

Custom Marker

Clustering Marker

Custom cluster icon

And much more

INCLUDE FILES <head> ...[THIS CODE]... </head>

<!--If you have already use jquery, then this line is not necessary-->
<script src="/js/jquery-1.11.1.min.js"></script>
<!-- Plugins files-->
<link rel="stylesheet" href="/css/yogamap.css">
<script src="/js/jquery.yogamap.js"></script>

PLUGINS INITIALIZATION <head> ...[THIS CODE]... </head>

<script>
$(window).load(function(){
$('.ini_class').yogamap({
width: '100%', //Width of map
height: '50%', //Height of map
center: [0, 0], //Coordinates of the center of the map
zoom: 5, //Value of the zoom
scrollwheel: false, //The trigger on / off scroll wheel
//// This paramet add an array of markers on map
addmarkers: [{
title: 'Marker Title', //The information pops up when you hover over the marker
latlng: [0, 0], //Coordinates of the marker
icon: null, //Path to the custom marker image
address: null, //Adress of marker. It need to display in popup window
contentstringAuto: false, //If True, the pop-up window filled in automatically, based on the information: "Title" and "Adress"
contentstring: '

Marker Title

Address and other contacts

', //The information you want to see in the pop-up window
infowindowOpen: false //If True, the pop-up window will open when the map is loaded
}],
//// These parameters are responsible for the changing the appearance of the map
stylesEnable: false, //The trigger on / off styling of map
styles: [], //This array should contain the parameters of stylization
//// These parameters are responsible for the clustering of markers
clusterEnable: false, //The trigger on / off clustering of markers of map
customClusterEnable: false, //The trigger on / off customization of icons of cluster
customCluster: [], //This array should contain the parameters of clustering
//// These parameters are different callback functions
create: function() {}, //This function is called when the plug is fully loaded and running
centerChanged: function() {}, //This function is called when the coordinates of the center of the map have been changed
zoomChanged: function() {}, //This function is called when the value of zoom have been changed
infowindowOpen: function() {}, //This function is called when pop-up window have been opened
infowindowClose: function() {},//This function is called when pop-up window have been closed
addMarkerEvent: function() {}, //This function is called when new marker have been added
markerDrag: function() {}, //This function is called when marker have been dragged
disableClusterEvent: function(){}, //This function is called when clustering have been disabled
enableClusterEvent: function(){} //This function is called when clustering have been enabled
})
})
</script>

HTML <body> ...[THIS CODE]... ></body>

<div class="ini_class"></div>

OPTIONS

Option

Default value

Datatype

Description

width

"100%"

Number

Sets width of the Map.
It may take the values: any positive number in px ar persent

height

"50%"

Number

Sets height of the Map.
It may take the values: any positive number in px ar persent

center

[0, 0]

Array

Coordinates of the center of the map (Latitude and Longitude)
Value of the array may take the values:any positive number