Гугл.карты - JavaScript, Ajax

Мишкоатль · 22.04.2023, 20:27

Вот есть код для гугл карт. Почему не работает клик по карте или маркеру?

Код:


<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
  height: 100%;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
let map;
function initMap() {
map = new google.maps.Map( document.getElementById( 'map' ), {
center: {
lat: 51.513329,
lng: -0.088950
},
zoom: 14
});



}

var marker=new google.maps.Marker({
    position:myCenter,
    url: '/',
    animation:google.maps.Animation.DROP
});
marker.setMap(map);

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(marker, 'click', function() {alert('Hi');});

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

ADSoft · 24.04.2023, 07:40

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

ну и научится пользоваться консолью, чтоб смотреть - какиt ошибки вам показывает js (нажмите F12 и откройте тайный мир)

Мишкоатль · 24.04.2023, 14:12

а какую конкретно библиотеку?

ADSoft · 24.04.2023, 15:46

нужную...

ADSoft · 24.04.2023, 15:48

либо в init нужно

Код:


function initMap() {
map = new google.maps.Map( document.getElementById( 'map' ), {
center: {
lat: 51.513329,
lng: -0.088950
},
zoom: 14
});





var marker=new google.maps.Marker({
    position:myCenter,
    url: '/',
    animation:google.maps.Animation.DROP
});
marker.setMap(map);

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(marker, 'click', function() {alert('Hi');});

}

либо сначала подключить

Код:

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

а потом

Код:

<script>
var marker=new google.maps.Marker({
    position:myCenter,
    url: '/',
    animation:google.maps.Animation.DROP
});
marker.setMap(map);

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(marker, 'click', function() {alert('Hi');});
</script>

Мишкоатль · 24.04.2023, 16:51

не работает

Килобайт · 23.05.2023, 14:06

Проблема заключается в том, что функция инициализации карты называется

Цитата:

initMap()

, но в событии

Цитата:

addDomListener

вы используете

Цитата:

initialize

. Измените

Цитата:

google.maps.event.addDomListener(wi ndow,'load', initialize)

; на

Цитата:

google.maps.event.addDomListener(wi ndow,'load', initMap)

;. Кроме того, не определена переменная

Цитата:

myCenter

. Вы можете определить ее в функции

Цитата:

initMap()

перед созданием маркера. Также убедитесь, что вы заменили

Цитата:

"key"

на свой API-ключ Google Maps.

Код:

<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
let map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 51.513329, lng: -0.088950},
    zoom: 14
  });
  var myCenter = new google.maps.LatLng(51.513329, -0.088950);
  var marker = new google.maps.Marker({
    position: myCenter,
    url: '/',
    animation: google.maps.Animation.DROP
  });
  marker.setMap(map);
  google.maps.event.addListener(marker, 'click', function() {
    alert('Hi');
  });
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script src="<https://maps.googleapis.com/maps/api/js?key=your_key&callback=initMap>" async defer></script>

24.04.2023, 07:40	#2
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,160	ну наверняка надо сначала подключить библиотеку - а потом уже обращаться к ней, а не наоборот... ну и научится пользоваться консолью, чтоб смотреть - какиt ошибки вам показывает js (нажмите F12 и откройте тайный мир) Сайты, приложения, автоматизация в широком смысле слова

24.04.2023, 15:46	#4
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,160	нужную... Сайты, приложения, автоматизация в широком смысле слова

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вывод карты гугл на форму	ankoo1705	JavaScript, Ajax	0	05.05.2018 16:55
гугл карты апи помогите!	serauto79	PHP	2	08.06.2015 10:17
Вставка карты гугл в сайт. Сбор статистки.	back191	Фриланс	0	22.08.2014 15:01
карты гугл	der90	JavaScript, Ajax	1	04.03.2014 10:04
Ищем специалиста(смарт-карты,бонус.карты и т.п)	modob1	Фриланс	3	20.01.2012 11:09

24.04.2023, 14:12	#3
Мишкоатль Заблокирован Регистрация: 14.02.2021 Сообщений: 44	а какую конкретно библиотеку?

24.04.2023, 16:51	#6
Мишкоатль Заблокирован Регистрация: 14.02.2021 Сообщений: 44	не работает