YOGA MAP
User Guide

Introduction

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Yoga Map

Easy to use Google Maps API Customization

Created: 06 Feb 2016

Last updated: 15 Mar 2017

Version: 2.2.0

By: Yura Linnik «Masscode»

E-mail: limasscode@gmail.com

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

INSTALATION

Include Files of Plugin

Connect files should be inside the teg <head>

To use the plugin you need these files:

These files are included as follows:

<!-- //// If in your site is already install "jquery", the second time it is not necessary to do //// -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- //// Main YogaMap plugin files //// -->
<script src="js/jquery.yogamap.js"></script>
<link rel="stylesheet" href="css/yogamap.css">

Call the Plugin

Initialization should be inside the teg <head>

Default Parameters

						
<script>$(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: '<h2>Marker Title</h2> <p>Address and other contacts</p>', //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

This code should be inside the teg <body>

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

API key

For customers with active implementations of the Google Maps JavaScript API prior to June 22, 2016, quota exceptions may apply. In certain instances, map loads in excess of 25,000 per day may be allowed free of charge until October 12, 2016. Learn more here. New implementations of the Google Maps JavaScript API are subject to the usage limits immediately.

Follow these steps to get an API key:

  1. Go to the Google Developers Console. To do this you need to have a Google account.
  2. Click on the menu icon.
  3. Click "IAM & Admin".
  4. Click "All projects".
  5. Click "Create Project".
  6. Type a name for your new project and click "Create".
  7. Now you need to enable Javascript API.
    Choose "Google Maps JavaScript API".
  8. Click "Enable".
  9. Click "Credentials".
  10. Click "Create credentials".
  11. Choose "API key".
  12. Select and copy your "API key" in clipboard
  13. Add the following code to your page before the plugin connection:
  14. <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>
    
  15. Done.

API Documentation

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
zoom
5
Number Value of the zoom
It may take the values: any positive number
scrollwheel
false
Boolean The trigger on / off scroll wheel
It may take the values: true, false
addmarkers
addmarkers: [{
	title: 'Marker Title',
	latlng: [0, 0],	
	icon: null,
	address: null,	
	contentstringAuto: false,
	contentstring: 'Content'
	infowindowOpen: false
}]
Array This paramet add an array of markers on map.
addmarkers / obj /
title
'Marker Title'
String The information pops up when you hover over the marker
addmarkers / obj /
latlng
[0, 0]
Array Coordinates of the marker (Latitude and Longitude)
Value of the array may take the values:any positive number
addmarkers / obj /
icon
null
String or Null Path to the custom marker image
e.g. icon: 'pic/m_4_white_s.png'
addmarkers / obj /
address
null
String or Null Adress of marker. It need to display in popup window
e.g. address: '121 King Street, Melbourne, Victoria 3000, Australia'
addmarkers / obj /
contentstringAuto
false
Boolean If True, the pop-up window filled in automatically, based on the information: "Title" and "Adress"
It may take the values: true, false
addmarkers / obj /
contentstring
'<h2>Marker Title</h2> <p>Address and other contacts</p>'
String The information you want to see in the pop-up window
addmarkers / obj /
infowindowOpen
false
Boolean If True, the pop-up window will open when the map is loaded
It may take the values: true, false
stylesEnable
false
Boolean The trigger on / off styling of map
It may take the values: true, false
styles
[]
Array This array should contain the parameters of stylization: obj_1, obj_2, obj_n
clusterEnable
false
Boolean The trigger on / off clustering of markers of map
It may take the values: true, false
customClusterEnable
false
Boolean The trigger on / off customization of icons of cluster
It may take the values: true, false
customCluster
default GM API
Array This array should contain the parameters of clustering: obj_1, obj_2, obj_n
e.q.
"customCluster":[{
	"height":56,
	"width":56,
	"url":'pic/c_7_white_m.png',
	"textColor":"#000",
	"textSize":14
}]
customCluster / obj /
height
default GM API
Number The height of the cluster image
It may take the values: any positive number
customCluster / obj /
width
default GM API
Number The width of the cluster image
It may take the values: any positive number
customCluster / obj /
url
default GM API
String Path to the custom cluster icon
e.g. url: 'pic/c_7_white_m.png'
customCluster / obj /
textColor
default GM API
String The text color in the icon cluster It may take the values: Hex Color Codes
e.g. textColor: '#fff'
customCluster / obj /
textSize
default GM API
Number Font size in the cluster icons
It may take the values: any positive number in px
disableDefaultUI
false
Boolean turn off the default controls.
It may take the values: true, false
zIndex (based on latitude) Number Allows you to change the stacking order of a marker
It may take the values: any positive number

Events

create()

This function is called when the plug is fully loaded and running


$('.any_class').yogamap({
	create: function(){}
});

centerChanged()

This function is called when the coordinates of the center of the map have been changed


$('.any_class').yogamap({
	centerChanged: function(){}
});

zoomChanged()

This function is called when the value of zoom have been changed


$('.any_class').yogamap({
	zoomChanged: function(){}
});

infowindowOpen()

This function is called when pop-up window have been opened


$('.any_class').yogamap({
	infowindowOpen: function(){}
});

infowindowClose()

This function is called when pop-up window have been closed


$('.any_class').yogamap({
	infowindowClose: function(){}
});

addMarkerEvent()

This function is called when new marker have been added


$('.any_class').yogamap({
	addMarkerEvent: function(){}
});

markerDrag()

This function is called when marker have been dragged


$('.any_class').yogamap({
	markerDrag: function(){}
});

disableClusterEvent()

This function is called when clustering have been disabled


$('.any_class').yogamap({
	disableClusterEvent: function(){}
});

enableClusterEvent()

This function is called when clustering have been enabled


$('.any_class').yogamap({
	enableClusterEvent: function(){}
});

Methods

setOptions(options)

Change options of the map.

options Type: object
The new options.

$('.any_class').yogamap('setOptions',{zoom:2,scrollwheel:true});

clearMarkers()

Removes all markers from the map.

This method does not accept any arguments

$('.any_class').yogamap('clearMarkers');

addMarkers(markers)

Add markers to the map.

options Type: array
The new markers.

$('.any_class').yogamap('addMarkers',[{
	"latlng":[0,0]
},{
	"latlng":[5,5]
}]);

disableCluster()

Disable clustering of markers.

This method does not accept any arguments

$('.any_class').yogamap('disableCluster');

enableCluster()

Enable clustering of markers.

This method does not accept any arguments

$('.any_class').yogamap('enableCluster');

changeStyle(style)

Change style of the map.

options Type: array
The new style.

$('.any_class').yogamap('changeStyle',[{
	"elementType":"labels.text.fill",
	"stylers":[{
		"saturation":36
	}]
}]);

destroy()

Removes all the functionality of the plugin.

This method does not accept any arguments

$('.any_class').yogamap('destroy');

VIDEO TUTORIALS

Presentation
Customizing map in 2 minutes. Chosed, copied, pasted and happy!
Setting the content in the info window of marker
You can insert any content in the information window: text, images, or any code NTML
View Mode
This mode allows you to view a map of the entire width of the screen
Changing the size of the map
The dimensions are set in percent relative to the width of the parent element
Adding zooming of map with the mouse scroll wheel
We enable this parameter if it does not prevent to scrolling of page
Adding more than one marker
Adding or removing a marker can be in one click
Changing map zoom
After put the marker need correct the zoom value
Changing style of map
You can create your own design, or use ready-made options
Changing the icon of markers
You can upload your image or use ready-made
Use the clustering of markers
You can enable or disable clustering and change icon of claster
Drag'n'drop image uploading
An easy way to upload your image
Use images in base64 encoding
Inserting images directly into the script code
Steps you through setting
Each next step takes you to the complete code of map
Set location of marker
Enter name of a place, city, state, address, or use the lat/long coordinates or draggable marker

OPTION EXAMPLES

Default Parameters

View source

Paste the following code into your page, to the place where you want to place the map
Unused parameters can be removed from the code


<!-- //////////////////////////////////////// -->
<!-- //////// Start instalation code //////// -->
<!-- //////////////////////////////////////// -->

<!-- //// If in your site is already install "jquery", the second time it is not necessary to do //// -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- //// Main YogaMap plugin files //// -->
<script src="js/jquery.yogamap.js"></script>
<link rel="stylesheet" href="css/yogamap.css">

<!-- //////////////////////////////////////// --> <!-- ///////// End instalation code ///////// --> <!-- //////////////////////////////////////// -->

Multiple Markers

Markers need to add into parameter "addmarkers"
A set of markers is an array of objects

View source

Paste the following code into your page, to the place where you want to place the map


<!-- //////////////////////////////////////// -->
<!-- //////// Start instalation code //////// -->
<!-- //////////////////////////////////////// -->

<!-- //// If in your site is already install "jquery", the second time it is not necessary to do //// -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- //// Main YogaMap plugin files //// -->
<script src="js/jquery.yogamap.js"></script>
<link rel="stylesheet" href="css/yogamap.css">

<!-- //////////////////////////////////////// --> <!-- ///////// End instalation code ///////// --> <!-- //////////////////////////////////////// -->

Open info window

To was opened information window default on the map, the parameter "infowindowOpen" should be set to true

View source

Paste the following code into your page, to the place where you want to place the map


<!-- //////////////////////////////////////// -->
<!-- //////// Start instalation code //////// -->
<!-- //////////////////////////////////////// -->

<!-- //// If in your site is already install "jquery", the second time it is not necessary to do //// -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- //// Main YogaMap plugin files //// -->
<script src="js/jquery.yogamap.js"></script>
<link rel="stylesheet" href="css/yogamap.css">

<!-- //////////////////////////////////////// --> <!-- ///////// End instalation code ///////// --> <!-- //////////////////////////////////////// -->

Scrollwheel

For switching on and off the zoom by scroll wheel, use parametr "scrollwheel"

View source

Paste the following code into your page, to the place where you want to place the map


<!-- //////////////////////////////////////// -->
<!-- //////// Start instalation code //////// -->
<!-- //////////////////////////////////////// -->

<!-- //// If in your site is already install "jquery", the second time it is not necessary to do //// -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- //// Main YogaMap plugin files //// -->
<script src="js/jquery.yogamap.js"></script>
<link rel="stylesheet" href="css/yogamap.css">

<!-- //////////////////////////////////////// --> <!-- ///////// End instalation code ///////// --> <!-- //////////////////////////////////////// -->

Custom Style

To change the style of the card, you must first to let this change by using the parametr "stylesEnable", by setting it in true
An array of styles must be specified in the parameter "styles"

View source

Paste the following code into your page, to the place where you want to place the map


<!-- //////////////////////////////////////// -->
<!-- //////// Start instalation code //////// -->
<!-- //////////////////////////////////////// -->

<!-- //// If in your site is already install "jquery", the second time it is not necessary to do //// -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- //// Main YogaMap plugin files //// -->
<script src="js/jquery.yogamap.js"></script>
<link rel="stylesheet" href="css/yogamap.css">

<!-- //////////////////////////////////////// --> <!-- ///////// End instalation code ///////// --> <!-- //////////////////////////////////////// -->

Custom Marker

The path to the custom icon of marker must be specified in the parameter "admarkers » icon"
Image of marker may be in png or base64

View source

Paste the following code into your page, to the place where you want to place the map


<!-- //////////////////////////////////////// -->
<!-- //////// Start instalation code //////// -->
<!-- //////////////////////////////////////// -->

<!-- //// If in your site is already install "jquery", the second time it is not necessary to do //// -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- //// Main YogaMap plugin files //// -->
<script src="js/jquery.yogamap.js"></script>
<link rel="stylesheet" href="css/yogamap.css">

<!-- //////////////////////////////////////// --> <!-- ///////// End instalation code ///////// --> <!-- //////////////////////////////////////// -->

Clustering Marker

To enable clustering can use paramentr "clusterEnable"

View source

Paste the following code into your page, to the place where you want to place the map


<!-- //////////////////////////////////////// -->
<!-- //////// Start instalation code //////// -->
<!-- //////////////////////////////////////// -->

<!-- //// If in your site is already install "jquery", the second time it is not necessary to do //// -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- //// Main YogaMap plugin files //// -->
<script src="js/jquery.yogamap.js"></script>
<link rel="stylesheet" href="css/yogamap.css">

<!-- //////////////////////////////////////// --> <!-- ///////// End instalation code ///////// --> <!-- //////////////////////////////////////// -->

Custom cluster icon

To use a custom image as a cluster, use parametrs "customClusterEnable" and "customCluster"

View source

Paste the following code into your page, to the place where you want to place the map
Image of marker may be in png or base64


<!-- //////////////////////////////////////// -->
<!-- //////// Start instalation code //////// -->
<!-- //////////////////////////////////////// -->

<!-- //// If in your site is already install "jquery", the second time it is not necessary to do //// -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- //// Main YogaMap plugin files //// -->
<script src="js/jquery.yogamap.js"></script>
<link rel="stylesheet" href="css/yogamap.css">

<!-- //////////////////////////////////////// --> <!-- ///////// End instalation code ///////// --> <!-- //////////////////////////////////////// -->

Cusomize All

The plugin allows you to customize all the items on the map

View source

Paste the following code into your page, to the place where you want to place the map


<!-- //////////////////////////////////////// -->
<!-- //////// Start instalation code //////// -->
<!-- //////////////////////////////////////// -->

<!-- //// If in your site is already install "jquery", the second time it is not necessary to do //// -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- //// Main YogaMap plugin files //// -->
<script src="js/jquery.yogamap.js"></script>
<link rel="stylesheet" href="css/yogamap.css">

<!-- //////////////////////////////////////// --> <!-- ///////// End instalation code ///////// --> <!-- //////////////////////////////////////// -->

Photo in info window

View source

Paste the following code into your page, to the place where you want to place the map
Unused parameters can be removed from the code


<!-- //////////////////////////////////////// -->
<!-- //////// Start instalation code //////// -->
<!-- //////////////////////////////////////// -->

<!-- //// If in your site is already install "jquery", the second time it is not necessary to do //// -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- //// Main YogaMap plugin files //// -->
<script src="js/jquery.yogamap.js"></script>
<link rel="stylesheet" href="css/yogamap.css">

<!-- //////////////////////////////////////// --> <!-- ///////// End instalation code ///////// --> <!-- //////////////////////////////////////// -->

Your logo instead of the marker

View source

Paste the following code into your page, to the place where you want to place the map
Unused parameters can be removed from the code


<!-- //////////////////////////////////////// -->
<!-- //////// Start instalation code //////// -->
<!-- //////////////////////////////////////// -->

<!-- //// If in your site is already install "jquery", the second time it is not necessary to do //// -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- //// Main YogaMap plugin files //// -->
<script src="js/jquery.yogamap.js"></script>
<link rel="stylesheet" href="css/yogamap.css">

<!-- //////////////////////////////////////// --> <!-- ///////// End instalation code ///////// --> <!-- //////////////////////////////////////// -->

Markers to Front by Changing Z-Index

View source

Paste the following code into your page, to the place where you want to place the map
Unused parameters can be removed from the code


<!-- //////////////////////////////////////// -->
<!-- //////// Start instalation code //////// -->
<!-- //////////////////////////////////////// -->

<!-- //// If in your site is already install "jquery", the second time it is not necessary to do //// -->
<script src="js/jquery-1.11.1.min.js"></script>

<!-- //// Main YogaMap plugin files //// -->
<script src="js/jquery.yogamap.js"></script>
<link rel="stylesheet" href="css/yogamap.css">

<!-- //////////////////////////////////////// --> <!-- ///////// End instalation code ///////// --> <!-- //////////////////////////////////////// -->