0
画面の片面にアイテムのリストがあり、他のアイテムにマーカーが表示されています。それぞれのリスト項目をクリックすると、特定のマーカーの情報ウィンドウがポップアップ表示されます。私はすでに実際のマーカーをクリックすると、マーカーの情報ウィンドウをポップアップさせることができましたが、今作成したリストと一緒に作業したいのです。たとえば、リストでMadison Square Gardenをクリックすると、Madison Square Gardenマーカーがgoogle maps apiのinfowindowを表示します。次のようにGoogleマップを作成するにはどうすればいいですか？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Neighborhood Map Project</title>
</head>
<body>
<div id="searchmenu">
<input id="searchbox"placeholder="Search..." type="search" daatabind="value: query, valueUpdate: 'keyup'" autocomplete="off">
<div id="menu">
<ul data-bind="foreach: locations">
<li data-bind="text: name"></li>
</ul>
</div>
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDsK_DgDME2t1k3F0AFiP52F28hDu9nie4&callback=initMap" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
とJS：
var locations = [{
name: "Red Bull Arena",
address: "600 Cape May St, Harrison, NJ 07029",
lat: 40.737046,
long: -74.150361
}, {
name: "MetLife Stadium",
address: "1 MetLife Stadium Dr, East Rutherford, NJ 07073",
lat: 40.813091,
long: -74.074209
}, {
name: "World Trade Center",
address: "285 Fulton St, New York, NY 10007",
lat: 40.713175,
long: -74.013104
}, {
name: "Zeppelin Hall Biergarten",
address: "88 Liberty View Dr, Jersey City, NJ 07302",
lat: 40.715120,
long: -74.046754
}, {
name: "Prudential Center",
address: "25 Lafayette St, Newark, NJ 07102",
lat: 40.733617,
long: -74.171150
}, {
name: "Madison Square Garden",
address: "4 Pennsylvania Plaza, New York, NY 10001",
lat: 40.750691,
long: -73.993476
}];
var Location = function(data) {
this.name = ko.observable(data.title);
this.address = ko.observable(data.address);
this.lat = ko.observable(data.lat);
this.long = ko.observable(data.long);
};
var viewModel = function() {
var self = this;
this.locationList = ko.observableArray([]);
locations.forEach(function(locationItem) {
self.locationList.push(new Location(locationItem));
});
this.currentLocation = ko.observable(this.locationList()[0]);
this.setLocation = function(clickedLocation) {
self.currentLocation(clickedLocation);
google.maps.event.trigger(clickedLocation.marker, 'click');
};
this.places = ko.observableArray(locations);
this.query = ko.observable("");
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(40.753011, -74.128069)
});
var infowindow = new google.maps.InfoWindow();
var marker;
function createMarker(latlng, html) {
html = '<h3>' + locations[i].name + '</h3>' + locations[i].address;
latlng = new google.maps.LatLng(locations[i].lat, locations[i].long);
marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, this);
});
return marker;
}
for (i = 0; i < locations.length; i++) {
createMarker(new google.maps.LatLng(locations[i][2], locations[i][3]));
}
ko.applyBindings(new viewModel());
}
https://github.com/matosb2/P5/tree/develop
名前は 'title'に設定されていますが、' locations'には 'name'sがあります。 –