-1
私のHTMLは次のとおりです。jQueryを使用してgoogle maps apiマーカーオブジェクトにクリックイベントハンドラを追加する方法はありますか？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>MapTest</title>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript" src="scripts/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1KzIyYJuVoPB84Rum7kH5uUETV-WIgSA"></script>
<script type="text/javascript" src="scripts/maps.js"></script>
</body>
</html>
私のCSSは次のとおりです。
#mapContainer {
width : 500px;
height: 500px;
}
私のjQueryのは、次のとおりです。興味の
$(document).ready(function() {
var lat = 22.688138;
var lng = 88.343926;
function initMap()
{
var latlng = new google.maps.LatLng(lat, lng);
var mapOpts = {
center : latlng,
zoom : 20,
mapTypeId : google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("mapContainer"),mapOpts);
var marker = new google.maps.Marker({
position : latlng,
map : map,
title : "Somu's House, Bitches!"
});
var infoWindow = new google.maps.InfoWindow({
content : "Somu's House, Bitches!"
});
$(marker).click(function() {
infoWindow.open(map, marker);
});
}
initMap();
});
ポイントは次の行である
$(marker).click(function() {
infoWindow.open(map, marker);
});
上記のコードは動作しません（エラーや警告を生成していないにもかかわらず）。しかし、JavaScriptのAPIのサンプルコードに応じて、正しいJSコードは次のとおりです。
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
なぜ、元のコードが動作しませんか？上記のコードをjQueryに変換するにはどうすればよいですか？ jQueryで同じことを達成する正しい方法は何ですか？
jQueryでこれを達成する方法は、単純なJavaScriptでこれを達成する方法とまったく同じですか？コードを簡単にするためにjQueryを使って変更することはできませんか？ –
私はあなたがクリックした正確なDOM要素を見つけることを含む、どのようなjQueryメソッドでも行うべきではないと思います。私はそれが非常に複雑で不必要であると期待しています。 – Chiu
javascriptでこれを行うときにJQueryを使用する理由 – John