How to include google map in web application

Kartik Chandra Mandal April 10, 2016


What is the purpose?

To integrate Google Maps into your web application with a location history feature, you can use the Google Maps JavaScript API alongside Google Maps' Places API. Google Maps provides a route planner under "Get Directions". Up to four modes of transportation are available depending on the area: driving, public transit (see the Google Transit section below), walking, and bicycling. In combination with Google Street View, issues such as parking, turning lanes, and one-way streets can be viewed before traveling. Driving directions are covered as follows:

To include Google Maps in a web application, you need to integrate the Google Maps API. Below are the general steps, including the history of how this process has evolved.

Here’s a step-by-step guide:

Step 1: Get a Google Maps API Key

Ø  Sign up for the Google Cloud Platform (GCP):

ü  Visit Google Cloud Console.

ü  Create a new project.

ü  Go to the "APIs & Services" > "Credentials" section.

ü  Enable the Google Maps JavaScript API.

ü  Create an API key under "Credentials" to use in your application.

ü  Obtain an API key and restrict it to your domain for security.

2. Add the Google Maps Script in HTML

Include the Google Maps JavaScript API script in your HTML file, replacing YOUR_API_KEY with your API key:

html

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

 

3. Create an HTML Container for the Map

Add a <div> where the map will be displayed:

html

<div id="map" style="height: 400px; width: 100%;"></div>

 

4. Initialize the Map in JavaScript

Use JavaScript to set up the map and plot the locations based on history data:

javascript

function initMap() {

    const map = new google.maps.Map(document.getElementById("map"), {

        center: { lat: -34.397, lng: 150.644 }, // Default center

        zoom: 8,

    });

 

    // Example of historical data

    const locationHistory = [

        { lat: -34.397, lng: 150.644, time: "2024-11-01 10:00" },

        { lat: -34.307, lng: 150.744, time: "2024-11-02 12:00" },

        // Add more locations and times here

    ];

 

    // Plot each location

    locationHistory.forEach((location) => {

        new google.maps.Marker({

            position: { lat: location.lat, lng: location.lng },

            map: map,

            title: `Visited at ${location.time}`

        });

    });

}

 

5. Call initMap on Page Load

Ensure initMap is called once the page is loaded:

html

<body onload="initMap()">

    <!-- Other content -->

</body>

 

6. Optional: Show Historical Data in a Scrollable List

You can display the history as a list alongside the map. Here’s a basic example:

html

<div id="history" style="overflow-y: scroll; height: 150px;">

    <ul>

        <li>2024-11-01 10:00 - Location A</li>

        <li>2024-11-02 12:00 - Location B</li>

        <!-- More history items -->

    </ul>

</div>

 

 

Step 7: Include the Google Maps JavaScript API in Your HTML

Once you have the API key, you can include it in your HTML file by adding the following script tag to the <head> section of your HTML page:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Google Maps Integration</title>

    <!-- Include Google Maps 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 */

        #map {

            height: 400px;

            width: 100%;

        }

    </style>

</head>

<body>

    <h1>My Google Map</h1>

    <!-- Div to hold the map -->

    <div id="map"></div>

 

    <script>

        // Initialize the map

        function initMap() {

            // Set the location for the map (latitude and longitude)

            var location = { lat: -34.397, lng: 150.644 }; // Example: Sydney

 

            // Create a new map object

            var map = new google.maps.Map(document.getElementById('map'), {

                zoom: 8,

                center: location

            });

 

            // Add a marker to the map

            var marker = new google.maps.Marker({

                position: location,

                map: map

            });

        }

    </script>

</body>

</html>

 

Replace YOUR_API_KEY with the actual API key that you obtained in Step 1.

Step 8: Customize the Map (Optional)

You can modify the initMap function to customize the map’s appearance, markers, or even add features like geolocation, directions, or street view. For instance:

Ø  Changing the Map Style: You can apply a custom style to your map by using a predefined or custom JSON style.

Ø  Adding Multiple Markers: Use an array of latitude and longitude to place multiple markers.

Ø  Zooming and Centering the Map: Adjust the zoom level and map center coordinates to focus on a particular location.

Step 9: History of Google Maps API Integration

  1. Launch of Google Maps API (2005): Google introduced its Maps API in 2005, which allowed developers to embed interactive maps in their websites using JavaScript.
  2. Evolution: Over time, Google Maps API has evolved to include features like Street View, Directions, Distance Matrix, and Geocoding.
  3. Pricing Model Change (2018): Google introduced a pay-as-you-go pricing model for its API, which required developers to set up billing accounts and use an API key to access services.
  4. Current Features: Google Maps now provides a variety of APIs, including Maps JavaScript API, Places API, Geocoding API, and more, which are commonly used for web and mobile app development.

 

10. Test and Style Your Map and History List

Customize styles for the map container and history list as needed.

This setup will allow users to view their location history directly on the map and in a list. You can enhance this by storing history in a database or dynamically fetching it from a backend server using AJAX.

 

11. How to do?

create a html pages like mapDisplay.html

<html>

<head>

<script

src="http://maps.googleapis.com/maps/api/js">

</script>

<script>

var myCenter=new google.maps.LatLng(22.2989532,87.6469777);   //this is the exact location give in your project

function initialize()

{

var mapProp = {

  center:myCenter,

  zoom:18,

  mapTypeId:google.maps.MapTypeId.ROADMAP

  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({

  position:myCenter,

  });

marker.setMap(map);

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>

<div id="googleMap"  style="width:500px;height:380px;"></div>

</body>

</html>

 


Second step >
Now run this code in your browser


Output:

google map for my location using LatLng
google map in web application


Post a Comment

0 Comments

Post a Comment