Search code examples
javascriptgoogle-mapsgoogle-geocoding-apigoogle-geolocation

Google Geolocation API - red destination marked

I'm 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 marked.

I have this
I need this

I don't know if it is possible to do this with this API or do I need to use others.

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';
Solution

  • 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 enter image description 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);

    Demo

    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);
    });
}

    Result

    enter image description here