I am learning how to use the Google Geolocation API. I have my key that tells me the latitude and longitude, I get the map of the exact location as in the image. But what I need is the map without the red destination marker.
I don't know if it is possible to do this with this API.
async function getApproximateLocation(apiKey) {
try {
const response = await fetch('https://www.googleapis.com/geolocation/v1/geolocate?key=' + apiKey, {
method: 'POST'
});
const data = await response.json();
return {
latitude: data.location.lat,
longitude: data.location.lng
};
} catch (error) {
console.error('Error al obtener la ubicaciĆ³n aproximada:', error);
throw error;
}
}
.
const loc = userLocation ? `${userLocation.latitude},${userLocation.longitude}` : `${ipInfo.latitude},${ipInfo.longitude}`;
const mapUrl = `https://maps.google.com/maps?q=${loc}&z=12&output=embed`;
mapIframe.src = mapUrl;
mapContainer.style.display = 'block';
marker.setMap(null)
This method removes the marker from the map. Setting the marker's map property to null effectively detaches the marker from the map, making it disappear immediately after being added.
More detain information in here
This code can remove marker
const marker = new google.maps.Marker({
position: { lat: location.latitude, lng: location.longitude },
map: map
});
// Remove the marker immediately after it is added to the map
marker.setMap(null);
index.html
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Example</title>
<script>
function loadGoogleMapsApi() {
var apiKey = document.getElementById('api-key').value;
var script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=initializeMap`;
document.head.appendChild(script);
}
document.addEventListener('DOMContentLoaded', loadGoogleMapsApi);
</script>
<script src="map.js"></script>
</head>
<body>
<!-- Replace with your actual API key -->
<input type="hidden" id="api-key" value="{API key}">
<div id="map" style="height: 800px; width: 100%;"></div>
</body>
</html>
map.js
async function getApproximateLocation(apiKey) {
try {
const response = await fetch('https://www.googleapis.com/geolocation/v1/geolocate?key=' + apiKey, {
method: 'POST'
});
const data = await response.json();
return {
latitude: data.location.lat,
longitude: data.location.lng
};
} catch (error) {
console.error('Error obtaining approximate location:', error);
throw error;
}
}
function initializeMap() {
const apiKey = document.getElementById('api-key').value;
getApproximateLocation(apiKey).then(location => {
const mapOptions = {
center: new google.maps.LatLng(location.latitude, location.longitude),
zoom: 12
};
const map = new google.maps.Map(document.getElementById('map'), mapOptions);
const marker = new google.maps.Marker({
position: { lat: location.latitude, lng: location.longitude },
map: map
});
// Remove the marker immediately after it is added to the map
marker.setMap(null);
}).catch(error => {
console.error('Error initializing map:', error);
});
}