Google Map API v3 ~ Po prostu zamknij infomatindow?

93

Z v3 API można łatwo zamknąć InfoWindow metodą InfoWindow.close(). Po prostu musisz zachować odniesienie do obiektu, którego używasz. Rozważmy następujący przykład, który otwiera się InfoWindow i zamyka go po 5 sekundach:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API InfoWindow Demo</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 
</head> 
<body> 
    <div id="map" style="width: 400px; height: 500px;"></div> 

    <script type="text/javascript"> 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: new google.maps.LatLng(-25.36388, 131.04492), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var marker = new google.maps.Marker({ 
     position: map.getCenter(), 
     map: map 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     content: 'An InfoWindow' 
    }); 

    infowindow.open(map, marker); 

    setTimeout(function() { infowindow.close(); }, 5000); 
    </script> 
</body> 
</html>

Jeśli masz oddzielną InfoWindow obiekt dla każdego Marker, może warto rozważyć dodanie obiektu InfoWindow jako własność swoją Marker obiekty:

var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    map: map 
}); 

marker.infowindow = new google.maps.InfoWindow({ 
    content: 'An InfoWindow' 
});

Wtedy będzie można otwierać i zamykać że InfoWindow następująco:

marker.infowindow.open(map, marker); 
marker.infowindow.close();

To samo dotyczy jeśli masz tablicę wskaźników:

var markers = []; 

marker[0] = new google.maps.Marker({ 
    position: map.getCenter(), 
    map: map 
}); 

marker[0].infowindow = new google.maps.InfoWindow({ 
    content: 'An InfoWindow' 
}); 

// ... 

marker[0].infowindow.open(map, marker); 
marker[0].infowindow.close();

Źródło

2010-06-01 05:01:41

+2

+1 Naprawdę przydatne, dzięki – amelvin

+0

Niesamowite wytłumaczenie –

+0

Creaziness of OOP genious! ;-) Dzięki! Otwiera to milion drzwi do umieszczania specjalnych informacji na każdym/pewnym/jednym znaczniku ... i gromadzenia go lub zmiany go, w dowolnym miejscu i czasie. 1.000 dzięki za genialny pomysł! –

19

Albo można udostępnić/używać tego samego obiektu infoWindow. Zobacz ten dokument google demo w celach informacyjnych.

sam kod z demo

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(37.789879, -122.390442); 
    Demo.map = new google.maps.Map(document.getElementById('map-canvas'), { 
    zoom: 13, 
    center: centerLatLng, 
    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 
    var marker1 = new google.maps.Marker({ 
    map: Demo.map, 
    position: centerLatLng 
    }); 

    // 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 
    var marker2 = new google.maps.Marker({ 
    map: Demo.map, 
    position: new google.maps.LatLng(37.787814,-122.40764), 
    draggable: true 
    }); 

    // 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); 
    }); 

    // Third random marker 
    var marker3 = new google.maps.Marker({ 
    map: Demo.map, 
    position: new google.maps.LatLng(37.767568,-122.391665), 
    draggable: true 
    }); 

    // 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(marker3, 'click', function() { 
    Demo.openInfoWindow(marker3); 
    }); 
}

Źródło

2010-06-14 18:59:15

7

miałem podobny problem. Ja po prostu dodaje następujące do mojego kodu:

closeInfoWindow = function() { 
    infoWindow.close(); 
}; 

google.maps.event.addListener(map, 'click', closeInfoWindow);

pełny kod js jest (powyżej kod jest około 15 linii od dołu):

jQuery(window).load(function() { 
if (jQuery("#map_canvas").length > 0){ 
    googlemap(); 
} 
}); 

function googlemap() { 

jQuery('#map_canvas').css({'height': '400px'}); 

// Create the map 
// No need to specify zoom and center as we fit the map further down. 
var map = new google.maps.Map(document.getElementById("map_canvas"), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    streetViewControl: false 
}); 

// Create the shared infowindow with two DIV placeholders 
// One for a text string, the other for the StreetView panorama. 
var content = document.createElement("div"); 
var title = document.createElement("div"); 
var boxText = document.createElement("div"); 

var myOptions = { 
     content: boxText 
     ,disableAutoPan: false 
     ,maxWidth: 0 
     ,pixelOffset: new google.maps.Size(-117,-200) 
     ,zIndex: null 
     ,boxStyle: { 
      background: "url('"+siteRoot+"images/house-icon-flat.png') no-repeat" 
      ,opacity: 1 
      ,width: "236px" 
      ,height: "300px" 
     } 
     ,closeBoxMargin: "10px 0px 2px 2px" 
     ,closeBoxURL: "http://kdev.langley.com/wp-content/themes/langley/images/close.gif" 
     ,infoBoxClearance: new google.maps.Size(1, 1) 
     ,isHidden: false 
     ,pane: "floatPane" 
     ,enableEventPropagation: false 
}; 


var infoWindow = new InfoBox(myOptions); 
var MarkerImage = siteRoot+'images/house-web-marker.png'; 

