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

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

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

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

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

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

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