マウス クリックでタイトルにあるように、クリックした場所にマーカーを追加し、適切なテキスト フィールドに座標を表示したいのですが、すべてうまく機能していますが、JQuery だけがテキスト フィールドを更新していません。
<script>
var map;
var markersArray = [];
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
};
map = new google.maps.Map(document.getElementById('gmaps'),
mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
deleteOverlays();
addMarker(event.latLng);
updateTextFields(latitude, longitude);
});
google.maps.event.addListener(marker, 'click', function(event) {
showInfo(window);
});
}
function updateTextFields(lati, longi) {
$('#inputLatitude').change(function() {
$('#inputLatitude').val(lati);
});
$('#inputLongitude').change(function() {
$('#inputLongitude').val(longi);
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
function loadScript() {
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&' +
'callback=initialize';
document.body.appendChild(script);
}
$(document).ready(function() {
$(window).resize(function () {
var h = $(window).height(),
offsetTop = 190; // Calculate the top offset
$('#gmaps').css('height', (h - offsetTop));
}).resize();
});
window.onload = loadScript;
</script>