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

Don't Miss

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

1 COMMENT

Leave a Reply to Angelo Menghini Cancel reply

Please enter your comment!
Please enter your name here

564FansLike

Recent Posts

Concept of Session in Laravel Tutorial

Sessions are used to store details about the user throughout the requests. Laravel supplies various drivers like file, cookie, apc, array, Memcached, Redis, and database to handle session data. By default, file driver is used as a result of it's light-weight....

Laravel Url Generation Tutorial

Our web application revolves around routes and URLs. After all, they're what direct our users to our pages. At the end of the day, serving pages is what any web application should do. Our users may...

Concept of Laravel Views Tutorial

In MVC framework, the letter "V" stands for Views. It separates the application logic and presentation logic. Views are saved in resources/views listing. Generally, the view contains the HTML which might be served by the application.

Related Articles

Concept of Session in Laravel Tutorial

Sessions are used to store details about the user throughout the requests. Laravel supplies various drivers like file, cookie, apc, array, Memcached, Redis, and database to handle session data. By default, file driver is used as a result of it's light-weight....

Laravel Url Generation Tutorial

Our web application revolves around routes and URLs. After all, they're what direct our users to our pages. At the end of the day, serving pages is what any web application should do. Our users may...

Concept of Laravel Views Tutorial

In MVC framework, the letter "V" stands for Views. It separates the application logic and presentation logic. Views are saved in resources/views listing. Generally, the view contains the HTML which might be served by the application.
WP2Social Auto Publish Powered By : XYZScripts.com