Step 1:  Download and Extract apache-tomcat-9.0.98 zip file into folder, 
and open apache-tomcat-9.0.98 folder till bin and select the directory path, cut (press backspace) and type cmd.
now type 
startup.bat
and hit enter 

Note: 
This Tomcat Server must be kept running in the background by minimizing this window. Otherwise, the we won’t get the output.

Now open apache-tomcat-9.0.98 folder, open a folder name webapps which is already created in apache-tomcat-9.0.98 folder

Open webapps folder, create a new folder and name it as: myjsp

Open myjsp folder and open it with VS Code

Create 2 jsp files with name myindex.jsp and myinput.jsp


1.	Filename: myindex.jsp : Display Map with Google Maps API

<%@ page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Google Maps Location</title>
    <!-- Google Maps JavaScript API -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY &callback=initMap" async defer></script>
    <style>
        /* Set the size of the map container */
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>



<body>
<%
    // Fetch latitude and longitude from form inputs
    String latParam = request.getParameter("t1");
    String longParam = request.getParameter("t2");
    // Default values in case parameters are not provided
    double lati = 40.7128;  // Default latitude (New York)
    double longi = -74.0060; // Default longitude (New York)
    // If parameters exist, parse them to doubles
    if (latParam != null && !latParam.trim().isEmpty()) {
        lati = Double.parseDouble(latParam);
    }
    if (longParam != null && !longParam.trim().isEmpty()) {
        longi = Double.parseDouble(longParam);
    }
%>
<h3>Google Maps Location</h3>
<div id="map"></div>
<script>
    // Initialize the map
    function initMap() {
        var location = { lat: <%= lati %>, lng: <%= longi %> };  // Use JSP values for lat and lng
        // Create a new map centered on the location
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,  // Zoom level
            center: location  // Center the map on the provided coordinates
        });



        // Add a marker at the location
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });
    }
</script>
</body>
</html>


2.	Filename: myinput.jsp : Form to Get Latitude and Longitude
 Code:
<%@ page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Enter Latitude and Longitude</title>
</head>
<body>
    <!-- Form to accept input values for latitude and longitude -->
    <form action="myindex.jsp" method="get">
        <pre>
            Enter latitude: <input type="text" name="t1" />
            Enter longitude: <input type="text" name="t2" />
            <input type="submit" value="Show" />
        </pre>
    </form>
</body>
</html>


Now, open myjsp folder and open with VS Code and paste the API_KEY in myindex.jsp script tag:
Shown below:
Before:<!-- Google Maps JavaScript API -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY &callback=initMap" async defer></script>
After: :<!-- Google Maps JavaScript API --><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAiofE1T6K975oNisc37nvURK7c87XR7e4 &callback=initMap" async defer></script>


Step 5: Now to check the output, open a web browser Google Chrome or Microsoft Edge Ctrl + Click to follow the Link, URL: http://localhost:8080/myjsp/myinput.jsp

Enter Example latitude and longitude of any place
Here, latitude and longitude coordinates of city: Madurai 
Latitude: 9.939093  
Longitude:  78.121719



