Google Map API v3 ~ Schließen Sie einfach ein Infofenster?

93

Mit dem v3 API können Sie bequem die InfoWindow mit dem InfoWindow.close() Verfahren schließen. Sie müssen lediglich einen Verweis auf das Objekt InfoWindow halten, das Sie verwenden. Betrachten Sie das folgende Beispiel, das eine InfoWindow öffnet und schließt es nach 5 Sekunden:

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

Wenn Sie für jede Marker ein separates InfoWindow Objekt haben, möchten Sie vielleicht Hinzufügen des InfoWindow Objekt als Eigenschaft Ihrer Marker berücksichtigen Objekte:

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

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

Dann würden Sie in der Lage sein, sich zu öffnen und schließen, dass InfoWindow wie folgt:

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

Gleiches gilt, wenn Sie eine Reihe von Markern haben:

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

Quelle

2010-06-01 05:01:41

+2

+1 Wirklich nützlich, danke – amelvin

+0

Awesome Erklärung –

+0

Creaziness of OOP genious! ;-) Vielen Dank! Dies öffnet eine Million Türen, um spezielle Informationen zu jedem/einigen/einem Marker anzubringen ... und sammelt sie an jedem Ort und zu jeder Zeit. 1.000 Danke für die tolle Idee! –

19

Oder Sie können das gleiche Objekt teilen infowindow/wiederverwenden. Sehen Sie diese google demo als Referenz.

Same-Code von 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); 
    }); 
}

Quelle

2010-06-14 18:59:15

7

ich ein ähnliches Problem haben. Ich habe einfach folgendes meinen Code:

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

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

Der vollständige js Code (der Code oben ist etwa 15 Zeilen von unten):

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

Quelle

2012-01-31 20:06:57 kdev

+0

scheint etwas in diesem Code fehlt. Die resultierende Karte zeigt leere Infofenster an. – husayt

+0

@husayt Es ist eine ziemlich alte Antwort, ich bin mir sicher, dass sich die Technologie in den letzten 3 Jahren verändert hat. Außerdem müsste der Code für Ihre eigenen Zwecke konfiguriert werden. – kdev

+0

Das funktioniert perfekt! Zumindest der erste Code ... – Ismaestro

-2

infowindow.open(null,null);

geöffnet Infofenster schließen. Es wird als

Quelle

2012-08-31 14:40:25 Janki

+1

Das Gleiche wie was? Hast du vergessen, deinen Satz zu beenden? –

1

gleiche Arbeit, die Sie einfach einen Klick Zuhörer auf der Karte innerhalb der Funktion, die würde auch funktionieren Infowindow hinzufügen könnte

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

Quelle

2013-09-04 00:05:36 Logan

3

Diese erstellt das:

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

Welche öffnen

wird ein InfoWindow, wenn Sie darauf klicken, schließen Sie es, wenn Sie darauf klicken, wenn es geöffnet wurde.

Auch Logan-Lösung gesehen zu haben, so können diese 2 in diese kombiniert werden:

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

, das eine infowindow geöffnet wird, wenn darauf geklickt wird, es schließen, wenn darauf geklickt und es wurde geöffnet, und schließen Sie es, wenn Es hat irgendwo auf der Karte geklickt und die InfoWindows wurde geöffnet.

Quelle

2013-10-31 12:17:18

0

Die folgende Ereignis-Listener löste dies für mich schön, auch wenn mehrere Markierungen und Infofenster mit:

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

Quelle

2015-09-11 11:20:07

0

Wir verwenden infowindow.close können (Karte); um alle Infofenster zu schließen, wenn Sie das Infofenster bereits initialisiert haben mit infowindow = new google.maps.InfoWindow();

Quelle

2017-10-19 12:28:16 Naushad

Google Map API v3 ~ Schließen Sie einfach ein Infofenster?

Antwort

Verwandte Themen