westdc-zf1/application/default/views/scripts/glacier/timemap.phtml

<?php
$this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data);
$this->headTitle('时空导航');
$this->headTitle()->setSeparator(' - ');
$this->headLink()->appendStylesheet('/css/water.css');
$this->breadcrumb('<a href="/">首页</a>');
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
$this->breadcrumb('<a href="/glacier/">'.$this->config->title->glacier.'</a>');
$this->breadcrumb('时空联合导航');
$this->breadcrumb()->setSeparator(' > ');
//$this->headScript()->appendFile('http://maps.google.cN/maps?file=api&v=2&key='.$this->config->google->maps->api);
$this->headScript()->appendFile('/js/timeline_var.js');
$this->headScript()->appendFile('/js/timeline_js/timeline-api.js');
$this->headScript()->appendFile('/js/timemap.2.0.1/lib/mxn/mxn.js?(google)');
$this->headScript()->appendFile('/js/timemap.2.0.1/timemap.pack.js');
$this->theme->AppendPlus($this,'colorbox');
?>
<div class="row">
    <div class="span3">
    <?= $this->partial('glacier/navi.phtml'); ?>
    </div>
    <div class="span9">   
    <div id="timemap">
         <div id="watermap" style="height:500px;width:40%;float:right;"></div>
          <div id="timeline" style="height:500px;border-right:1px solid #abc;"></div> 

		</div>
	</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: "watermap",               // Id of map div element (required)
		timelineId: "timeline",     // Id of timeline div element (required)
		scrollTo: "2005-01-01",
		options: {
            eventIconPath: "../images/",
            mapType:G_HYBRID_MAP,
            mapCenter: new GLatLng(39,100)
        },
		datasets: [
            {
            	data:{
                theme: "orange",
                // note that the lines below are now the preferred syntax
                type: "basic",
                value: [
                <?php foreach($this->rows as $row) : ?>
                        {
                          "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=/glacier/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.YEAR
        ]
    });
    // manipulate the timemap further here if you like
    var map=tm.map;
    map.setCenter(new GLatLng(39,100),7);
}
</script>