달력

9

« 2019/9 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  
  •  
  •  
  •  
2016.03.25 19:24

[Chart] Morris.js Donut Chart CODE/jQuery 활용2016.03.25 19:24

소 스


<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Donut Chart Example</title>
<script>
jQuery(document).ready(function($) {
Morris.Donut({
element: 'donut-example',
data: [
{label: "label 1", value: 42},
{label: "label 2", value: 30},
{label: "label 3", value: 20}
]
});
});
</script>
</head>
<body>
<div style="width: 300px; height: 300px; background-color: crimson" id="donut-example"></div>
</body>
</html>


실행결과





'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Donut Chart  (0) 2016.03.25
[Chart] Easy Pie Chart  (0) 2016.03.25
[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
Posted by 레이칸트
2016.03.25 19:23

[Chart] Easy Pie Chart CODE/jQuery 활용2016.03.25 19:23

소 스


<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.easypiechart.js"></script>
<meta charset=utf-8 />
<title>Easy Pie Chart</title>
<style>
.chart {
position: relative;
display: inline-block;
width: 110px;
height: 110px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.chart.chart-widget-pie {
margin-top: 5px;
margin-bottom: 5px;
}
.chart canvas {
position: absolute;
top: 0;
left: 0;
}
.percent {
display: inline-block;
line-height: 110px;
z-index: 2;
}
.percent:after {
content: '%';
margin-left: 0.1em;
font-size: .8em;
}
</style>
<script>
jQuery(document).ready(function($) {
$('.easy-pie-chart-1').easyPieChart({
easing: 'easeOutBounce',
barColor : '#8CC152',
lineWidth: 3,
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
$('.easy-pie-chart-2').easyPieChart({
easing: 'easeOutBounce',
barColor : '#F6BB42',
lineWidth: 3,
trackColor : false,
lineCap : 'butt',
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
$('.easy-pie-chart-3').easyPieChart({
easing: 'easeOutBounce',
barColor : '#E9573F',
lineWidth: 10,
lineCap : 'square',
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
$('.easy-pie-chart-4').easyPieChart({
easing: 'easeOutBounce',
barColor : '#3BAFDA',
lineWidth: 20,
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
});
</script>
</head>
<body>
<div class="chart easy-pie-chart-1" data-percent="86">
<span class="percent"></span>
</div>
<div class="chart easy-pie-chart-2" data-percent="86">
<span class="percent"></span>
</div>
<div class="chart easy-pie-chart-3" data-percent="86">
<span class="percent"></span>
</div>
<div class="chart easy-pie-chart-4" data-percent="56">
<span class="percent"></span>
</div>
</body>
</html>


실행결과

Easy Pie Chart

링크

https://github.com/rendro/easy-pie-chart











'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Donut Chart  (0) 2016.03.25
[Chart] Easy Pie Chart  (0) 2016.03.25
[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
Posted by 레이칸트
2016.03.25 19:21

[Chart] Morris.js Bar Chart CODE/jQuery 활용2016.03.25 19:21

소 스


[Chart] Morris.js
Bar Chart

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Bar Chart Example</title>
<script>
jQuery(document).ready(function($) {
Morris.
Bar({
element: 'bar-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
});
</script>
</head>
<body>
<div style="width: 600px; height: 300px;" id="bar-example"></div>
</body>
</html>


실행결과









'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Donut Chart  (0) 2016.03.25
[Chart] Easy Pie Chart  (0) 2016.03.25
[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
Posted by 레이칸트
2016.03.25 19:19

[Chart] Morris.js Area Chart CODE/jQuery 활용2016.03.25 19:19

소 스


[Chart] Morris.js
Area Chart

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Area Chart Example</title>
<script>
jQuery(document).ready(function($) {
Morris.
Area({
element: 'Area-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
});
</script>
</head>
<body>
<div style="width: 600px; height: 300px;" id="Area-example"></div>
</body>
</html>


실행결과









'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Easy Pie Chart  (0) 2016.03.25
[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
[jQuery] jqGrid array 테이블  (0) 2014.05.08
Posted by 레이칸트
2016.03.25 19:17

[Chart] Morris.js Line Chart CODE/jQuery 활용2016.03.25 19:17

소 스


[Chart] Morris.js Line Chart

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Line Chart Example</title>
<script>
jQuery(document).ready(function($) {
Morris.Line({
element: 'line-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
});
</script>
</head>
<body>
<div style="width: 600px; height: 300px;" id="line-example"></div>
</body>
</html>


실행결과













'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
[jQuery] jqGrid array 테이블  (0) 2014.05.08
구글 지도 예제소스  (0) 2014.04.01
Posted by 레이칸트
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>http://stackoverflow.com/q/13673340/315935</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" />
    <style type="text/css">
        html, body { font-size: 75%; }
        .ui-jqgrid tr.myfootrow td {font-weight: bold; overflow: hidden; white-space:nowrap; height: 21px;padding: 0 2px 0 2px;border-top-width: 1px; border-top-color: inherit; border-top-style: solid;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>
 
    <script type="text/javascript">
    //<![CDATA[
        /*global $ */
        /*jslint browser: true, plusplus: true */
        $(function () {
            "use strict";
            var myData = [
                    { id: "1",  invdate: "2007-10-01"name"test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "2",  invdate: "2007-10-02"name"test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "3",  invdate: "2007-09-01"name"test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "4",  invdate: "2007-10-04"name"test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "5",  invdate: "2007-10-31"name"test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "6",  invdate: "2007-09-06"name"test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                    { id: "7",  invdate: "2007-10-04"name"test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                    { id: "8",  invdate: "2007-10-03"name"test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                    { id: "9",  invdate: "2007-09-01"name"test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                    { id: "10", invdate: "2007-09-08"name"test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
                    { id: "11", invdate: "2007-09-08"name"test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                    { id: "12", invdate: "2007-09-10"name"test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
                ],
                $grid = $("#list"),
                initDate = function (elem) {
                    setTimeout(function () {
                        $(elem).datepicker({
                            dateFormat: "dd-M-yy",
                            autoSize: true,
                            changeYear: true,
                            changeMonth: true,
                            showWeek: true,
                            showButtonPanel: true
                        });
                    }, 100);
                },
                numberTemplate = {formatter: "number", align: "right", sorttype: "number",
                    editrules: {number: true, required: true},
                    searchoptions: { sopt: ["eq""ne""lt""le""gt""ge""nu""nn""in""ni"] }};
        
            $grid.jqGrid({
                datatype: "local",
                data: myData,
                colNames: ["Client""Date""Amount""Tax""Total""Closed""Shipped via""Notes"],
                colModel: [
                    {name"name", width: 65},
                    {name"invdate", width: 80, align: "center", sorttype: "date",
                        formatter: "date", formatoptions: {newformat: "d-M-Y"}, datefmt: "d-M-Y",
                        editoptions: { dataInit: initDate },
                        searchoptions: { sopt: ["eq""ne""lt""le""gt""ge"], dataInit: initDate }},
                    {name"amount", width: 75, template: numberTemplate },
                    {name"tax", width: 52, template: numberTemplate },
                    {name"total", width: 65, template: numberTemplate },
                    {name"closed", width: 80, align: "center", formatter: "checkbox",
                        edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
                        stype: "select",
                        searchoptions: {
                            sopt: ["eq""ne"],
                            value: ":Any;true:Yes;false:No"
                        }},
                    {name"ship_via", width: 100, align: "center", formatter: "select",
                        edittype: "select",
                        editoptions: {
                            value: "FE:FedEx;TN:TNT;IN:Intim",
                            defaultValue: "Intime"
                        },
                        stype: "select",
                        searchoptions: {
                            sopt: ["eq""ne"],
                            value: ":Any;FE:FedEx;TN:TNT;IN:Intim"
                        }},
                    {name"note", width: 100, sortable: false}
                ],
                cmTemplate: {editable: true},
                rowNum: 5,
                rowList: [5, 10, 20],
                pager: "#pager",
                gridview: true,
                ignoreCase: true,
                rownumbers: true,
                sortname: "invdate",
                viewrecords: true,
                sortorder: "desc",
                height: "100%",
                hidegrid: false,
                caption: "How to implement multiline footer",
                footerrow: true,
                loadComplete: function () {
                    var $this = $(this),
                        sum = $this.jqGrid("getCol""amount", false, "sum"),
                        $footerRow = $(this.grid.sDiv).find("tr.footrow"),
                        localData = $this.jqGrid("getGridParam""data"),
                        totalRows = localData.length,
                        totalSum = 0,
                        $newFooterRow,
                        i;
        
                    $newFooterRow = $(this.grid.sDiv).find("tr.myfootrow");
                    if ($newFooterRow.length === 0) {
                        // add second row of the footer if it's not exist
                        $newFooterRow = $footerRow.clone();
                        $newFooterRow.removeClass("footrow").addClass("myfootrow ui-widget-content");
                        $newFooterRow.children("td").each(function () {
                            this.style.width = ""// remove width from inline CSS
                        });
                        $newFooterRow.insertAfter($footerRow);
                    }
                    $this.jqGrid("footerData""set", {invdate: "Total (page):", amount: sum});
        
                    // calculate the value for the second footer row
                    for (i = 0; i < totalRows; i++) {
                        totalSum += parseInt(localData[i].amount, 10);
                    }
                    $newFooterRow.find(">td[aria-describedby=" + this.id + "_invdate]").text("Grand Total:");
                    $newFooterRow.find(">td[aria-describedby=" + this.id + "_amount]").text(
                        $.fmatter.util.NumberFormat(totalSum, $.jgrid.formatter.number)
                    );
                }
            });
        
        });
    //]]>
    </script>
</head>
<body>
    <table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>
</body>
</html>

'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
[jQuery] jqGrid array 테이블  (0) 2014.05.08
구글 지도 예제소스  (0) 2014.04.01
Posted by 레이칸트
2014.05.08 12:58

[jQuery] jqGrid array 테이블 CODE/jQuery 활용2014.05.08 12:58

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<head><title>
</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.multiselect.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
<body>
<table id="list"></table>
<div id="pager"></div>
<script>
$(document).ready(function () {
    gridView();
});
 
function gridView(){
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
   jQuery("#list").jqGrid({
      datatype: "local",
      data: mydata,
      height: 250,
         colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
         colModel:[
          {name:'id',index:'id', width:60, sorttype:"int"},
          {name:'invdate',index:'invdate', width:90, sorttype:"date"},
          {name:'name',index:'name', width:100},
          {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
          {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},  
          {name:'total',index:'total', width:80,align:"right",sorttype:"float"},  
          {name:'note',index:'note', width:150, sortable:false}  
         ],
         gridview: true,             
             rownumbers: false,
             rowNum: 10,
             rowList: [5, 10, 15],
             pager: '#pager',
             sortname: 'orderdate',
             viewrecords: true,
             sortorder: 'desc',
             caption: 'Preserving Selection on Client-side sorting',
             height: '100%'
});
}
</script>
</body>
</html>

'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
[jQuery] jqGrid array 테이블  (0) 2014.05.08
구글 지도 예제소스  (0) 2014.04.01
Posted by 레이칸트
2014.04.01 10:15

구글 지도 예제소스 CODE/jQuery 활용2014.04.01 10:15

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key= YOUKEY &sensor=false">
 </script>
 <script type="text/javascript">
 // 메인 가운데 마커
 var myLatlng = new google.maps.LatLng(37.524975,126.987135);
   
 //추가 마커
 var neighborhoods = [
    new google.maps.LatLng(37.524975,126.987135),
    new google.maps.LatLng(37.549061, 126.422975),
    new google.maps.LatLng(37.497622, 126.396110),
    new google.maps.LatLng(37.517683, 126.394393)
 ];
  
 var markers = [];
 var iterator = 0;
 var map;
 function initialize() {
    var mapOptions = {
    zoom: 12,
    center: myLatlng
 };
 map = new google.maps.Map(document.getElementById('DIV-ID'),mapOptions);
   drop();
 }
  
 function drop() {
   for (var i = 0; i < neighborhoods.length; i++) {
     setTimeout(function() {
       addMarker();
     }, i * 200);
   }
 }
  
function addMarker() {
   markers.push(new google.maps.Marker({
     position: neighborhoods[iterator],
     map: map,
     draggable: false,
     animation: google.maps.Animation.DROP
  }));
   iterator++;  
}
  
//지도 로드 이벤트
google.maps.event.addDomListener(window'load', initialize);
 
//지도 리사이즈 이벤트
google.maps.event.addDomListener(window"resize"function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});
</script>
                                                                                                                                                         

'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
[jQuery] jqGrid array 테이블  (0) 2014.05.08
구글 지도 예제소스  (0) 2014.04.01
Posted by 레이칸트