// Create the markers 
for (index in markers) addMarker(markers[index]); 
function addMarker(data) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(data.lat, data.lng), 
     map: map, 
     title: data.title, 
     content: data.html, 
     icon: MarkerImage 
    }); 
    google.maps.event.addListener(marker, "click", function() { 
     infoWindow.open(map, this);   
     title.innerHTML = marker.getTitle(); 
     infoWindow.setContent(marker.content); 
     infoWindow.open(map, marker); 
     jQuery(".innerinfo").parent().css({'overflow':'hidden', 'margin-right':'10px'});    
    }); 
} 

// Zoom and center the map to fit the markers 
// This logic could be conbined with the marker creation. 
// Just keeping it separate for code clarity. 
var bounds = new google.maps.LatLngBounds(); 
for (index in markers) { 
    var data = markers[index]; 
    bounds.extend(new google.maps.LatLng(data.lat, data.lng)); 
} 
map.fitBounds(bounds); 
var origcent = new google.maps.LatLng(map.getCenter()); 
// Handle the DOM ready event to create the StreetView panorama 
// as it can only be created once the DIV inside the infowindow is loaded in the DOM. 

closeInfoWindow = function() { 
     infoWindow.close(); 
    }; 

google.maps.event.addListener(map, 'click', closeInfoWindow); 

google.maps.event.addListener(infoWindow, 'closeclick', function() 
{ 
    centermap(); 
}); 

function centermap() 
{ 
    map.setCenter(map.fitBounds(bounds)); 
} 
} 

jQuery(window).resize(function() { 
googlemap(); 
});

Źródło

2012-01-31 20:06:57 kdev

+0

wydaje się, że czegoś brakuje w tym kodzie. Wynikowa mapa wyświetla puste infowindows. – husayt

+0

@husayt To dość stara odpowiedź, jestem pewien, że technologia zmieniła się w ciągu ostatnich 3 lat. Ponadto kod musiałby być skonfigurowany do własnych celów. – kdev

+0

To działa idealnie! Przynajmniej pierwszy kod ... – Ismaestro

-2

infowindow.open(null,null);

zamknie otwarte infowindow. To będzie działać tak samo jak

Źródło

2012-08-31 14:40:25 Janki

+1

To samo co? Czy zapomniałeś dokończyć zdanie? –

1

Można po prostu dodać kliknij słuchacza na mapie wewnątrz funkcji, która tworzy InfoWindow

google.maps.event.addListener(marker, 'click', function() { 
    var infoWindow = createInfoWindowForMarker(marker); 
    infoWindow.open(map, marker); 
    google.maps.event.addListener(map, 'click', function() { 
     infoWindow.close(); 
    }); 
});

Źródło

2013-09-04 00:05:36 Logan

3

Ten będzie również pracować:

google.maps.event.addListener(marker, 'click', function() { 
       if(!marker.open){ 
        infowindow.open(map,marker); 
        marker.open = true; 
       } 
       else{ 
        infowindow.close(); 
        marker.open = false; 
       } 
      });

który otworzy po kliknięciu na infoWindow zamknij je po kliknięciu, jeśli zostało otwarte.

także widząc rozwiązanie Logana, te 2 można połączyć w ten sposób:

google.maps.event.addListener(marker, 'click', function() { 
       if(!marker.open){ 
        infowindow.open(map,marker); 
        marker.open = true; 
       } 
       else{ 
        infowindow.close(); 
        marker.open = false; 
       } 
       google.maps.event.addListener(map, 'click', function() { 
        infowindow.close(); 
        marker.open = false; 
       }); 
      });

Która otworzy infoWindow po kliknięciu na nią, zamknij ją po kliknięciu na nią, a ona została otwarta, i zamknąć go, jeśli kliknięto go w dowolnym miejscu na mapie i otworzyło się okno infoWindows.

Źródło

2013-10-31 12:17:18

0

Poniższa detektor zdarzeń rozwiązać ten ładnie dla mnie nawet podczas korzystania z wielu markerów i okna informacyjne:

//Add click event listener 
google.maps.event.addListener(marker, 'click', function() { 
    // Helper to check if the info window is already open 
    google.maps.InfoWindow.prototype.isOpen = function(){ 
     var map = infoWindow.getMap(); 
     return (map !== null && typeof map !== "undefined"); 
    } 
    // Do the check 
    if (infoWindow.isOpen()){ 
    // Close the info window 
    infoWindow.close(); 
    } else { 
    //Set the new content 
    infoWindow.setContent(contentString); 
    //Open the infowindow 
    infoWindow.open(map, marker); 
    } 
});

Źródło

2015-09-11 11:20:07

0

Możemy użyć infowindow.close (mapa); aby zamknąć wszystkie okna informacyjne, jeśli już zainicjalizujesz okno informacyjne za pomocą infowindow = new google.maps.InfoWindow();

Źródło

2017-10-19 12:28:16 Naushad

Google Map API v3 ~ Po prostu zamknij infomatindow?

Odpowiedz

Powiązane problemy