Enrollment No: 220180107050 Name: Savani Amit Parbatbhai
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 Explanation:
1. Using Google Maps API
To display an interactive map on a web page, the Google Maps JavaScript API is used. This
API allows developers to embed a customizable map, add markers, and control various map
features using JavaScript.
2. Initializing the Map
When the web page loads, a function is triggered to initialize the map. This function creates a
map centered at a specific geographic coordinate (latitude and longitude) and sets a zoom level
that determines how close or far the map appears.
3. Reading JSON Data
A JSON file containing location data is read using a browser-based method for loading external
resources. JSON (JavaScript Object Notation) is a structured format used to store and transmit
data objects, such as names, coordinates, and more.
4. Processing the JSON Data
Once the data is successfully loaded, each entry in the JSON file is processed. The data contains
geographical coordinates (latitude and longitude) and a descriptive name for each location.
5. Creating Markers on the Map
For each location in the JSON data, a visual marker is placed on the map. These markers are
small icons that represent specific geographic points. Each marker can include additional
information, such as a tooltip displaying the name of the location when hovered over.
6. Displaying the Map on the Webpage
A specific HTML element (like a div) is used to hold the map. Its dimensions are set so that
the map appears properly sized in the browser window. Once the map is initialized and the
markers are added, the complete interactive map is displayed.
85
Enrollment No: 220180107050 Name: Savani Amit Parbatbhai
Code:
<!DOCTYPE html>
<html>
<head>
<title>Google Map with JSON Markers</title>
<script src="[Link]
<script>
// Initialize and add the map
function initMap() {
var map = new [Link]([Link]('map'), {
zoom: 2,
center: { lat: 20, lng: 0 }
});
// Fetch JSON file with locations
fetch('[Link]')
.then(response => [Link]())
.then(data => {
[Link](location => {
new [Link]({
position: { lat: [Link], lng: [Link] },
map: map,
title: [Link]
});
});
})
.catch(error => [Link]('Error loading JSON:', error));
}
</script>
</head>
<body onload="initMap()">
<h3>Map with JSON Data</h3>
<div id="map" style="height: 500px; width: 100%;"></div>
</body>
</html>
86
Enrollment No: 220180107050 Name: Savani Amit Parbatbhai
Output:
Conclusion:
This practical demonstrates how to integrate the Google Maps JavaScript API with external
JSON data to dynamically plot multiple locations on an interactive map. By loading location
data from a JSON file and adding markers programmatically, we can visualize real-world
coordinates such as cities, offices, or user positions in a clear and user-friendly way. This
approach is highly useful for web applications that require location-based features, such as
travel apps, business locators, or delivery tracking systems. It showcases how front-end web
development, APIs, and data handling work together to build interactive, data-driven maps.
Reference:
[Link]
[Link]
References used by the students:
[Link]
Rubric wise marks obtained:
Rubrics 1 2 3 4 5 Total
Marks
87