diff --git a/application/default/views/scripts/data/timemap.phtml b/application/default/views/scripts/data/timemap.phtml
index 3438ba00..8c7c9a69 100644
--- a/application/default/views/scripts/data/timemap.phtml
+++ b/application/default/views/scripts/data/timemap.phtml
@@ -8,92 +8,99 @@ $this->breadcrumb('<a href="/">首页</a>');
 $this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
 $this->breadcrumb('<a href="/data/timeline">时空导航</a>');
 $this->breadcrumb()->setSeparator(' > ');
-//$this->headScript()->appendFile('http://maps.google.cN/maps?file=api&v=2&key='.$this->config->google->maps->api);
+//$this->headScript()->appendFile('http://maps.google.cN/maps?file=api&v=2&key='.$this->config->google->maps->api);
+$this->headScript()->appendFile('http://maps.google.cN/maps/api/js?sensor=false');
 $this->headScript()->appendFile('/js/timeline_var.js');
 $this->headScript()->appendFile('/js/timeline_js/timeline-api.js');
 $this->headScript()->appendFile('/js/jquery-1.7.min.js');
-$this->headScript()->appendFile('/js/timemap.2.0.1/lib/mxn/mxn.js?(google)');
+$this->headScript()->appendFile('/js/timemap.2.0.1/lib/mxn/mxn.js?(googlev3)');
 $this->headScript()->appendFile('/js/timemap.2.0.1/timemap.pack.js');
 $this->headScript()->appendFile('/js/jquery.colorbox-min.js');
 $this->headLink()->appendStylesheet('/css/colorbox.css');
 ?>
 <div class="row-fluid"><?= $this->partial('data/tools.phtml'); ?></div>      
-    <div id="timemap" style="clear:both;">
-          <div id="timeline" style="height:300px;width:100%;"></div>
-          <div id="map" style="height:300px;"></div>
-    </div>
-<script type="text/javascript" charset="utf-8">
-var tm;
-$(window).bind("load", function() {  var timeout = setTimeout(function() { initLoader();	}, 100);});  
-//$(window).bind("load", function() {  var timeout = setTimeout(function() { gmaploaded();	}, 1000);});
-function loadMaps() {
-  google.load("maps", "2", {"callback" : tmloaded,"base_domain": "ditu.google.cn"});
-}
-
-function initLoader() {
-  var script = document.createElement("script");
-  script.src = "https://www.google.com/jsapi?key=<?php echo $this->config->google->maps->api; ?>&callback=loadMaps";
-  script.type = "text/javascript";
-  document.getElementsByTagName("head")[0].appendChild(script);
-}
-function tmloaded() {
-	tm = TimeMap.init({
-		mapId: "map",               // Id of map div element (required)
-		timelineId: "timeline",     // Id of timeline div element (required)
-		options: {
-            eventIconPath: "../images/",
-			mapType:G_NORMAL_MAP
-        },
-		datasets: [
-            {
-                id: "artists",
-                title: "Artists",
-                theme: "orange",
-                // note that the lines below are now the preferred syntax
-                type: "basic",
-                options: {
-                    items: [
+    <div id="timemap">
+         <div id="map" style="height:500px;width:50%;float:right;"></div>
+          <div id="timeline" style="height:500px;border-right:1px solid #abc;"></div> 
+
+</div>
+<script type="text/javascript" charset="utf-8">
+$('#map').height($(window).height());
+$('#timeline').height($(window).height());
+$("html,body").animate({scrollTop:$('#timemap').offset().top},600);
+var tm;
+$(function() {
+    
+    // make a custom map style
+    var styledMapType = new google.maps.StyledMapType([
+        {
+            featureType: "water",
+            elementType: "all",
+            stylers: [
+              { saturation: 0 },
+              { lightness: 100 }
+            ]
+        },
+        {
+            featureType: "all",
+            elementType: "all",
+            stylers: [
+              { saturation: -100 }
+            ]
+        }
+    ], {
+        name: "white"
+    });
+    
+    tm = TimeMap.init({
+        mapId: "map",               // Id of map div element (required)
+        timelineId: "timeline",     // Id of timeline div element (required)
+        options: {
+            eventIconPath: "../images/"
+        },
+        datasets: [
+            {
+                id: "artists",
+                title: "Artists",
+                theme: "orange",
+                // note that the lines below are now the preferred syntax
+                type: "basic",
+                options: {
+                    items: [
                 <?php
                 foreach($this->rows as $row) : ?>
-                        {
-                          "start" : "<?php echo $row['timebegin']; ?>",
-                          <?php if ($row['timeend']!='') : ?>
-                          "end" : "<?php echo $row['timeend']; ?>",
-                          <?php endif; ?>
-                          "polygon" : [
-                          {
-                              "lat" : <?php echo $row['south']; ?>,
-                              "lon" : <?php echo $row['west']; ?>
-                           },{
-                              "lat" : <?php echo $row['north']; ?>,
-                              "lon" : <?php echo $row['west']; ?>
-                           },{
-                              "lat" : <?php echo $row['north']; ?>,
-                              "lon" : <?php echo $row['east']; ?>
-                           },{
-                              "lat" : <?php echo $row['south']; ?>,
-                              "lon" : <?php echo $row['east']; ?>
-                           },{
-                              "lat" : <?php echo $row['south']; ?>,
-                              "lon" : <?php echo $row['west']; ?>
-                           }
-                           ],
-                          "title" : "<?php echo $row['title']; ?>",
-                          "options" : {
-                            // set the full HTML for the info window
-                            "infoHtml": "<a href=/data/<?php echo $row['uuid']; ?>><?php echo $row['title']; ?></a><hr /><img src=/service/thumb/id/<?php echo $row['id']; ?>  onclick='$.colorbox({photo:\"true\",href:\"/service/bigthumb/id/<?php echo $row['id']; ?>\"});' />"
-                          }
+                        {
+                          "start" : "<?php echo $row['timebegin']; ?>",
+                          <?php if ($row['timeend']!='') : ?>
+                          "end" : "<?php echo $row['timeend']; ?>",
+                          <?php endif; ?>
+                          "point" : 
+                          {
+                              "lat" : <?php echo ($row['south']+$row['north'])/2; ?>,
+                              "lon" : <?php echo ($row['west']+$row['east'])/2; ?>
+                           },
+                          "title" : "<?php echo htmlspecialchars($row['title']); ?>",
+                          "options" : {
+                            // set the full HTML for the info window
+                            "infoHtml": "<div class='info'><a href=/heihe/view/uuid/<?php echo $row['uuid']; ?>><?php echo htmlspecialchars($row['title']); ?></a><hr /><img src=/service/thumb/id/<?php echo $row['id']; ?> onclick='$.colorbox({photo:\"true\",href:\"/service/bigthumb/id/<?php echo $row['id']; ?>\"});' /></div>",
+                            "theme":"orange"
+                        }
                         },
-<?php endforeach; ?>                        
-                    ]
-                }
-            }
-        ],
-        bandIntervals: [
-            Timeline.DateTime.MONTH, 
-            Timeline.DateTime.DECADE
-        ]
-    });
-    // manipulate the timemap further here if you like
-}
+<?php endforeach; ?>   
+                    ]
+                }
+            }
+        ],
+        bandIntervals: [
+            Timeline.DateTime.MONTH, 
+            Timeline.DateTime.DECADE
+        ]
+    });
+    
+    // set the map to our custom style
+    var gmap = tm.getNativeMap();
+    gmap.mapTypes.set("white", styledMapType);
+    gmap.setMapTypeId("white");
+});
+
 </script>	
\ No newline at end of file