Unique content for different infoWindow in google maps api v3
Taking my first plunge into the Google Maps API and I wanted to have unique content (a diff iframe youtube vid for each marker) to appear when clicked. I had that working once, but I couldn't make one info window close when another was clicked.
I'm trying to alter the following demo code to make one open when the other is clicked, but can't make the content change based on which marker is clicked.
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,
positi开发者_StackOverflow社区on: 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);
});
}
I know I need to create a variable for the content containing the iframe on each marker, but I don't know enough js to do that and then have it pull correctly into the infoWindow.
Any and all help is appreciated. Thanks!
Each marker will need open a different instance of an InfoWindow, which in turn has different content set.
When creating the markers you can easily add an extra property to the marker that references a instance of the appropriate InfoWindow. The 'click' event can then open the correct InfoWindow with that reference.
精彩评论