-1
以下のコードは私が何をしようとしているのかを示しています。私はcreateList（）で作成されたli要素をクリックして各インフォウィンドウを開こうとしています。これは動作していません。私は理解している 'マーカー'が定義されていないことを表示しますが、これを修正する方法はわかりません。ここにソースコードとライブマップを表示することができます：http://home.messiah.edu/~dw1248/dev/lodgingTest.htmlJavaScriptを使ってインフォウインドウを開く方法Google maps api
助けていただければ幸いです。前もって感謝します！
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: Roboto, Arial, sans-serif;
}
#map {
width: 100%;
height: 100%;
}
.list {
width: 25%;
height: 75%;
z-index: 2;
position: absolute;
top: 10%;
left: 1.5%;
background-color: white;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
font-size: 0.82em;
padding-left: 8px;
padding-right: 8px;
padding-top: 48px;
overflow: scroll;
}
li {
list-style-type: none;
}
.listHeader {
width: 25%;
height: 40px;
padding-left: 8px;
padding-right: 8px;
z-index: 3;
position: absolute;
top: 10%;
left: 1.5%;
background-color: white;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
}
.listHeader h1 {
text-align: center;
font-size: 1em;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script>
var map;
var service;
var infowindow;
function initMap() {
var messiah = {
lat: 40.158350,
lng: -76.987454
};
var center = {
lat: 40.158350,
lng: -77.076
};
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 11
});
var marker = new google.maps.Marker({
position: messiah,
map: map,
title: 'Messiah College'
});
var request = {
location: messiah,
radius: 10000,
type: ['lodging']
}
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
infowindow = new google.maps.InfoWindow();
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
results.forEach(createMarker);
results.forEach(createList);
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
icon: {
url: 'http://maps.gstatic.com/mapfiles/circle.png',
anchor: new google.maps.Point(10, 10),
scaledSize: new google.maps.Size(10, 17)
},
position: place.geometry.location
});
///////////Look Here To Start Next Time
marker.addListener('click', function() {
var request = {
reference: place.reference
};
service.getDetails(request, function(details, status) {
var content = '<div><strong>' + details.name + '</strong><br>' + details.formatted_address + '<br>' + details.formatted_phone_number;
if (!!details.website) {content += '<br><a href=' + details.website + ' target= "_blank"> Website </a>'}
if (!!details.rating) {content += '<br>' + 'Rating: ' + details.rating }
infowindow.setContent(content);
infowindow.open(map, marker);
});
});
}
function createList(place) {
var request = {
reference : place.reference,
};
service.getDetails(request, function(details, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
$('.list').append('<li class="listItem">' + details.name + '</li><br/>');
$('.listItem').click(function() {
var content = '<div><strong>' + details.name + '</strong><br>' + details.formatted_address + '<br>' + details.formatted_phone_number;
if (!!details.website) {content += '<br><a href=' + details.website + ' target= "_blank"> Website </a>'}
if (!!details.rating) {content += '<br>' + 'Rating: ' + details.rating }
infowindow.setContent(content);
infowindow.open(map, marker);
});
} else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(function() {
createList(place);
}, 200);
}
});
}
window.onload = initMap;
</script>
</head>
<body>
<div id="map">
</div>
<div class="listHeader">
<h1>Lodging List</h1>
</div>
<div class="list">
<div>
</body>
</html>
あなたは 'VARマーカーを宣言する必要があります。'関数外 'createMarker（）'、それは間違いのために働くだろう...私は –
とき、私を試してみましたその場合、情報ウィンドウは1つの場所でのみ開き、その場所の正しい情報ではありません。 –
これは、infowindowの内容が新しいマーカーが作成されるたびにオーバーライドされるため、最後のレコードの詳細が表示されるためです。解決策は、各マーカーの詳細にinfowindowの一意のIDを使用することです。 –