Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google geocharts with coordinates?

I want to use google geochart with coordinates (longtitute, latitute). But I cant find any example about this topic. There are a lot of example with region and city example. But with coordinates I Cant find.

Please, code example, link, tutorial any thing else?

Thanks.

like image 945
AliRıza Adıyahşi Avatar asked Aug 08 '12 11:08

AliRıza Adıyahşi


2 Answers

You can check an example here:

google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);

  function drawVisualization() {var data = new google.visualization.DataTable();

 data.addColumn('number', 'Lat');                                
 data.addColumn('number', 'Long');
 data.addColumn('number', 'Value'); 
 data.addColumn({type:'string', role:'tooltip'});                        

data.addRows([[41.151636,-8.569336,0,'tooltip']]);
data.addRows([[ 39.059575,-98.789062,0,'tooltip']]);
                               
 
 var options = {
 colorAxis:  {minValue: 0, maxValue: 0,  colors: ['#6699CC']},
 legend: 'none',    
 backgroundColor: {fill:'transparent',stroke:'#FFF' ,strokeWidth:0 },    
 datalessRegionColor: '#f5f5f5',
 displayMode: 'markers', 
 enableRegionInteractivity: 'true', 
 resolution: 'countries',
 sizeAxis: {minValue: 1, maxValue:1,minSize:5,  maxSize: 5},
 region:'world',
 keepAspectRatio: true,
 width:400,
 height:300,
 tooltip: {textStyle: {color: '#444444'}}    
 };
  var chart = new   google.visualization.GeoChart(document.getElementById('visualization')); 
     
    
 
 chart.draw(data, options);
 
 
 }
 
 
<script src="https://www.google.com/jsapi?fake=.js"></script>
<div id="visualization"></div>

There are many ways to do it, this is just one.

data.addColumn('number', 'Lat');                                
data.addColumn('number', 'Long');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});                        

data.addRows([[41.151636,-8.569336,0,'tooltip']]);
data.addRows([[ 39.059575,-98.789062,0,'tooltip']]);
like image 124
CMoreira Avatar answered Oct 29 '22 01:10

CMoreira


As said in the documentation:

Marker location [Required] The first column is a specific string address (for example, "1600 Pennsylvania Ave"). OR The first two columns are numeric, where the first column is the latitude, and the second column is the longitude.

You need to define first two columns of your data set as numeric values representing latitude and longitude.

like image 43
bjornd Avatar answered Oct 29 '22 01:10

bjornd