Форум программистов, компьютерный форум, киберфорум
JavaScript: API
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 14.05.2022
Сообщений: 131

Ошибка в работе маркера в GoogleMap

18.10.2024, 21:37. Показов 631. Ответов 0
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день. Прошу помочь с возникшей ошибкой при работе маркера для отображения кастомного информационного окна для него.
Проблема состоит в том, что соответствующее информационное окно появляется не только при клике на маркер но и на область в которой она скрыта до клика.
По факту правильная работа предполагает, что информационное окно должно появляться только при клике на маркер. А закрываться либо при клике по информационному окну либо при клике на маркер.

HTML5
1
2
3
<div class="section-map" id="map-delizioso">
    <div id="map-delizioso"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
#map-delizioso {
    min-height: toRem(663);
    width: 100%;
}
 
.property.highlight .section-map__address{
    opacity: 1;
    scale: 1;
}
 
.property.highlight .section-map__address {
  opacity: 1;
  scale: 1
}
.section-map__address {
  background-color: var(--bgGoogleMapInfo);
  border-radius: clamp(.5rem,.35rem + .75vw,.875rem);
  box-shadow: 10px 10px 5px rgba(0,0,0,.2);
  position: relative;
  -webkit-transform: translate(-13px,-93px);
  transform: translate(-13px,-93px);
  transition: all .3s ease-out;
  opacity: 0;
  scale: 0
}
.section-map__address::after {
  position: absolute;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 24px solid var(--bgGoogleMapInfo);
  -webkit-filter: drop-shadow(4px 2px rgba(0, 0, 0, .2));
  filter: drop-shadow(4px 2px rgba(0, 0, 0, .2));
  content: "";
  height: 0;
  left: 50%
}
.address__body-col {
  padding: clamp(.5rem,.25rem + 1.25vw,1.125rem) clamp(.5rem,-.05rem + 2.75vw,1.875rem) clamp(.5rem,.25rem + 1.25vw,1.125rem) clamp(.5rem,.45rem + .25vw,.625rem);
  display: flex;
  width: 100%;
  justify-content: space-between;
  -webkit-column-gap: clamp(.938rem,.313rem + 3.13vw,2.5rem);
  -moz-column-gap: clamp(.938rem,.313rem + 3.13vw,2.5rem);
  column-gap: clamp(.938rem,.313rem + 3.13vw,2.5rem)
}
.body-col__marker-wrap {
  display: block;
  overflow: hidden;
  aspect-ratio: 89/120;
  max-width: 120px
}
.body-col__location-pic {
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
  object-fit: fill;
  -o-object-position: center;
  object-position: center
}
.body-col__picture {
  display: block;
  overflow: hidden;
  border-radius: clamp(.5rem,.45rem + .25vw,.625rem)
}
.body-col__sm-pic {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center
}
.body-col__col-desk-inner {
  display: flex;
  width: 100%
}
.body-col__place-data {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: clamp(.563rem,.238rem + 1.63vw,1.375rem)
}
.body-col__social-icon {
  font-family: var(--fontFamilyIconsFont);
  background-color: var(--bgFooter);
  border-radius: 50%;
  color: var(--fnSeparateElements);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease-in
}
.place-data__title {
  color: var(--bgFooter);
  font-size: clamp(.75rem,.5rem + 1.25vw,1.375rem);
  font-weight: 600;
  line-height: 1.1
}
.place-data__desk-parameters {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: clamp(.188rem,.037rem + .75vw,.563rem);
  color: var(--bgFooter);
  font-size: clamp(.625rem,.425rem + 1vw,1.125rem);
  font-weight: 500;
  line-height: 1.53
}
.place-data__bronx {
  flex-grow: 1
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
// * Google Map (Block CUSTOMERS)
 
async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const center = { lat: 40.88082, lng: -73.90863 };
 
  const map = new Map(document.getElementById("map-delizioso"), {
    zoom: 14,
    center,
    mapId: "AIzaSyCiZVu7tK.......NaK3Xq76GPI",
  });
 
  const marker = new AdvancedMarkerElement({
      map: map,
      position: center,
      title: "Restaurant Delizioso",
  });
 
  for (const property of properties) {
  const beachFlagImg = document.createElement("img");
      beachFlagImg.src = "../img/items_svg/tag-location.svg";
  
  const beachFlagMarkerView = new AdvancedMarkerElement({
      map,
      position: property.position,
      content: beachFlagImg,
      title: property.description,
    });
}
 
  for (const property of properties) {
    const AdvancedMarkerElement = new google.maps.marker.AdvancedMarkerElement({
      map,
      content: buildContent(property),
      position: property.position,
      title: property.description,
    });
 
    AdvancedMarkerElement.addListener("click", () => {
      toggleHighlight(AdvancedMarkerElement, property);
    });
    
  }
}
 
