Geek Answers Handbook

Javascript: google geo - map

i has the following world map:

<!-- copyright (c) 2009 Google inc. You are free to copy and use this sample. License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Google Visualization API Sample</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['geomap']}); function drawVisualization() { var data = new google.visualization.DataTable(); data.addRows(6); data.addColumn('string', 'Country'); data.addColumn('number', 'Popularity'); data.setValue(0, 0, 'Germany'); data.setValue(0, 1, 200); data.setValue(1, 0, 'United States'); data.setValue(1, 1, 300); data.setValue(2, 0, 'Brazil'); data.setValue(2, 1, 400); data.setValue(3, 0, 'Canada'); data.setValue(3, 1, 500); data.setValue(4, 0, 'France'); data.setValue(4, 1, 600); data.setValue(5, 0, 'RU'); data.setValue(5, 1, 700); var geomap = new google.visualization.GeoMap( document.getElementById('visualization')); geomap.draw(data, null); } google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization" style="width: 800px; height: 400px;"></div> </body> </html>

instead of displaying a map of the whole world, I would like to know how to display only the USA?

+4
source share
1 answer

In your example, set the parameter in the geomass area:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Google Visualization API Sample</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['geomap']}); function drawVisualization() { var data = new google.visualization.DataTable(); data.addRows(6); data.addColumn('string', 'Country'); data.addColumn('number', 'Popularity'); data.setValue(1, 0, 'United States'); data.setValue(1, 1, 300); var geomap = new google.visualization.GeoMap( document.getElementById('visualization')); var options = { region: 'us_metro' }; geomap.draw(data, options); } google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization" style="width: 800px; height: 400px;"></div> </body> </html>

Not quite sure why you are setting the popularity of other countries to just focus on the USA.

+2
source

More articles:


All Articles