Google карты в HTML

Question

Пытаюсь вставить Google Map в свой код, но выдает что тэг не поддерживается Safari и Firefox.

Есть ли способ вставить карту (возможно не Google Map), так чтобы поддерживались все браузеры?

Вот данный тэг :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1126.1485688277382!2d35.15889203766222!3d47.830917955536194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40dc678c60222573%3A0xe959302a24dcec6a!2z0L_Quy4g0J_Rg9GI0LrQuNC90LAsIDIsINCX0LDQv9C-0YDQvtC20YzQtSwg0JfQsNC_0L7RgNC-0LbRgdC60LDRjyDQvtCx0LvQsNGB0YLRjCwgNjkwOTU!5e0!3m2!1sru!2sua!4v1715431089883!5m2!1sru!2sua"
  allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="content_map" title="FormMapMarriage"></iframe>

Answer 1

так как iframe не всегда поддерживается

Чтобы вставить карту на веб-страницу так, чтобы она поддерживалась всеми браузерами рассмотрите возможность использования Google Maps JavaScript API

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 47.830917955536194,
      lng: 35.15889203766222
    },
    zoom: 15,
  });
}

#map {
  height: 400px;
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Map</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>


</head>

<body>
  <div id="map"></div>
</body>

</html>

Не забудьте заменить "YOUR_API_KEY" на ваш API ключ для Google Maps, который вы получили на сайте разработчиков Google.

две карты пример

function initMap() {
  // Первая карта
  var map1 = new google.maps.Map(document.getElementById("map1"), {
    center: {
      lat: 47.830917955536194,
      lng: 35.15889203766222
    },
    zoom: 15
  });

  // Вторая карта
  var map2 = new google.maps.Map(document.getElementById("map2"), {
    center: {
      lat: 48.830917955536194,
      lng: 36.15889203766222
    },
    zoom: 15
  });
}

#map1,
#map2 {
  height: 400px;
  width: 100%;
  margin-bottom: 20px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Две карты Google</title>

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

</head>

<body>
  <h1>Две карты на одной странице</h1>
  <div id="map1"></div>
  <div id="map2"></div>
</body>

</html>

Есть также альтернативы - Leaflet или OpenStreetMap. Вот пример использует библиотеку Leaflet и данные OpenStreetMap, которые поддерживаются всеми основными браузерами и не требуют API ключей

const map = L.map('map').setView([47.830917955536194, 35.15889203766222], 15);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([47.830917955536194, 35.15889203766222]).addTo(map)
  .bindPopup('Точка интереса.')
  .openPopup();

#map {
  height: 400px;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leaflet Map</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

</head>

<body>
  <div id="map"></div>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

</body>

</html>

пример с 2мя картами

// Карта 1: пл. Пушкина, 2, Запорожье, Украина
const map1 = L.map('map1').setView([47.8447, 35.1257], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map1);
L.marker([47.8447, 35.1257]).addTo(map1)
  .bindPopup('пл. Пушкина, 2, Запорожье, Украина')
  .openPopup();

// Карта 2: Эйфелева башня, Париж, Франция
const map2 = L.map('map2').setView([48.8584, 2.2945], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map2);
L.marker([48.8584, 2.2945]).addTo(map2)
  .bindPopup('Эйфелева башня, Париж, Франция')
  .openPopup();

#map1,
#map2 {
  height: 400px;
  width: 100%;
  margin-bottom: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Two Leaflet Maps</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

</head>

<body>
  <div id="map1"></div>
  <div id="map2"></div>

  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

</body>

</html>

БЛОГ НА HUSL

Google карты в HTML

Ответы (1 шт):