Google Charts - Google Charts tutorial - Map Chart - chart js - google graphs - google charts examples




What is Google Map Chart?

  • A Google Map Chart uses Google Maps API to display Map.
  • Data values are displayed as markers on the map. Data values may be coordinates (lat-long pairs) or actual addresses.
  • The map will be scaled accordingly so that it includes all the identified points.

Chart Type:

S.No. Chart Type / Description
1 Basic Map

Basic Google Map

2 Map using Latitude/Longitude

Map having locations specified using Latitude and Longitude

3 Customizing markers

Customized Markers in Map

Named Locations:

  • You can identify the places to put markers by name, as shown below in this map of the top ten countries by population.
  • When the user selects one of the markers, a tooltip with the name and population of the country is displayed, because we used the showInfoWindow option.
  • Also, when the user hovers over one of the markers for a short while, a 'title' tip will show up with the same info, because we used the showTooltip option. Here's the full HTML:
<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', { 'packages': ['map'] });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['Country', 'Population'],
        ['China', 'China: 1,363,800,000'],
        ['India', 'India: 1,242,620,000'],
        ['US', 'US: 317,842,000'],
        ['Indonesia', 'Indonesia: 247,424,598'],
        ['Brazil', 'Brazil: 201,032,714'],
        ['Pakistan', 'Pakistan: 186,134,000'],
        ['Nigeria', 'Nigeria: 173,615,000'],
        ['Bangladesh', 'Bangladesh: 152,518,015'],
        ['Russia', 'Russia: 146,019,512'],
        ['Japan', 'Japan: 127,120,000']
      ]);

    var options = {
      showTooltip: true,
      showInfoWindow: true
    };

    var map = new google.visualization.Map(document.getElementById('chart_div'));

    map.draw(data, options);
  };
  </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team


Related Searches to Google Charts - Map Chart

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×