Google मानचित्र: स्वतः बंद खुला InfoWindows?

Question

मेरी साइट पर , मैं मानचित्र पर घर मार्करों को रखने के लिए Google मैप्स एपीआई v3 का उपयोग कर रहा हूं।

जब तक आप स्पष्ट रूप से क्लोज़ आइकन पर क्लिक नहीं करते हैं, InfoWindows खुली रहती है। मतलब, अगर आपके पास मैप मार्कर पर होवर करने के लिए एक समय में 2+ InfoWindows खुली हो सकती है।

प्रश्न : मैं इसे कैसे बनाऊं ताकि केवल वर्तमान सक्रिय InfoWindow खुला हो और अन्य सभी InfoWindows बंद हों? मतलब, 1 से अधिक नहीं InfoWindow एक बार में खुलेगा?

Comments

मेरे लिए यह बेहतर है कि आप केवल एक इन्फिनडोव बनाएं और इसे अपडेट करें (यह सामग्री और आदि), खुला और बंद और eveything। लेकिन मुझे पूरा यकीन है कि यह दृष्टिकोण हमेशा लागू नहीं होता है।

— andrii

Answer 1

InfoWindows के लिए एक करीबी () फ़ंक्शन है। बस पिछली खुली खिड़की का ध्यान रखें, और जब एक नई विंडो बनाई जाए तो उस पर करीबी फ़ंक्शन को कॉल करें।

इस डेमो में वह कार्यक्षमता है जिसकी आप तलाश कर रहे हैं। मैंने इसे मैप्स एपीआई वी 3 डेमो गैलरी में पाया ।

Comments

केवल अंतिम खुली हुई खिड़की का ट्रैक रखने के सुझाव के लिए बनाया गया। बिना दिमाग के लगता है, लेकिन लोग उन चीजों को भूल जाते हैं ...

— रेमी ब्रेटन

मैंने ठीक उसी तकनीक का उपयोग किया है। धन्यवाद क्रिस। यह मेरे लिए आवश्यक था, क्योंकि मैं सिर्फ एक के बजाय InfoWindow वस्तुओं की एक सरणी का उपयोग कर रहा हूं जो कि प्रासंगिक जानकारी को चक्रित करता है और पकड़ता है। प्रत्येक InfoWindow की अपनी अलग से अद्यतन जानकारी होती है, इसलिए मुझे यह तकनीक काफी उपयोगी लगी।

— इंटरफेसग्यू

"यह डेमो" लिंक टूट गया है

— ब्रेंडन व्हिटिंग

Answer 2

कई infowindows का उपयोग करने के साथ इसके लिए वैकल्पिक समाधान: सहेजे गए प्रचलित infowindow को एक चर में सहेजें और फिर इसे बंद करें जब नई विंडो खुले

var prev_infowindow =false; 
...
base.attachInfo = function(marker, i){
    var infowindow = new google.maps.InfoWindow({
        content: 'yourmarkerinfocontent'
    });

    google.maps.event.addListener(marker, 'click', function(){
        if( prev_infowindow ) {
           prev_infowindow.close();
        }

        prev_infowindow = infowindow;
        infowindow.open(base.map, marker);
    });
}

Comments

इस तरह। समझने और लागू करने के लिए सरल

— आमिर अफरीदी

मेरी भोली को माफ कर दो, लेकिन डब्ल्यूटीएफ आधार है?

— शब्दफोर वाइज

मुझे समझ नहीं आता कि Google के नक्शे V3 में डिफ़ॉल्ट व्यवहार क्यों नहीं है ...

— श्री वाशिंगटन

अब तक का सबसे अच्छा और सरल उपाय। धन्यवाद!

— इरतेजा असद

Answer 3

//assuming you have a map called 'map'
var infowindow = new google.maps.InfoWindow();

var latlng1 = new google.maps.LatLng(0,0);
var marker1 = new google.maps.Marker({position:latlng1, map:map});
google.maps.event.addListener(marker1, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #1');//update the content for this marker
        infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it
    }
);
var latlng2 = new google.maps.LatLng(10,10);
var marker2 = new google.maps.Marker({position:latlng2, map:map});
google.maps.event.addListener(marker2, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #2');//update the content for this marker
        infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it
    }
);

