Google Maps Chart in javascript using Google Maps API Tutorial

This tutorial explains how to implement Google Maps Chart using Google Maps API.

google map with style



Introduction

Google Maps is a desktop web based service that provides detailed information about geographical regions around the world. it offers street view, google traffic, road map, satellite view and many more.

In this tutorial, we will implement Google Map Chart that display a map using Google Maps API. In the Google Map, data values are displayed as marker. It can be coordinates(latitude & longitude pairs) or addresses. We can include all identified points on the map.

Create Google map by Named Locations

We can indicate the places to put the markers by name on the Map. We will be plot a map between country and its population.

We will pass package name map in the google.charts.load() object. It will help to display Google Map Chart.

Loading

google.charts.load("upcoming", {packages: ["map"]});

Create a drawMap() Method

We will create a drawMap() method. In this method we will initialized google.visualization.DataTable() object and add legends and its data values into this object. Pass the data type of data values and legends into addColumn() method. To add data, we will pass country name and its population as a Json type. We will populate this data on a map.

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('upcoming', { 'packages': ['map'] });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      // Add visualization datatable.
      var data = new google.visualization.DataTable();
        // Add legends
        data.addColumn('string', 'Country');
        data.addColumn('number', 'Population');
        //Add Data values
        data.addRow(['China', parseInt('1,363,800,000')]);
        data.addRow(['India', parseInt('1,242,620,000')]);
        data.addRow(['US', parseInt('317,842,000')]);
        data.addRow(['Indonesia', parseInt('247,424,598')]);
        data.addRow(['Brazil', parseInt('201,032,714')]);
        data.addRow(['Pakistan', parseInt('186,134,000')]);
        data.addRow(['Nigeria', parseInt('173,615,000')]);
        data.addRow(['Bangladesh', parseInt('152,518,015')]);
        data.addRow(['Russia', parseInt('146,019,512')]);
        data.addRow(['Japan', parseInt('127,120,000')]);
  }
  </script>
  </head>
</html>

Show tooltip

To display tooltip with name and population while selecting and hover one of the markers, we need to make showInfoWindow and showTooltip option true.

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('upcoming', { 'packages': ['map'] });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      // Add visualization datatable.
      var data = new google.visualization.DataTable();
        // Add legends
        data.addColumn('string', 'Country');
        data.addColumn('number', 'Population');
        //Add Data values
        data.addRow(['China', parseInt('1,363,800,000')]);
        data.addRow(['India', parseInt('1,242,620,000')]);
        data.addRow(['US', parseInt('317,842,000')]);
        data.addRow(['Indonesia', parseInt('247,424,598')]);
        data.addRow(['Brazil', parseInt('201,032,714')]);
        data.addRow(['Pakistan', parseInt('186,134,000')]);
        data.addRow(['Nigeria', parseInt('173,615,000')]);
        data.addRow(['Bangladesh', parseInt('152,518,015')]);
        data.addRow(['Russia', parseInt('146,019,512')]);
        data.addRow(['Japan', parseInt('127,120,000')]);

        var options = {
          showTooltip: true,
          showInfoWindow: true
       };
  }
  </script>
  </head>
</html>

Create a Map Chart

To create a Map Chart, we need to initialize visualization’s class. The visualization class name is google.visualization.Map. Pass the container div id into this class. To create Map, call the draw() method with parameter both data variable and options.

var map = new new google.visualization.Map(container);

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('upcoming', { 'packages': ['map'] });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      // Add visualization datatable.
      var data = new google.visualization.DataTable();
        // Add legends
        data.addColumn('string', 'Country');
        data.addColumn('number', 'Population');
        //Add Data values
        data.addRow(['China', parseInt('1,363,800,000')]);
        data.addRow(['India', parseInt('1,242,620,000')]);
        data.addRow(['US', parseInt('317,842,000')]);
        data.addRow(['Indonesia', parseInt('247,424,598')]);
        data.addRow(['Brazil', parseInt('201,032,714')]);
        data.addRow(['Pakistan', parseInt('186,134,000')]);
        data.addRow(['Nigeria', parseInt('173,615,000')]);
        data.addRow(['Bangladesh', parseInt('152,518,015')]);
        data.addRow(['Russia', parseInt('146,019,512')]);
        data.addRow(['Japan', parseInt('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" style="width:900px;"></div>
  </body>
</html>

google_map

Geocoded Locations

We can also indicate place by location. Its loaded faster than named location. Here we identify four latitude and longitude on a map. pass the latitude or Longitude in the addRow() method

var data = new google.visualization.DataTable();
            
data.addColumn('number', 'Lat');
data.addColumn('number', 'Long');
data.addColumn('string', 'name');

data.addRow([37.4232,-122.0853, 'Work']);
data.addRow([37.4289,-122.1697, 'University']);
data.addRow([37.6153,-122.3900, 'Airport']);
data.addRow([37.4422,-122.1731, 'Shopping']);

google map with lat long

Customize Markers

We can customize marker to specify places. If we select pins in the Map chart, its only support PNGs, GIFs, and JPGs. We will define Icons in the options variable like this-

var options = {
      showTooltip: true,
      showInfoWindow: true,
      icons: {
        default: {
          normal: 'http://icons.iconarchive.com/icons/icons-land/
vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
          selected: 'http://icons.iconarchive.com/icons/icons-land/
vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
       }
    }
};

google map customize marker

Create Map By Address

Now, we will locate a place by address. Hence, we will pass the address and name as data values. The Map Visualization comes with the ability to set custom styles, allowing we to create one, or several, custom map types. We can define a custom map type by creating a map style object and putting it under its identifier (mapTypeId) under the maps option.

 var options = {
    maps: {
      <map style ID>: <map style object>
    }
  };

We can refer to this custom map type by the map style ID. Map style object contains name which will be show name in the map type control(It do not have to match with mapTypeId) and also set style array to style each element.

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('upcoming', { 'packages': ['map'] });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap() {

      var data = new google.visualization.DataTable();
            
        data.addColumn('string', 'Address');
        data.addColumn('string', 'Location');

        data.addRow(['Lake Buena Vista, FL 32830, United States', 'Walt Disney World']);
        data.addRow(['6000 Universal Boulevard, Orlando,
                  FL 32819, United States', 'Universal Studios']);
        data.addRow(['7007 Sea World Drive, Orlando,
                  FL 32821, United States', 'Seaworld Orlando']);
       
      var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]
              },
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]
              },
              {featureType: 'road.highway',
               elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
              },
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
              }
        ]}}
      };

    var map = new google.visualization.Map(document.getElementById('chart_div'));
    map.draw(data, options);
  }
  </script>
  </head>
  <body>
    <div id="chart_div" style="width:900px;"></div>
  </body>
</html>

google map with style



The following two tabs change content below.
Abhay Anand has experience in the field of Software Development. He can program Android, PHP, JavaScript, Html, Css. He develops web and Android applications. You can reach him at anand.abhay1910@gmail.com