반응형
Google Map API v3 ~ 단순히 정보창을 닫으시겠습니까?
단순히 정보창을 닫으려고하십니까?
이미 마커 배열이 있으므로 이와 같은 것이 좋습니다. 감사
MyMarkers[i].infowindow.close();
으로 V3 API를 , 당신은 쉽게 닫을 수 있습니다 InfoWindow으로 InfoWindow.close()하는 방법. InfoWindow사용 중인 개체에 대한 참조를 유지하기 만하면 됩니다. 를 열고 InfoWindow5 초 후에 닫는 다음 예제를 고려하십시오 .
<!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>
InfoWindow각에 대해 별도의 개체 가있는 경우 개체를 개체의 속성으로 Marker추가하는 것이 좋습니다 .InfoWindowMarker
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
marker.infowindow = new google.maps.InfoWindow({
content: 'An InfoWindow'
});
그런 InfoWindow다음 다음과 같이 열고 닫을 수 있습니다.
marker.infowindow.open(map, marker);
marker.infowindow.close();
마커 배열이있는 경우에도 동일하게 적용됩니다.
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();
또는 동일한 infoWindow 객체를 공유 / 재사용 할 수 있습니다. 이 Google 데모 를 참조하십시오.
데모의 동일한 코드
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);
});
}
비슷한 문제가 발생했습니다. 내 코드에 다음을 추가했습니다.
closeInfoWindow = function() {
infoWindow.close();
};
google.maps.event.addListener(map, 'click', closeInfoWindow);
전체 js 코드는 다음과 같습니다 (위 코드는 하단에서 약 15 줄).
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();
});
이것은 또한 작동합니다.
google.maps.event.addListener(marker, 'click', function() {
if(!marker.open){
infowindow.open(map,marker);
marker.open = true;
}
else{
infowindow.close();
marker.open = false;
}
});
클릭하면 infoWindow가 열리고 열렸 으면 클릭하면 닫습니다.
또한 Logan의 솔루션을 확인한 후이 두 가지를 다음과 같이 결합 할 수 있습니다.
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;
});
});
클릭하면 infoWindow가 열리고, 클릭하여 열렸을 때 닫고,지도의 아무 곳이나 클릭하면 infoWindow가 열리면 닫습니다.
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();
});
});
다음 이벤트 리스너는 여러 마커와 정보 창을 사용할 때도이 문제를 잘 해결했습니다.
//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);
}
});
We can use infowindow.close(map); to close all info windows if you already initialize the info window using infowindow = new google.maps.InfoWindow();
infowindow.open(null,null);
will close opened infowindow. It will work same as
참고URL : https://stackoverflow.com/questions/2946165/google-map-api-v3-simply-close-an-infowindow
반응형
'IT박스' 카테고리의 다른 글
| C ++의 64 비트 ntohl ()? (0) | 2020.12.11 |
|---|---|
| 라텍스에서 pgf / tikz 그래픽의 글꼴 크기를 제어하는 방법은 무엇입니까? (0) | 2020.12.11 |
| jQuery-요소에서만 첫 번째 클래스 가져 오기 (0) | 2020.12.11 |
| .sln, .suo 및 .csproj 파일이있는 이유는 무엇입니까? (0) | 2020.12.11 |
| Python의 재무 기술 분석 (0) | 2020.12.11 |