Вы находитесь здесь:Плагины 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(){}
});

Прочитано 22095 раз Последнее изменение Суббота, 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/
Ответить | Ответить с цитатой | Цитировать
 
 
# Glenna 25.07.2019 04:59
My partner and I absolutely love your blog
and find the majority of your post's to be precisely what I'm looking for.
can you offer guest writers to write content for you?
I wouldn't mind producing a post or elaborating on a few of the subjects you write about here.
Again, awesome website!

Feel free to visit my webpage; עליית
מסת שריר: http://Seedcontrol.uz/ru/forum/user/29206/
Ответить | Ответить с цитатой | Цитировать
 
 
# Susanne 25.07.2019 21:47
Hi it's me, I am also visiting this site daily, this web page is really pleasant
and the visitors are in fact sharing pleasant thoughts.



Here is my web page - איך להעלות מסת שריר ולהוריד
שומן: http://dragontech.ru/communication/forum/user/7673/
Ответить | Ответить с цитатой | Цитировать
 
 
# davidDenly 06.08.2019 17:21
I really liked the whole kit that was written.
I'd hump to regard reading more and more.
I transfer be cock-a-hoop to learn as much as I can
I genuinely wonder you in behalf of the issue so well done recognition you unusually much for the time. Successfully!
Ответить | Ответить с цитатой | Цитировать
 
 
# Megan 07.08.2019 22:52
Woah! I'm really digging the template/theme of this blog.
It's simple, yet effective. A lot of times it's tough to
get that "perfect balance" between usability and visual appearance.
I must say that you've done a amazing job with this. In addition, the blog loads extremely quick for me on Safari.

Excellent Blog!

my blog :: medicine online order: https://greatplainsmakerspace.com/wiki/index.php/How_Do_I_Know_If_I_m_Having_A_Coronary_Heart_Attack
Ответить | Ответить с цитатой | Цитировать
 
 
# RobertRon 08.08.2019 15:14
Best Casual Online Dating Sites: http://liastubinor.tk/oxyt9?&qzryy=F8aN4qIBFk
Ответить | Ответить с цитатой | Цитировать
 
 
# Berry 25.08.2019 10:06
Oh my goodness! Amazing article dude! Thank you, However I am going through problems with your RSS.

I don't understand why I cannot join it. Is there anybody getting identical RSS
problems? Anyone who knows the answer will you kindly respond?
Thanx!!

Take a look at my webpage: buy generic viagra: http://mcdonogh35archive.com/index.php?title=User:HesterHunley199
Ответить | Ответить с цитатой | Цитировать
 
 
# Randyneamp 10.09.2019 19:26
If you’re upset about your weight and want to lose a little more, get this…

An overweight mother with pre-diabetes has just SHOCKED the medical
community by losing an unheard of 22lbs pounds in just 13 days…

....Without starving herself, she lost a total of 37lbs in the first month!
-> CLICK HERE to see her Transformation Pics!: http://webbyt.co/weightloss

...Even without exercising, she went on to burn off 84lbs (almost a pound a day)
and eliminated any sign of diabetes or any other life-ending diseases.

And the amazing thing is…

All she did was this D.I.Y. “carb-pairing” trick that reconditions your 3 female
weight-loss hormones to drastically accelerate fat-burning while still eating the
foods you love.

Check it out for yourself…

“Carb-Pairing” Melts Away 37 Pounds in Just 20 Days (WOMEN ONLY): http://webbyt.co/weightloss

Enjoy!
Ответить | Ответить с цитатой | Цитировать
 
 
# Tania S 29.09.2019 11:23
ХОЧЕШЬ ПОХУДЕТЬ?

Бороться с лишними килограммами поможет
новое средство.

ЧИТАТЬ ==>>> http://wolfland.ru

_______________ _______________ _______________ _______________ _______________ ____________
Ответить | Ответить с цитатой | Цитировать
 
 
# Shavonne 02.10.2019 11:44
Hi there, I read your new stuff daily. Your writing style
is awesome, keep doing what you're doing!

Also visit my website; najlepsza przedtreningówk a: http://lnx.hotelresidencevillateresaischia.com/casamicciola/index.php?option=com_k2&view=itemlist&task=user&id=249998
Ответить | Ответить с цитатой | Цитировать
 
 
# ewugoxx 07.10.2019 23:01
Amoxicillin: http://mewkid.net/buy-xalanta/ Amoxicillin 500 Mg ckk.mohx.massco de.ru.qrm.cs http://mewkid.net/buy-xalanta/
Ответить | Ответить с цитатой | Цитировать
 
 
# oayexahmog 07.10.2019 23:09
Amoxicillin Online: http://mewkid.net/buy-xalanta/ Amoxicillin jcq.owbo.massco de.ru.vlc.ad http://mewkid.net/buy-xalanta/
Ответить | Ответить с цитатой | Цитировать
 

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

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

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

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

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