Google Geolocation API – красный маркер пункта назначения

Я учусь использовать API геолокации Google. У меня есть ключ, который сообщает мне широту и долготу, я получаю карту точного местоположения, как на изображении. Но мне нужна карта без красного маркера пункта назначения.

У меня есть такое
Мне это нужно

Я не знаю, можно ли это сделать с помощью этого 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';

«У меня есть это»… как ты это получил?

— 18.05.2024 10:12

javascript google-maps google-geocoding-api google-geolocation

18.05.2024 08:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

147

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

marker.setMap(null) Этот метод удаляет маркер с карты. Установка для свойства карты маркера значения null фактически отключает маркер от карты, заставляя его исчезнуть сразу после добавления.

Больше информации о задержании в здесь

Этот код может удалить маркер

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