यह प्रत्येक क्लिक किए गए मार्कर के चारों ओर सूचना विंडो को "बंद" करेगा, अपने आप को बंद करने में, फिर से खोलने (और व्यूपोर्ट को फिट करने के लिए पैनिंग) को उसके नए स्थान पर। यह वांछित प्रभाव देने के लिए खोलने से पहले अपनी सामग्री को बदलता है। N मार्करों के लिए काम करता है।

Comments

त्वरित नोट: infowindow.open () के लिए बार-बार कॉल पर्याप्त हैं; विंडो को पहले बंद करने की आवश्यकता नहीं है।

— एरिक गुयेन

@Eric, जबकि आप तकनीकी रूप से सही हैं, मैंने एक बग देखा है जो कभी-कभी सूचना विंडो को उनके अंतिम स्थान पर दिखाने का कारण बनता है। मजबूरन पहले शौच बंद ने कहा बग।

— जोएल मेलन

Answer 4

मेरा समाधान।

var map;
var infowindow = new google.maps.InfoWindow();
...
function createMarker(...) {
var marker = new google.maps.Marker({
     ...,
     descrip: infowindowHtmlContent  
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setOptions({
        content: this.descrip,
        maxWidth:300
    });
    infowindow.open(map, marker);
});

Comments

यह वास्तव में सुरुचिपूर्ण है - केवल एक ही infowindow का उपयोग करके और सामग्री को बदलने से पहले वाले को ट्रैक / बंद रखने से बचा जाता है।

— निक एफ

यह समाधान वास्तव में बहुत ही सुंदर है और आकर्षण की तरह काम करता है। +1

— सेबेस्टियन ब्रेइट

Answer 5

इस लिंक से http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ :

Teo: ऐसा करने का सबसे आसान तरीका है InfoWindow ऑब्जेक्ट का केवल एक उदाहरण है जिसे आप बार-बार उपयोग करते हैं। इस तरह से जब आप एक नए मार्कर पर क्लिक करते हैं तो इन्फोवॉन्ड "स्थानांतरित" होता है जहां से यह वर्तमान में है, नए मार्कर पर इंगित करने के लिए।

सही सामग्री के साथ इसे लोड करने के लिए इसकी सेट-अप विधि का उपयोग करें।

Comments

मुझे विश्वास नहीं है कि यह तब से लागू होता है जब मैं

— टेड

साथ ही, आपके द्वारा जोड़ा गया लेख 1 मार्कर से अधिक का प्रदर्शन नहीं करता है

— टेड

मैंने कई साइटों के लिए एक ही infowindow एक ही फैशन में उपयोग किया है। एक पर क्लिक करें, खुला एक अपने आप बंद हो जाता है।

— कीथ एडलर

आप एक एकल InfoWindow के साथ कई निशान कैसे जोड़ सकते हैं?

— टेड

Answer 6

सक्रिय विंडो के लिए एक चर घोषित करें

var activeInfoWindow; 

और इस कोड को मार्कर श्रोता में बांधें

 marker.addListener('click', function () {
    if (activeInfoWindow) { activeInfoWindow.close();}
    infowindow.open(map, marker);
    activeInfoWindow = infowindow;
});

Comments

धन्यवाद, यह वास्तव में नक्शे पर कहीं भी क्लिक करने पर काम करता है।

— वरिंदर सिंह बैदवान

चियर्स दोस्त, सभी सुझावों में से, इसने मेरे लिए सबसे अच्छा काम किया और स्वच्छ वायुसेना है।

— मैथ्यू एलिस

Answer 7

पास () फ़ंक्शन का उपयोग करने के अलावा एक आसान तरीका है। यदि आप InfoWindow प्रॉपर्टी के साथ एक वैरिएबल बनाते हैं तो दूसरे को खोलने पर यह अपने आप बंद हो जाता है।

var info_window;
var map;
var chicago = new google.maps.LatLng(33.84659, -84.35686);

function initialize() {
    var mapOptions = {
        center: chicago,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    info_window = new google.maps.InfoWindow({
        content: 'loading'
    )};

createLocationOnMap('Location Name 1', new google.maps.LatLng(33.84659, -84.35686), '<p><strong>Location Name 1</strong><br/>Address 1</p>');
createLocationOnMap('Location Name 2', new google.maps.LatLng(33.84625, -84.36212), '<p><strong>Location Name 1</strong><br/>Address 2</p>');

}

function createLocationOnMap(titulo, posicao, conteudo) {            
    var m = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        title: titulo,
        position: posicao,
        html: conteudo
    });            

    google.maps.event.addListener(m, 'click', function () {                
        info_window.setContent(this.html);
        info_window.open(map, this);
    });
}

