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

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

Комментарии   

 
# Jamila 29.09.2018 23:37
I've been browsing online more than 2 hours today, yet I never
found any interesting article like yours. It is pretty
worth enough for me. In my opinion, if all web owners and bloggers made good content as you did, the internet will be a lot more useful
than ever before.

Have a look at my web-site - moz: https://moz.com
Ответить | Ответить с цитатой | Цитировать
 
 
# Elissa 02.10.2018 22:47
Your style is very unique in comparison to other folks I have read stuff
from. Thank you for posting when you have the opportunity,
Guess I'll just book mark this blog.

Here is my site :: moz: https://moz.com/
Ответить | Ответить с цитатой | Цитировать
 
 
# Alejandro 03.10.2018 10:27
If some one desires to be updated with latest technologies after
that he must be pay a quick visit this site and be up to date everyday.



Feel free to visit my site ... moz: https://moz.com
Ответить | Ответить с цитатой | Цитировать
 
 
# Holly 06.10.2018 08:30
When someone writes an paragraph he/she keeps the idea of a user in his/her mind that how a user can know
it. Thus that's why this piece of writing is amazing.
Thanks!

Also visit my web blog ... moz: https://moz.com/
Ответить | Ответить с цитатой | Цитировать
 
 
# Kimberley 08.10.2018 15:17
Hello it's me, I am also visiting this web site regularly, this web site is actually nice and the people are genuinely sharing good thoughts.


Feel free to surf to my webpage; moz: https://moz.com
Ответить | Ответить с цитатой | Цитировать
 
 
# Jonathon 10.10.2018 02:04
Hello there! I know this is somewhat off topic but I was wondering if you
knew where I could locate a captcha plugin for my comment form?
I'm using the same blog platform as yours and I'm having difficulty finding
one? Thanks a lot!

Feel free to visit my web page moz: https://moz.com
Ответить | Ответить с цитатой | Цитировать
 
 
# Sheree 17.10.2018 14:42
Howdy I am so grateful I found your webpage, I really found you by accident, while I was searching
on Aol for something else, Anyhow I am here now and would just like to say
thanks for a incredible post and a all round entertaining blog (I also love the theme/design),
I don't have time to go through it all at the moment
but I have bookmarked it and also added in your RSS feeds, so when I have time I will be back to read much
more, Please do keep up the great work.

Look at my blog: wikimedia.org: http://wikimedia.org
Ответить | Ответить с цитатой | Цитировать
 
 
# Alma 18.10.2018 05:41
I am regular reader, how are you everybody?
This piece of writing posted at this website is truly fastidious.



My web page: http://ru.wikipedia.org: http://ru.wikipedia.org
Ответить | Ответить с цитатой | Цитировать
 
 
# Windy 24.10.2018 01:52
I have noticed you don't monetize your page, don't waste your traffic, you can earn additional cash every month.
You can use the best adsense alternative for any type of website (they approve
all websites), for more info simply search in gooogle:
boorfe's tips monetize your website

Feel free to surf to my weblog - BestRogelio: https://CleverGeraldine.blogspot.com
Ответить | Ответить с цитатой | Цитировать
 
 
# Tod 24.10.2018 14:36
Good information. Lucky me I came across your site by
accident (stumbleupon). I have book-marked it for later!

Also visit my weblog: Shelton: http://es.wikipedia.org
Ответить | Ответить с цитатой | Цитировать
 
 
# Carla 27.10.2018 12:44
Hi. I see that you don't update your page too
often. I know that writing articles is time consuming and boring.

But did you know that there is a tool that allows
you to create new posts using existing content (from article directories or other pages from your
niche)? And it does it very well. The new posts are
unique and pass the copyscape test. Search in google and try: miftolo's tools

My page; RenatoJuicy: https://JennieSick.wix.com
Ответить | Ответить с цитатой | Цитировать
 
 
# Jeremiah 29.10.2018 13:50
I have noticed you don't monetize your site, don't waste your traffic, you can earn extra cash every month.

You can use the best adsense alternative for any type of website (they approve all websites), for more
details simply search in gooogle: boorfe's tips monetize your website

Here is my blog BestBrent: https://FollowDannielle.blogspot.se
Ответить | Ответить с цитатой | Цитировать
 
 
# Grover 06.11.2018 00:59
I see you don't monetize your page, don't waste your traffic, you can earn extra cash every month.
You can use the best adsense alternative for any type of website (they approve all websites), for more details simply search
in gooogle: boorfe's tips monetize your website

Also visit my website: BestKatie: https://MightyJulian.blogspot.co.uk
Ответить | Ответить с цитатой | Цитировать
 
 
# Dillon 27.11.2018 09:09
Hello. I see that you don't update your blog too often.
I know that writing articles is time consuming and boring.
But did you know that there is a tool that allows you to create new posts using existing content (from article directories or other
websites from your niche)? And it does it very well.
The new posts are unique and pass the copyscape test. Search in google
and try: miftolo's tools

Here is my web-site ... ArcherJuicy: https://AshleeSick.wix.com
Ответить | Ответить с цитатой | Цитировать
 
 
# Randy 13.12.2018 03:38
Hi. I have checked your masscode.ru and i see you've got some duplicate content so probably it is the reason that you don't rank hi in google.
But you can fix this issue fast. There is a tool that creates articles like human, just search in google: miftolo's tools

Feel free to visit my web site - MaryjoBig: https://NicholeTalks.jimdo.com
Ответить | Ответить с цитатой | Цитировать
 

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

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

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

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

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