function toggleHighlight(markerView, property) {
  if (markerView.content.classList.contains("highlight")) {
    markerView.content.classList.remove("highlight");
    markerView.zIndex = null;
  } else {
    markerView.content.classList.add("highlight");
    markerView.zIndex = 1;
  }
}
 
function buildContent(property) {
  const content = document.createElement("div");
 
  content.classList.add("property");
  content.innerHTML = `
                <div class="section-map__address address">
            <div class="address__body-col body-col">
 
              <div class="body-col__picture">${property.image}</div>
 
              <div class="body-col__col-desk-inner">
                <div class="body-col__place-data place-data">
                  <h3 class="place-data__title">${property.title}</h3>
                  <div class="place-data__desk-parameters">
                    <h4 class="place-data__bronx">${property.address}</h4>
                    <h5 class="place-data__coordinates">${property.coordinates}</h5>
                  </div>
                </div>
                <a href="reservation.html" class="body-col__social-icon">${property.social}</a>
              </div>
            </div>
          </div>`;
  return content;
}
 
const properties = [
  {
    image: '<img src="img/contact_page/location.png" alt="Delizioso Restaurant", class="body-col__sm-pic" width="166" height="151">',
    title: "Restaurant Delizioso",
    address: "Bronx, NY 10463, Amerika Serikat",
    description: "Restaurant for the whole family",
    coordinates: "40.88082, -73.90863",
    social: "s",
    position: {
      lat: 40.88082,
      lng: -73.90863,
    },
  },
 
];
 
initMap();
На видео показал как это происходит. Ссылки на видео
https://transfiles.ru/vr7t7
https://fex.net/ru/s/kvlk1lf
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
18.10.2024, 21:37
Ответы с готовыми решениями:

Перемещение маркера на GoogleMap
Подскажите пожалуйста в чём может быть дело.. я сделал locationListener, в OnLocationChanged я меняю координаты маркера и пишу их в лог......

Описание маркера в развернутом виде, GoogleMap API
Всем привет! Есть вопрос, связанный с картами googleMap. Как программно сделать так, чтобы описание маркеров на карте всегда были в...

Ошибка при подключении GoogleMap
При подключении GoogleMap по API возникли ошибки. 1. При первой заходе на страницу GoogleMap не загружаются сразу требуется обновить...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
18.10.2024, 21:37
Помогаю со студенческими работами здесь

При попытке создать свой тип маркера через li::before, браузер рисует иероглиф вместо маркера
Решил я, значит добавить тень к маркированному списку: &lt;div class=&quot;footer-menu&quot;&gt; &lt;h3 id=&quot;our-offices&quot;&gt;Наши...

Дублирование маркера при первой попытке переноса маркера на карте компонента gMapControl библиотеки GMap.NET
Здравствуйте! Создал Win Forms приложение, подключил библиотеку GMap.NET для работы с картами, такой код: using...

Аппаратная ошибка видео (Ошибка при работе с видеоустройствами привела к некорректной работе Windows).
Аппаратная ошибка видео. Последнее время во время игры Call of Duty: Modern Warfare 2 в мультиплеер, (между сменами карт, как только...

googlemap
Привет всем. Вопрос собственно таков кто работал с googlemap киньте ссылки что бы почитать а то роздупляюсь немного не понятно. Может кто...

googlemap в C#
Здравствуйте! Подскажите! Как реализовать в си шарпе карту googlemap или google eath?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Новые блоги и статьи
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++
8Observer8 17.03.2026
Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip
Символические и жёсткие ссылки в Linux.
algri14 15.03.2026
Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора
ФедосеевПавел 14.03.2026
Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию
anaschu 13.03.2026
прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru