HTML 5

Google Map Chart (Visualization Map)

Introduction

Google provides Google Map Chart for users to display data. A Google Map Chart shows a map using the Google Maps API. There are various APIs available in the Google Maps API. These APIs have the power to show a map for users. Using the Google Map Chart we represent the data of an area. It is just like a normal map. In Google Map Charts, the values are displayed in the form of Markers. Here the data values may be coordinates or an address. When you go with the markers then some of the information will be displayed. For example if you want to show the population of India then simply go to the marker India. When you go to it then there will be a pop-up that shows the population of India. You can also apply the zoom option in the Google Map Chart. Using the zooming option the areas specification will increase if you zoom in and when you zoom out then the area specification will be decreased.

There are mainly two types of Google Map Charts available that I will describe for you one by one. The name of the those Google Map Charts are given below.

  • Named Location Google Map Chart
  • Geocoded Location Google Map Chart

Named Location Google Map Chart 

As it is named, Named Location Google Map, it shows the places with markers, in other words when you go to the markers then it shows where it is and its details that are available for the users. In this Google Map Chart we use a Tool tip, in other words when the user goes to the marker then there will be a tool tip generated and through that we represent the data for the end user. To enable the tool tip we use the showTip option. It is just a simple Google location chart for a better understanding. Please understand the example that is given below.

Example

It is simple, just open your Notepad and write the given code into the Notepad file. Save this file with the .html extension. Now run this file at your browser. Then you will see a Map. Sometimes your browser does not support all the JavaScript files so if it creates a problem then run your file in another browser.

  1. <html>  
  2.   <head>  
  3.   <script type="text/javascript" src="https://www.google.com/jsapi"></script>  
  4.   <script>  
  5.     google.load('visualization', '1', { 'packages': ['map'] });  
  6.     google.setOnLoadCallback(drawMap);  
  7.     function drawMap() {  
  8.       var data = google.visualization.arrayToDataTable([  
  9.         ['Country', 'Population'],  
  10.         ['China', 'China: 1,363,800,000'],  
  11.         ['India', 'India: 1,242,620,000'],  
  12.         ['US', 'US: 317,842,000'],  
  13.         ['Indonesia', 'Indonesia: 247,424,598'],  
  14.         ['Brazil', 'Brazil: 201,032,714'],  
  15.         ['Pakistan', 'Pakistan: 186,134,000'],  
  16.     ['Afganistan', 'Afganistan: 186,134,000'],  
  17.     ['Seria', 'Seria: 356,234,000'],  
  18.     ['Nepal', 'Nepal: 128,100,000'],  
  19.         ['Nigeria', 'Nigeria: 173,615,000'],  
  20.         ['Bangladesh', 'Bangladesh: 152,518,015'],  
  21.         ['Russia', 'Russia: 146,019,512'],  
  22.         ['Japan', 'Japan: 127,120,000']  
  23.       ]);  
  24.     var options = { showTip: true };  
  25.     var map = new google.visualization.Map(document.getElementById('chart_div'));  
  26.     map.draw(data, options);  
  27.   };  
  28.   </script>  
  29.   </head>  
  30.   <body>  
  31.     <div id="chart_div"></div>  
  32.   </body>  
  33. </html>  
Output



Now when you run your code in the browser there will be a map shown with markers. When you click on any marker then it shows the country name and its population because here we use the country name and its population for the proceeding the output, as you see in the preceding output.

Geocoded Location Google Map Chart

A Geocoded Location Google Map Chart also shows the data with the map but in the Geocoded Google Map Chart we represent a location with its latitude and longitude. The main purpose of using the longitude and latitude is that it is faster compared to a named location Google Map Chart. The loading of the Geocoded Charts is faster.

Example
  1. <html>  
  2.   <head>  
  3.     <script type="text/javascript" src="https://www.google.com/jsapi"></script>  
  4.     <script type="text/javascript">  
  5.       google.load("visualization", "1", {packages:["map"]});  
  6.       google.setOnLoadCallback(drawChart);  
  7.       function drawChart() {  
  8.         var data = google.visualization.arrayToDataTable([  
  9.           ['Lat', 'Long', 'Name'],  
  10.           [37.4232, -122.0853, 'Work'],  
  11.           [37.4289, -122.1697, 'University'],  
  12.            [32.1234, -90.1697, 'Restorant'],  
  13.            [30.0980, -133.1697, 'Bus Stops'],  
  14.           [37.6153, -122.3900, 'Railway Stations'],  
  15.           [37.4422, -122.1731, 'Shopping']  
  16.         ]);  
  17.         var map = new google.visualization.Map(document.getElementById('map_div'));  
  18.         map.draw(data, {showTip: true});  
  19.       }  
  20.     </script>  
  21.   </head>  
  22.   <body>  
  23.     <div id="map_div" style="width: 800px; height: 500px"></div>  
  24.   </body>  
  25. </html>  
Output



Now that you have both of the code you can see which code loads faster compared to the other code. Another reason to use a Geocoded Location chart is to search for a specific location. It is also faster compared to a Named Location Geocoded Chart.

For loading the Google Map we use the package named map as in the following:
  1. google.load("visualization", "1", {packages: ["map"]});  
For visualization of the map we use the class and the name of that class is google.visualization.Map.
  1. var visualization = new google.visualization.Map(container);  
Configuration settings

When we make the Google Map Chart we can apply various settings to make changes in the visualizing of the that charts, because there are some default properties and if you want to change them then you can change them. By changing the properties there are some effects that occur in the Google Map Chart. So the list is given below.



Events

There are only two events generated in Google Map Charts. The description of those events are given in the following diagram.



Methods

Methods in Google Map Charts are used to do a specific operation. There are mainly three methods in Google Map Charts as are given in the diagram.



Data Format

Google Map Charts uses the two data formats described below.

Lat-Long pairs: There are three columns present in the Lat-Long pairs data format, column one and column two are used with numbers for the latitude and the longitude, the first column is used for the latitude and the second column is used for the longitude. The third column is optional, it is used to show the location that in the first two columns, this column holds the string type of data.

String address: Is the second data format for Google Map Charts. In this there are only two columns, the first column holds an address that is a string type and the second column is also a string type that describes the value of the first column. It is very slow in nature when there are more addresses. If there is more than 15 addresses then it will be slow compare with the Lat-Long pairs.

Summary

Google Map Charts, depending on its name Google map, is used to show the location of an address. It is presently very popular. I think at the present time every website uses the Google Map Chart show its location for the end users through which the user can easily get the location of their company or the organization. There are many options available in Google Mao Charts like zooming and dragging that make it more reliable. In this article I rovided for you the overall all information about Google Map Charts. I think now users can easily make a Google Map Charts for their use.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs