Вы находитесь здесь:Плагины jQuery»Yoga Map - Google Map Cusomizer или быстрая настройка карт от Google

Yoga Map - Google Map Cusomizer или быстрая настройка карт от Google

Суббота, 13 Февраль 2016 13:33 Автор 

The Perfect Choice For Customizing Maps

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>

Инициализацию можно прописать тоже между <head> и </head> или в отдельном js-файле но уже без тега <script>


<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
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":'icon.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

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');

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(){}
});

Прочитано 18051 раз Последнее изменение Суббота, 13 Февраль 2016 14:14
Оцените материал
(1 Голосовать)

Комментарии   

 
# Esteban 03.05.2019 11:46
I've learn several just right stuff here. Certainly worth bookmarking for revisiting.
I surprise how much effort you put to make one of these fantastic informative website.



Here is my website: online marketing: http://sabrinasakti.blogs.uny.ac.id/2018/06/04/cara-mendapatkan-uang-di-internet-dengan-modal-kecil/
Ответить | Ответить с цитатой | Цитировать
 
 
# Ezra 03.05.2019 13:16
I really like what you guys tend to be up too. This kind of
clever work and reporting! Keep up the excellent works guys I've
added you guys to my own blogroll.

Here is my web-site - wordpress blog: http://sabrinasakti.blogs.uny.ac.id/2018/06/04/cara-mendapatkan-uang-di-internet-dengan-modal-kecil/
Ответить | Ответить с цитатой | Цитировать
 
 
# Maximo 05.05.2019 10:47
Attractive section of content. I just stumbled
upon your weblog and in accession capital to assert
that I get actually enjoyed account your blog posts.
Any way I will be subscribing to your augment and even I achievement you access consistently quickly.



My web-site - search engine optimization (ahyani.blog.Mercubuana.ac.id: http://ahyani.blog.mercubuana.ac.id/2017/12/05/keuntungan-menjadi-member-alfamart-waralaba-alfamart/)
Ответить | Ответить с цитатой | Цитировать
 
 
# Danae 06.06.2019 15:24
At this time it appears like Movable Type is
the top blogging platform out there right now. (from what
I've read) Is that what you are using on your blog?
Warmane

Have a look at my webpage ... Buy FIFA 20 Comfort Trade: http://serwer1810088.home.pl/autoinstalator/smf/index.php?topic=14156.0
Ответить | Ответить с цитатой | Цитировать
 
 
# Eugenia 12.06.2019 19:35
Hmm it seems like your website ate my first comment (it was extremely long) so I guess I'll just
sum it up what I had written and say, I'm thoroughly enjoying
your blog. I as well am an aspiring blog blogger but I'm still new to everything.
Do you have any points for newbie blog writers?
I'd certainly appreciate it.

My web page :: online dating
service: http://simonvxyz61739.bluxeblog.com/12629105/great-hobbies-for-you-to-select-from
Ответить | Ответить с цитатой | Цитировать
 
 
# Anita 15.06.2019 10:29
At this time I am going to do my breakfast,
when having my breakfast coming over again to read additional news.


Here is my site: home business: http://knoxzcdc34566.blogs-service.com/12459400/how-to-find-a-hobby-to-like
Ответить | Ответить с цитатой | Цитировать
 
 
# Leslie 18.06.2019 23:41
My partner and I stumbled over here coming from a different page and thought I should check things out.

I like what I see so now i'm following you. Look forward to
looking over your web page yet again.

my webpage write sample
articles: http://lorenzogyna59269.ka-blogs.com/12245481/a-manual-to-finding-a-hobby-that-s-right-for-you
Ответить | Ответить с цитатой | Цитировать
 
 
# Lilliana 19.06.2019 09:02
When some one searches for his necessary thing, therefore he/she needs to be available that in detail,
thus that thing is maintained over here.

my blog Vilma: http://travishatk43210.free-blogz.com/11773321/how-to-find-a-hobby-to-delight-in
Ответить | Ответить с цитатой | Цитировать
 
 
# Richie 16.07.2019 03:27
Excellent beat ! I would like to apprentice while you amend your web
site, how could i subscribe for a blog site? The account aided me a acceptable deal.
I had been tiny bit acquainted of this your broadcast provided bright clear concept

Feel free to visit my weblog; cialis tadalafil: http://www.cialisiv.com/
Ответить | Ответить с цитатой | Цитировать
 
 
# Vickie 20.07.2019 06:51
Hi there to every one, it's in fact a good for me to
go to see this site, it consists of precious Information.

Feel free to visit my webpage; להעלות מסת שריר: http://ilearnmedical.co.za/members/yxixig/
Ответить | Ответить с цитатой | Цитировать
 

Добавить комментарий

Защитный код
Обновить

Онлайн-конструктор українського орнаменту

Чем вы можете помочь?

1. Разместить ссылку на своем сайте
Если вы ведете блог или у вас есть сайт - поставьте ссылку на www.masscode.ru. Скопируйте этот код:

<a href="http://masscode.ru" title="Плагины, сниппеты и пользовательские скрипты на jquery" target="_blank">Плагины, сниппеты и пользовательские скрипты на jquery</a>

2. Поддержать проект финансово
Вы можете сделать добровольное пожертвование

AUH: U878157792792
USD: Z821422743261
RUB: R360648948582
EUR: E298388086680

Свежие материалы

Последние коментарии

Вы находитесь здесь:   ГлавнаяjQueryYoga Map - Google Map Cusomizer или быстрая настройка карт от Google