Answer 8

var map;
var infowindow;
...
function createMarker(...) {
    var marker = new google.maps.Marker({...});
    google.maps.event.addListener(marker, 'click', function() {
        ...
        if (infowindow) {
            infowindow.close();
        };
        infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 300
        });
        infowindow.open(map, marker);
    }
...
function initialize() {
    ...
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    ...
    google.maps.event.addListener(map, 'click', function(event) {
        if (infowindow) {
            infowindow.close();
        };
        ...
    }
}

Comments

थैंक्स, मुझे इन्फॉइंडो को बंद करने की जरूरत थी जब मैप पर सिर्फ एक मार्कर क्लिक नहीं किया गया

— वीआरसी

Answer 9

कैसा रहेगा -

google.maps.event.addListener(yourMarker, 'mouseover', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

google.maps.event.addListener(yourMarker, 'mouseout', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

फिर आप बस उस पर मंडरा सकते हैं और यह खुद को बंद कर देगा।

Comments

यह एक दिलचस्प बदलाव है, लेकिन यह सवाल का जवाब नहीं देता है और केवल उपकरणों पर काम नहीं करेगा।

— ली

Answer 10

मैंने शीर्ष पर एक चर संग्रहीत किया है, जिस पर जानकारी विंडो वर्तमान में खुली है, नीचे देखने के लिए।

var currentInfoWin = null;
google.maps.event.addListener(markers[counter], 'click', function() {      
    if (currentInfoWin !== null) {
        currentInfoWin.close(map, this); 
    }
    this.infoWin.open(map, this); 
    currentInfoWin = this.infoWin;  
}); 

Comments

[काउंटर] यहां क्या कर रहा है?

— ली

Answer 11

यदि आप लूप के लिए कई मार्करों का उपयोग कर रहे हैं तो यहां मैंने वही उपयोग किया है (Django यहाँ)। आप प्रत्येक मार्कर पर एक इंडेक्स सेट कर सकते हैं और हर बार विंडो खोलने पर उस इंडेक्स को सेट कर सकते हैं। पहले से सहेजे गए सूचकांक को बंद करना:

markers = Array();
infoWindows = Array();
var prev_infowindow =false;
{% for obj in objects %}
var contentString = 'your content'
var infowindow = new google.maps.InfoWindow({
            content: contentString,
          });
var marker = new google.maps.Marker({
               position: {lat: {{ obj.lat }}, lng: {{ obj.lon }}},
               map: map,
               title: '{{ obj.name }}',
               infoWindowIndex : {{ forloop.counter0 }}
          });
google.maps.event.addListener(marker, 'click',
            function(event)
            {
           if( prev_infowindow ) {
               infoWindows[prev_infowindow].close();
                }
                prev_infowindow = this.infoWindowIndex;
                infoWindows[this.infoWindowIndex].open(map, this);
            }
        );

        infoWindows.push(infowindow);
        markers.push(marker);

      {% endfor %}

Answer 12

var contentString = "Location: " + results[1].formatted_address;    
google.maps.event.addListener(marker,'click', (function(){ 
    infowindow.close();
    infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    infowindow.open(map, marker);
}));