Google map Integration using JavaScript API
The provided script is an example of map integration using the Google Maps JavaScript API
It creates an interactive map with the ability to:
- Display the user's location using geolocation.
- Allow the user to drag and move the map.
- Update the address and location fields based on the map's center or marker's position.
- Provide a "Locate Me" button to center the map on the user's current location.
code:
<script src="https://maps.googleapis.com/maps/api/js?signed_in&key=AIzaSyAA2ukvrb1kWQZ2dttsNIMynLJqVCYYrhw"></script>
<script>
var map;
var marker;
var geocoder;
var locField;
var latField;
var lngField;
var locateMeBtn = document.getElementById("locateMeBtn");
var isMapMoving = false;
var updateTimeout;
function initMap() {
locField = document.getElementById("loc");
latField = document.getElementById("lat");
lngField = document.getElementById("lng");
locateMeBtn.addEventListener("click", locateMe);
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function (position) {
var userLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: userLocation
});
marker = new google.maps.Marker({
position: userLocation,
map: map,
title: 'Your Location',
animation: google.maps.Animation.DROP,
draggable: true
});
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'location': userLocation
}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK && results[0]) {
var formattedAddress = results[0].formatted_address;
locField.value = formattedAddress;
updateLocationFields(results[0].geometry.location);
} else {
locField.value = 'Geocoding failed: ' + status;
console.log("Geocoding failed: " + status);
}
});
google.maps.event.addListener(map, 'dragstart', function () {
isMapMoving = true;
});
google.maps.event.addListener(map, 'dragend', function () {
isMapMoving = false;
clearTimeout(updateTimeout);
updateTimeout = setTimeout(updateAddress, 200);
});
google.maps.event.addListener(marker, 'dragend', function () {
clearTimeout(updateTimeout);
updateTimeout = setTimeout(updateAddress, 200);
});
google.maps.event.addListener(map, 'drag', function () {
marker.setPosition(map.getCenter());
});
}, function (error) {
console.error("Geolocation error: " + error.message);
setDefaultLocation();
});
} else {
setDefaultLocation();
}
}
function updateAddress() {
if (!isMapMoving && marker) {
var markerPosition = marker.getPosition();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'location': markerPosition
}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK && results[0]) {
var formattedAddress = results[0].formatted_address;
locField.value = formattedAddress;
} else {
console.log("Geocoding failed: " + status);
}
});
}
}
function locateMe() {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function (position) {
var userLocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(userLocation);
marker.setPosition(userLocation);
updateAddress();
}, function (error) {
console.error("Geolocation error: " + error.message);
setDefaultLocation();
});
} else {
alert("Geolocation is not supported in this browser.");
}
}
function setDefaultLocation() {
var defaultLocation = {
name: 'Main branch',
lat: 17.4386235,
lng: 78.4387877,
info: 'Move the map to adjust your location'
};
locField = document.getElementById("loc");
map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: {
lat: defaultLocation.lat,
lng: defaultLocation.lng
},
draggable: true
});
marker = new google.maps.Marker({
position: {
lat: defaultLocation.lat,
lng: defaultLocation.lng,
},
map: map,
title: defaultLocation.name,
animation: google.maps.Animation.DROP,
draggable: true
});
google.maps.event.addListener(map, 'drag', function () {
marker.setPosition(map.getCenter());
});
google.maps.event.addListener(map, 'dragend', function () {
updateAddress();
});
google.maps.event.addListener(marker, 'dragend', function () {
updateAddress();
});
updateLocationFields(new google.maps.LatLng(defaultLocation.lat, defaultLocation.lng));
}
function updateLocationFields(location) {
latField.value = location.lat();
lngField.value = location.lng();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'location': location
}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK && results[0]) {
var formattedAddress = results[0].formatted_address;
locField.value = formattedAddress;
var postalCode = extractPostalCode(results[0].address_components);
document.getElementById("pincode").value = postalCode;
} else {
locField.value = 'Geocoding failed: ' + status;
console.log("Geocoding failed: " + status);
}
});
}
(function () {
initMap();
})();
</script>