`
549265480
  • 浏览: 26028 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类

【Google Fusion Tables API 初探】地图与云计算

 
阅读更多

前言

这次当然又是标题党啦！我和云计算扯不上关系的。。。。

最近公司有个需求，类似于将中国各个省市给列出来（图标），这个应用其实很广泛我说的是原需求的变形，再扩散一点我们可以获得各个城市具有苹果专卖店的地址然后显示出来，比如：

这个的实现原理是客户端渲染技术，浏览器指定在哪些地方打上标记，便在哪些地方打上

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #map { width: 600px; height: 400px; }
    </style>
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/gmaps.js" type="text/javascript"></script>
      <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var path = [];
            var map = new GMaps({
                div: '#map',
                lat: 30.657358499999994,
                lng: 104.049977,
                markerClusterer: function (map) {
                    return new MarkerClusterer(map);
                }
            });
            var lat_span = 30.657358499999994;
            var lng_span = 104.049977;
            for (var i = 0; i < 100; i++) {
                var latitude = Math.random()*0.01  + 30.657358499999994;
                var longitude = Math.random()*0.01 + 104.049977;

                map.addMarker({
                    lat: latitude,
                    lng: longitude,
                    title: 'Marker #' + i
                });
            }
        });
    </script>
</head>
<body>
<input type="text" value="请输入地址" id="address" />
    <div id="map">
    </div>
</body>
</html>

但是他这样做是有一定问题的，比如我们有以下应用：显示全国现在所有的qq登录用户地点，这个需求是很恐怖的，我们假设全国qq用户只有10万人吧，现在我们要在页面上画100000个。。。

浏览器表示很卡！！！

PS：说句实话，碰到这种场景不是很多，但是既然都到这一步了，我们还是继续往下面看看吧！

基于这个原因，google新推出了一个Fusion Tables API，这个东东感觉有点不错，他是干什么的呢，我们进入正题吧

Fusion Tables API

什么是Fusion Tables API呢？

Google Fusion Tablesis a web application used for sharing, visualizing, and publishing tabular data. You can upload your own CSV, KML, ODS, XLS, or Google Spreadsheet data to a Fusion Tables table. Once your data is in Fusion Tables, you can collaborate on it with others in real time, publish it for Google Search, create map and chart visualizations for private use or for embedding on websites, filter it according to specific criteria, and update the data behind your visualizations or filters at any time.

以上时原文介绍，不错，你们没看错这个好像是google最新推出的一个东西，文档全部是英文的，我这样的水货居然也开始读英文文档了。。。。

根据连猜带蒙，fusion table
应该是云存储一类的东西，其中google为用户提供一个表格，这个表会具有唯一id，
根据id获得表后，便可以对其列进行操作。
意思是我们的服务性数据都可以存到google上啦！

注意陷阱：使用该功能时，切记使用自己的邮箱，不要使用公司的邮箱，因为会有所限制：

我们在干什么？

那好，扯了那么远，我们在干什么？

我们将当前所有qq在线数据信息存入fusion table，然后在google map 调用相关接口
地图会在服务器端渲染图片，将搞好了的地图传我们

所以，便解决了以上问题，但是我个人感觉这是很有问题的，因为数据时一个公司的生命，各个公司会愿意交出来？？？

好了，我们来建立一张表试试。

Fusion Table 第一步建表

https://www.google.com/fusiontables/DataSource?dsrcid=implicit&redirectPath=data

用google mail 账号登陆后，进入上链接：

好了，现在什么也不管的选择建立一张空表，于是有了以下东西：

这里搞完后一定记得分享出去，不然外部不能使用

好了，我们来使用下此表（表的id见地址栏https://www.google.com/fusiontables/data?docid=1qv6QEpgjYvl3b0PiJx4PFlE04zAZcwmAJJsTd5w#rows:id=1）

我们来在地图上简单搞几个标记，就把上面几个地址弄出来吧：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>获取当前位置</title>
 5     <style type="text/css">
 6         #map { width: 1200px; height: 500px; }
 7         ul, li { padding: 0; list-style: none; margin: 0; }
 8         ul { padding: 10px; border: 1px solid black; border-radius: 5px; background: white; position: absolute; left: 1000px; top: 300px; }
 9     </style>
10     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
11     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
12     <script src="js/gmaps.js" type="text/javascript"></script>
13     <script type="text/javascript">
14         var map, infoWindow;
15         $(document).ready(function () {
16             infoWindow = new google.maps.InfoWindow({});
17             map = new GMaps({
18                 el: '#map',
19                 zoom: 11,
20                 lat: 30.657358499999994,
21                 lng: 104.049977
22             });
23             map.loadFromFusionTables({
24                 query: {
25                     select: 'Location',
26                     from: '1qv6QEpgjYvl3b0PiJx4PFlE04zAZcwmAJJsTd5w'
27                 } 
28             });
29         });
30     </script>
31 </head>
32 <body>
33     <div id="map">
34     </div>
35 
36     <br />
37     <label><input type="checkbox" value="四川大学" /> 四川大学</label>
38     <label><input type="checkbox" value="电子科大" /> 电子科大</label>
39     <label><input type="checkbox" value="成都大学" /> 成都大学</label>
40     <label><input type="checkbox" value="西南交大" /> 西南交大</label>
41     <label><input type="checkbox" value="清华大学" /> 清华大学</label>
42 </body>
43 </html>
map.loadFromFusionTables({
    query: {
        select: 'Location',
        from: '1qv6QEpgjYvl3b0PiJx4PFlE04zAZcwmAJJsTd5w'
    } 
});

这个相当于sql语句哟，在下面还能写where语句，我们接下来再说，那么在我们地图上便会多出两个点：

暂时便只能达到此类效果了，好了，我们接下来搞点其它事情呢。

在地图上标注所以四川的大学

第一步，我们来看看四川有多少大学呢？

所有大学 
 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 四川教育学院

好像是94所大学呢，其中的其它应该我们便不管了，我们就只把大学名字与其经纬度存入表中即可，于是马上问他就来了！！
我去哪里找那劳什子坐标呢？？不能一个个输入吧，于是我们有了以下程序：

我们操作了下word有了以上东西，于是：我们调用google的搜索接口后会有以下东西：

获取所有学校的坐标 
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         #map { width: 600px; height: 400px; }
 7         tr { border: 1px solid black; }
 8         table { border: 1px solid black; width: 600px; }
 9     </style>
10     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
11     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
12     <script src="js/gmaps.js" type="text/javascript"></script>
13     <script type="text/javascript">
14         $(document).ready(function () {
15             var arr = ['四川大学', '西南交通大学', '电子科技大学', '西南财经大学', '西南民族大学', '中国民用航空飞行学院', '成都理工大学', '西华大学', '西南科技大学', '四川农业大学', '成都中医药大学', '四川师范大学', '西华师范大学', '西南石油大学', '成都信息工程学院', '四川理工学院', '泸州医学院', '川北医学院', '成都医学院', '乐山师范学院', '内江师范学院', '四川文理学院', '四川警察学院', '成都体育学院', '四川音乐学院', '四川民族学院', '成都学院', '西昌学院', '攀枝花学院', '宜宾学院', '绵阳师范学院', '成都理工大学工程技术学院', '成都理工大学广播影视学院', '成都信息工程学院银杏酒店管理学院', '四川师范大学文理学院', '四川师范大学成都学院', '四川外语学院成都学院', '电子科技大学成都学院', '四川大学锦城学院', '西南科技大学城市学院', '四川音乐学院绵阳艺术学院', '四川大学锦江学院', '西南财经大学天府学院', '西南交通大学希望学院', '成都电子机械高等专科学校', '四川烹饪高等专科学校', '成都纺织高等专科学校', '四川中医药高等专科学校', '阿坝师范高等专科学校', '四川幼儿师范高等专科学校', '民办四川天一学院', '成都航空职业技术学院', '泸州职业技术学院', '眉山职业技术学院', '四川文化传媒职业学院', '四川管理职业学院', '四川华新现代职业学院', '四川商务职业学院', '广安职业技术学院', '四川信息职业技术学院', '四川警安职业学院', '四川司法警官职业学院', '乐山职业技术学院', '内江职业技术学院', '四川机电职业技术学院', '四川交通职业技术学院', '达州职业技术学院', '四川建筑职业技术学院', '四川工商职业技术学院', '绵阳职业技术学院', '四川电力职业技术学院', '四川工程职业技术学院', '四川科技职业学院', '四川文化产业职业学院', '四川财经职业学院', '四川现代职业学院', '雅安职业技术学院', '四川国际标榜职业学院', '四川艺术职业学院', '四川邮电职业技术学院', '四川航天职业技术学院', '四川化工职业技术学院', '成都职业技术学院', '四川水利职业技术学院', '四川城市职业学院', '南充职业技术学院', '成都东软信息技术职业学院', '四川职业技术学院', '成都农业科技职业学院', '宜宾职业技术学院', '成都艺术职业学院', '四川托普信息技术职业学院', '中国工程物理研究院职工工学院', '四川教育学院'];
16             ;
17             var map = new GMaps({
18                 el: '#map',
19                 lat: 30.657358499999994,
20                 lng: 104.049977
21             });
22 
23 
24             var tb = $('#tb');
25             for (var i = 0, len = arr.length; i < len; i++) {
26                 var name = arr[i];
27                 (function (name, i) {
28                     setTimeout(function () {
29                         GMaps.geocode({
30                             address: name,
31                             callback: function (r, s) {
32                                 if (s == 'OK') {
33                                     var latlng = r[0].geometry.location;
34                                     map.setCenter(latlng.lat(), latlng.lng());
35                                     map.addMarker({
36                                         lat: latlng.lat(),
37                                         lng: latlng.lng(),
38                                         title: name
39                                     });
40 
41                                     var tr = $('<tr></tr>');
42                                     var td = $('<td>' + name + '</td><td>' + latlng.lat() + ',' + latlng.lng() + '</td>');
43                                     tr.append(td);
44                                     tb.append(tr);
45                                 }
46                             }
47                         });
48                     }, 10 * i);
49                 })(name, i);
50             }
51 
52 
53         });
54     </script>
55 </head>
56 <body>
57     <div id="map">
58     </div>
59     <table id="tb">
60         <tr>
61             <td>
62                 名称
63             </td>
64             <td>
65                 位置
66             </td>
67         </tr>
68     </table>
69 </body>
70 </html>

名称 位置
四川大学 30.632278,104.08679299999994
西南交通大学 29.568325,103.45211419999998
电子科技大学 30.675104,104.10036100000002
西南财经大学 30.6646,104.01711
西南民族大学 30.6381136,104.05211110000005
中国民用航空飞行学院 30.95188,104.30784300000005
成都理工大学 30.673151,104.14298699999995
西华大学 30.634153,104.06710999999996
西南科技大学 31.535485,104.69739600000003
四川农业大学 29.977484,102.99369100000001
成都中医药大学 30.682799,103.81025699999998
西华师范大学 30.7974055,106.08870819999993
四川师范大学 30.608217,104.12046299999997
西南石油大学 30.8217896,104.18355880000001
成都信息工程学院 30.644946,104.06579499999998
泸州医学院 28.882316,105.44513600000005
川北医学院 30.795586,106.07915600000001
成都医学院 30.749365,104.11383000000001
乐山师范学院 29.55498,103.75279999999998
四川理工学院 30.691293,103.817994
成都体育学院 30.646466,104.04396799999995
内江师范学院 29.588892,105.04991100000007
四川文理学院 31.210814,107.48566700000003
四川警察学院 28.874513,105.431827
四川音乐学院 30.638649,104.07938999999999
四川民族学院 30.6361015,104.04933800000003
成都学院 30.8211452,103.9815489
西昌学院 27.945208,102.20954000000006
攀枝花学院 26.5670352,101.72353659999999
宜宾学院 28.790945,104.61263299999996
成都信息工程学院银杏酒店管理学院 30.7864588,103.95632139999998
绵阳师范学院 31.494497,104.77592000000004
成都理工大学工程技术学院 29.560394,103.72431699999993
成都理工大学广播影视学院 30.825179,103.981356
四川师范大学文理学院 30.6083283,104.16653100000008
四川师范大学成都学院 30.821234,103.98181899999997
四川外语学院成都学院 30.829334,103.57538
电子科技大学成都学院 30.729952,103.96324099999993
西南科技大学城市学院 31.443738,104.79513500000007
四川大学锦城学院 30.725417,103.95104500000002
西南交通大学希望学院 30.746804,106.04791999999998
四川音乐学院绵阳艺术学院 31.420544,104.763777
四川大学锦江学院 30.213946,103.87377600000002
成都电子机械高等专科学校 30.676769,104.048768
成都纺织高等专科学校 30.7586151,103.95988490000002
四川烹饪高等专科学校 30.579139,104.27734599999997
四川中医药高等专科学校 31.455273,104.75084330000004
阿坝师范高等专科学校 31.4702775,103.57603510000001
四川幼儿师范高等专科学校 30.651652,104.07593099999997
西南财经大学天府学院 31.493071,104.68737099999998
眉山职业技术学院 30.0358408,103.83557180000003
民办四川天一学院 30.5680356,104.26512449999996
四川管理职业学院 30.6646209,104.01193920000003
成都航空职业技术学院 30.529353,104.23955999999998
四川文化传媒职业学院 30.614098,103.677955
四川华新现代职业学院 30.539319,103.91459800000007
四川商务职业学院 30.692743,103.92368599999998
广安职业技术学院 30.463775,106.66608999999994
四川信息职业技术学院 32.43947,105.85393599999998
泸州职业技术学院 28.865876,105.42632600000002
内江职业技术学院 29.59454,105.06688800000006
四川司法警官职业学院 31.1301659,104.41259880000007
四川警安职业学院 31.323047,104.49960699999997
乐山职业技术学院 29.556832,103.74356399999999
四川交通职业技术学院 30.686475,103.81869099999994
四川机电职业技术学院 26.56832,101.76037999999994
达州职业技术学院 31.2810107,107.53018680000002
四川建筑职业技术学院 31.085562,104.38607300000001
四川工商职业技术学院 30.916133,103.69336699999997
绵阳职业技术学院 31.490128,104.78429400000005
四川文化产业职业学院 30.519122,104.03962899999999
四川国际标榜职业学院 30.597239,104.29942600000004
四川电力职业技术学院 30.719586,103.83697099999995
四川工程职业技术学院 31.091347,104.38872500000002
四川科技职业学院 30.8233017,103.98101789999998
四川现代职业学院 30.5212762,103.99990019999996
雅安职业技术学院 29.97853,103.01496999999995
四川艺术职业学院 30.6463276,104.16460200000006
四川邮电职业技术学院 30.62012,104.12373400000001
四川财经职业学院 30.5776231,104.21111580000002
四川水利职业技术学院 30.9923311,103.61572130000002
四川职业技术学院 29.59454,105.06688800000006
四川城市职业学院 30.6085892,104.16698399999996
四川航天职业技术学院 30.5537694,104.26544339999998
成都职业技术学院 30.5942018,104.06126549999999
四川化工职业技术学院 28.86498,105.42272700000001
成都东软信息技术职业学院 30.889109,103.59484099999997
成都农业科技职业学院 30.6949737,103.81747010000004
宜宾职业技术学院 28.712597,104.57818700000007
南充职业技术学院 30.850018,106.15655500000003
中国工程物理研究院职工工学院 35.86166,104.19539699999996
四川教育学院 31.132059,104.38520800000003
成都艺术职业学院 30.48657369999999,103.88415220000002
四川托普信息技术职业学院 30.7787636,103.92162740000003

PS：大家运行过程中若是有问题可将此时间点加长：

setTimeout(function () {
    GMaps.geocode({
        address: name,
        callback: function (r, s) {
            if (s == 'OK') {
                var latlng = r[0].geometry.location;
                map.setCenter(latlng.lat(), latlng.lng());
                map.addMarker({
                    lat: latlng.lat(),
                    lng: latlng.lng(),
                    title: name
                });

                var tr = $('<tr></tr>');
                var td = $('<td>' + name + '</td><td>' + latlng.lat() + ',' + latlng.lng() + '</td>');
                tr.append(td);
                tb.append(tr);
            }
        }
    });
}, 10 * i);

好了下一步我们将数据导入！

导入四川所有大学数据

导入过程中注意UTF-8编码，否则

然后请选择右上角的分享！！！

于是我们来试试代码吧：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>获取当前位置</title>
 5     <style type="text/css">
 6         #map { width: 1200px; height: 500px; }
 7         ul, li { padding: 0; list-style: none; margin: 0; }
 8         ul { padding: 10px; border: 1px solid black; border-radius: 5px; background: white; position: absolute; left: 1000px; top: 300px; }
 9     </style>
10     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
11     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
12     <script src="js/gmaps.js" type="text/javascript"></script>
13     <script type="text/javascript">
14         var map, infoWindow;
15         $(document).ready(function () {
16             infoWindow = new google.maps.InfoWindow({});
17             map = new GMaps({
18                 el: '#map',
19                 zoom: 11,
20                 lat: 30.657358499999994,
21                 lng: 104.049977
22             });
23             map.loadFromFusionTables({
24                 query: {
25                     select: 'Location',
26                     from: '1WDn3ksr-bYGEaYpeO8BEC-TwZJ5zdM5otx1oe7M'
27                 } 
28             });
29         });
30     </script>
31 </head>
32 <body>
33     <div id="map">
34     </div>
35 </body>
36 </html>

于是四川所有的学校出来啦！！！！

基本功能完成后我们来干点其他事情，因为我们肯定会有检索条件的，所以我们这边给6种搜索条件（这里我变使用纬度经度分类了）

为什么是6种不是5种呢？因为google api写的最多好像是5种，所以我想试试6种会怎么样了。。。。

加入搜索条件

这里我们在原表中做一个手脚，在后面加入一个自动编号，作为后面的搜索条件，所以每行数据多了个no编号。

第一步，简单与恶心的实现

现在简单一般都有以下特点：

1 代码量大

2 思维简单

3 效果不好

4 恶心

不信见以下代码：

丑陋的代码 
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>获取当前位置</title>
 5     <style type="text/css">
 6         #map { width: 1200px; height: 500px; }
 7         ul, li { padding: 0; list-style: none; margin: 0; }
 8         ul { padding: 10px; border: 1px solid black; border-radius: 5px; background: white; position: absolute; left: 1000px; top: 300px; }
 9     </style>
10     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
11     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
12     <script src="js/gmaps.js" type="text/javascript"></script>
13     <script type="text/javascript">
14         $(document).ready(function () {
15             var map;
16             function getMap() {
17                 map = new GMaps({
18                     el: '#map',
19                     zoom: 11,
20                     lat: 30.657358499999994,
21                     lng: 104.049977
22                 });
23             }
24             function loadFusionTable(opt) {
25                 if (!opt) {
26                     opt = '1=1';
27                 }
28                 map.loadFromFusionTables({
29                     query: {
30                         select: 'Location',
31                         from: '13W-mWrG2SOkFiS-6UsjGUxarYxxDidnStg4Md6E',
32                         where: opt
33                     }
34                 });
35             }
36 
37             getMap();
38 
39             $('input').click(function () {
40                 getMap();
41                 $('input').each(function () {
42                     var el = $(this);
43                     if (el.attr('checked')) {
44                         loadFusionTable(el.val());
45                     }
46                 });
47             });
48 
49         });                   //$(document)
50     </script>
51 </head>
52 <body>
53     <div id="map">
54     </div>
55     <label><input type="checkbox" value="no<10"  /> NO 0-10的大学</label>
56     <label><input type="checkbox" value="no>10 AND  no<20" /> NO 10-20的大学</label>
57     <label><input type="checkbox" value="no>20 AND  no<30" /> NO 20-30的大学</label>
58     <label><input type="checkbox" value="no>30 AND  no<40" /> NO 30-40的大学</label>
59     <label><input type="checkbox" value="no>40 AND  no<50" /> NO 40-50的大学</label>
60     <label><input type="checkbox" value="no>50" /> NO 大于50的大学</label>
61 
62 </body>
63 </html>

这样的话，没点一次由于需要清除以前的，我迫不得已重新加载了一次地图！！！！解决方案，我没有找到！！！！

结语

今天这块东西，有点问题，现在我还在搞下面的筛选功能，等下搞出来了再加上吧。

分享到：
| Web前端优化初探，小弟抛砖引玉，期待高手 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics