Best IT Recipes

Google Map API v3 ~ Just close the info window?

Trying to just close the info node?

I already have an array of markers, so something like this would be nice. Thanks

MyMarkers[i].infowindow.close();
+51
javascript google-maps google-maps-api-3
May 31 '10 at 10:01
source share
8 answers

With the v3 API, you can easily close InfoWindow with InfoWindow.close() . You just need to save the link to the InfoWindow object that you are using. Consider the following example, which opens InfoWindow and closes it after 5 seconds:

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

If you have a separate InfoWindow object for each Marker , you might want to add an InfoWindow object as a property of your Marker objects:

 var marker = new google.maps.Marker({ position: map.getCenter(), map: map }); marker.infowindow = new google.maps.InfoWindow({ content: 'An InfoWindow' });

You can then open and close this InfoWindow as follows:

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

The same applies if you have an array of markers:

 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();
+90
Jun 01 '10 at 5:01
source share

Or you can share / reuse the same infoWindow object. For reference see this google demo .

The same code from the 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 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 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 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 position when clicked or dragged. google.maps.event.addListener(marker3, 'click', function() { Demo.openInfoWindow(marker3); }); }
+19
Jun 14 '10 at 6:59 p.m.
source share

I had a similar problem. I just added the following to my code:

 closeInfoWindow = function() { infoWindow.close(); }; google.maps.event.addListener(map, 'click', closeInfoWindow);

Full js code (the code above is about 15 lines below):

 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(); });
+7
Jan 31 2018-12-12T00:
source share

This will also work:

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

Which will open the info window when you click on it, close it by clicking on it if it was open.

Also, after seeing the Logan solution, these 2 can be combined into this:

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

Which will open the info window when you click on it, close it by clicking on it, and it will be open, and close it if it clicks somewhere on the map and the infoWindows window opens.

+3
Oct 31 '13 at 12:17
source share

You can simply add a click listener on the map inside the function that creates 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(); }); });
+1
Sep 04 '13 at 0:05
source share

The following event listener did a great job of this, even when you use multiple markers and info windows:

 //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); } });
0
Sep 11 '15 at 11:20
source share

We can use infowindow.close (map); close all info windows if you have already initialized the info window using infowindow = new google.maps.InfoWindow ();

0
Oct 19 '17 at 12:28
source share
 infowindow.open(null,null);

will close the open window. It will work just like

-2
Aug 31 '12 at 14:40
source share


More articles:


All Articles