Scribd
Upload
4 views4 pages

Practical 14

The document provides instructions for creating a Google Map using the Google Charts API and data from a JSON file. It includes a sample HTML code that fetches location data, processes it, and displays it on a map with markers for each location. The conclusion emphasizes the learning outcome of reading JSON files and utilizing the Google Chart API for data visualization.

Uploaded by

apsavani4518
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views4 pages

Practical 14

The document provides instructions for creating a Google Map using the Google Charts API and data from a JSON file. It includes a sample HTML code that fetches location data, processes it, and displays it on a map with markers for each location. The conclusion emphasizes the learning outcome of reading JSON files and utilizing the Google Chart API for data visualization.

Uploaded by

apsavani4518
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Data Visualization (3160717) 230180107013

Practical :14

Read json file and create google map using google chart API.
Date: / /

Explanation:
The Google Map Chart displays a map using the Google Maps API. Data values are displayed
as markers on the map. Data values can be coordinates (lat-long pairs) or addresses. The map
will be scaled so that it includes all the identified points.
Use the [Link]() method to plot the data created by
[Link]() method.

Code:
INPUT:
<!DOCTYPE html>
<html>
<head>
<title>Google Map with JSON Data</title>
<script type="text/javascript" src="[Link]
<script type="text/javascript">
[Link]('current', {
'packages': ['map'],
'mapsApiKey': 'YOUR_GOOGLE_MAPS_API_KEY' // Replace with your API Key
});
[Link](drawMap);
function drawMap() {
fetch('[Link]') // Load JSON file
.then(response => [Link]())
.then(data => {
var mapData = new [Link]();
[Link]('number', 'Latitude');
[Link]('number', 'Longitude');
[Link]('string', 'Name');

[Link](location => {
[Link]([[Link], [Link], [Link]]);
});
var map = new
[Link]([Link]('map_div'));
[Link](mapData, { showTooltip: true, showInfoWindow: true });
})
.catch(error => [Link]('Error loading JSON:', error));
}
</script>
</head>
<body>
<h2>Google Map with JSON Data</h2>
<div id="map_div" style="width: 800px; height: 500px;"></div>
46
Data Visualization (3160717) 230180107013

</body>
</html>
[Link]

[ { "name": "New York",


"lat": 40.712776,
"lng": -74.005974,
"description": "New York City" },
{ "name": "San Francisco",
"lat": 37.774929,
"lng": -122.419418,
"description": "San Francisco, CA } ]
Output:

Fig. No. 14 Output of Practical No.14

Conclusion: In this experiment, I can study about how to read Json file and how to create
google map chart using google chart API.

Reference:
[Link]
[Link]

References used by the students:


[Link]

Rubric wise marks obtained:

Rubrics 1 2 3 4 5 Total
Marks

47
Enrollment No: 230183107005 Name: Chauhan Arjun Naginbhai

57
Enrollment No: 230183107005 Name: Chauhan Arjun Naginbhai

58

You might also like