Google Map API v3 ~ Simplemente cierre una ventana de información?

93

Con la v3 API, puede cerrar fácilmente la InfoWindow con el método InfoWindow.close(). Simplemente necesita mantener una referencia al objeto InfoWindow que está utilizando. Consideremos el siguiente ejemplo, que abre una InfoWindow y lo cierra después de 5 segundos:

<!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>

Si usted tiene un InfoWindow objeto separado para cada Marker, es posible que desee considerar la incorporación del objeto InfoWindow como una propiedad de su Marker objetos:

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

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

, entonces sería capaz de abrir y cerrar que InfoWindow de la siguiente manera:

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

Lo mismo se aplica si usted tiene una serie de marcadores:

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();

Fuente

2010-06-01 05:01:41

+2

+1 Muy útil, gracias – amelvin

+0

Awesome explanation –

+0

Creaziness of OOP genious! ;-) ¡Gracias! Esto abre un millón de puertas para adjuntar información especial sobre cada/algunos/un marcador ... y lo recoge, o lo cambia, en cualquier lugar y en cualquier momento. 1.000 gracias por la brillante idea! –

19

O puede compartir/reutilizar el mismo objeto infoWindow. Ver este google demo de referencia.

mismo código de demostración

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

Fuente

2010-06-14 18:59:15

7

que estaba teniendo un problema similar. Simplemente añade lo siguiente a mi código:

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

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

El código completo es js (el código anterior es de aproximadamente 15 líneas de la parte inferior):

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

Fuente

2012-01-31 20:06:57 kdev

+0

parece que falta algo en este código. El mapa resultante muestra infowindows vacías. – husayt

+0

@husayt Es una respuesta muy antigua, estoy seguro de que la tecnología ha cambiado en los últimos 3 años. Además, el código debería ser configurado para sus propios fines. – kdev

+0

¡Esto funciona perfecto! Al menos el primer código ... – Ismaestro

-2

infowindow.open(null,null);

se cerrarán ventana de información abierta. Funcionará igual que

Fuente

2012-08-31 14:40:25 Janki

+1

Lo mismo que qué? ¿Olvidaste terminar tu oración? –

1

Usted simplemente puede añadir un detector de clics en el mapa dentro de la función que crea la ventana de información

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

Fuente

2013-09-04 00:05:36 Logan

3

Ésta también funcionaría:

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

que se abrirá una ventana de información cuando se hace clic en ella, ciérrela cuando se hace clic en ella si se abrió.

también haber visto la solución de Logan, estos 2 se pueden combinar en esto:

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

que abrirá una infoWindow cuando se hace clic en él, cerrarla cuando se hace clic en él y se abrió, y cerrarla si se hace clic en cualquier parte del mapa y se abre la información de Windows.

Fuente

2013-10-31 12:17:18

0

El siguiente detector de eventos resolvieron este bien para mí, incluso cuando se utilizan varios marcadores y ventanas de información:

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

Fuente

2015-09-11 11:20:07

0

Podemos utilizar infowindow.close (mapa); para cerrar todas las ventanas de información si ya has inicializado la ventana de información usando infowindow = new google.maps.InfoWindow();

Fuente

2017-10-19 12:28:16 Naushad

Google Map API v3 ~ Simplemente cierre una ventana de información?

Respuesta

Cuestiones relacionadas