Using a database table and Google’s Visualization Geo API in CodeIgniter

torbjornzetterlund Web Applications, Web Development Tips Tags: , ,
0

Want to use Google’s Visualization GEO API with CodeIgniter, her To simply put it they wanted to:

  1. The controller
  2. The model
  3. The view
  4. Pass it to Google’s Visualization into a data table
  5. Create a map based on that data.

Now the example given is great, however it doesn’t jive well when you want to add in a friendly library like jQuery. So here is how we fixed it:

The Controller – maps.com

1
2
3
4
5
6
7
8
9
10
public function index() {

$data = $this->Maps_m->get_map_country();

// Pass the data t the template, using the variable map

$this->template->map = $data;


// Load the views using the templates
$this->template->build(‘maps’);
}

The Data Model

1
2
3
4
5
6
7
8
9
10
11
12
13
public function get_map_country() {

return $this->db
->select(“geo_country.country, COUNT( * ) as mediahits”, false)
->join(‘news_item_country’, ‘news_item_country.id=news_items.country’)
->join(‘country’, ‘news_item_country.country=country.id’)
->join(‘geo_country’, ‘geo_country.id=country.geo_country’)
->where(‘news_items.deleted’, ‘0’)
->group_by(‘geo_country.country’)
->get(‘news_items’)
->result_array();
}

Then we just needed load the data from the database and create the map.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type=’text/javascript’ src=’https://www.google.com/jsapi’></script>

<script type=’text/javascript’>
google.load(‘visualization’, ‘1’, {‘packages’: [‘geochart’]});
google.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
[‘Country’, ‘Media Hits’],
<?php foreach ($map as $maps) { ?>
[‘<?php echo $maps[‘country’]; ?>’, <?php echo $maps[‘mediahits’]; ?>],
<?php } ?>
]);

var options = {};

var chart = new google.visualization.GeoChart(document.getElementById(‘chart_div’));
chart.draw(data, options);
};
</script>

<div id=”chart_div” style=”width: 100%; height: 500px;”></div>

And that is it!