0

Google Maps API に初めて飛び込んで、クリックしたときに表示される独自のコンテンツ (各マーカーの差分 iframe youtube vid) が必要でした。私は一度それを機能させましたが、ある情報ウィンドウがクリックされたときに別の情報ウィンドウを閉じることができませんでした。

次のデモ コードを変更して、一方がクリックされたときに一方が開くようにしようとしていますが、どのマーカーがクリックされたかに基づいてコンテンツを変更することはできません。

var Demo = {
map: null,
infoWindow: null   
};

 /**
* Called when clicking anywhere on the map and closes the info window.
*/
Demo.closeInfoWindow = function() {
Demo.infoWindow.close();
};

/**
* Opens the shared info window, anchors it to the specified marker, and
* displays the marker's position as its content.
*/
Demo.openInfoWindow = function(marker) {
var markerLatLng = marker.getPosition();
Demo.infoWindow.setContent([
'<b>Marker position is:</b><br/>',
markerLatLng.lat(),
', ',
markerLatLng.lng()
].join(''));
Demo.infoWindow.open(Demo.map, marker);
},

/**
* Called only once on initial page load to initialize the map.
*/
Demo.init = function() {
// Create single instance of a Google Map.
var centerLatLng = new google.maps.LatLng(0, 0);
Demo.map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: centerLatLng,
zoom: 2,
    maxZoom:3,
    minZoom:2,

  disableDefaultUI: true,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });

// Create a single instance of the InfoWindow object which will be shared
// by all Map objects to display information to the user.
Demo.infoWindow = new google.maps.InfoWindow();

// Make the info window close when clicking anywhere on the map.
google.maps.event.addListener(Demo.map, 'click', Demo.closeInfoWindow);

// Add multiple markers in a few random locations around San Francisco.
// First random marker - CHINA
var marker1 = new google.maps.Marker({
map: Demo.map,
position: new google.maps.LatLng(33.4, 103.8),
});

// Register event listeners to each marker to open a shared info
// window displaying the marker's position when clicked or dragged.
google.maps.event.addListener(marker1, 'click', function() {
Demo.openInfoWindow(marker1);
});

// Second random marker - Uruguay
var marker2 = new google.maps.Marker({
map: Demo.map,
position: new google.maps.LatLng(-32.81, -55.88),
});

// Register event listeners to each marker to open a shared info
// window displaying the marker's position when clicked or dragged.
google.maps.event.addListener(marker2, 'click', function() {
Demo.openInfoWindow(marker2);
});


}

各マーカーに iframe を含むコンテンツ用の変数を作成する必要があることはわかっていますが、それを行うための十分な js がなく、それを infoWindow に正しくプルする必要があります。

ありとあらゆる助けをいただければ幸いです。ありがとう!

4

1 に答える 1