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
- 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.
- Evolution:
Over time, Google Maps API has evolved to include features like Street
View, Directions, Distance Matrix, and Geocoding.
- 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.
- 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
 |
| google map in web application |
1 Comments