InfoWindow

Question

की ऊंचाई का आकार बदलने के लिए Google मानचित्र v3 प्राप्त करें जब मैं मार्कर पर क्लिक करता हूं और InfoWindow प्रकट होता है, तो सामग्री की लंबाई लंबे समय तक InfoWindow डिफ़ॉल्ट ऊंचाई (90px) है, तो ऊंचाई समायोजित नहीं होती है।

• मैं केवल पाठ का उपयोग कर रहा हूं, कोई छवि नहीं।
• मैंने maxWidth को आजमाया है।
• मैंने विरासत में सीएसएस की जांच की है।
• मैंने अपनी सामग्री को div में लपेट लिया है और ऊंचाई सहित मेरे सीएसएस को लागू किया है।
• मैंने इन्फोविंडो को InfoWindow पर डोमरेड ईवेंट का उपयोग करके jQuery के साथ आकार बदलने के लिए भी कोशिश की है।

मेरे पास केवल कुछ बाल शेष हैं। यहां मेरा जेएस है:

var geocoder; 
var map; 
var marker; 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(41.8801,-87.6272); 
    var myOptions = { 
    zoom: 13, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

function codeAddress(infotext,address) { 
    geocoder.geocode({ 'address': address }, function (results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var image = '/path-to/mapMarker.png'; 
     var infowindow = new google.maps.InfoWindow({ content: infotext, maxWidth: 200 }); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: results[0].geometry.location, 
     icon: image 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map, marker); 
     }); 
    } 
    }); 

} 

function checkZipcode(reqZip) { 

    if (/[0-9]{5}/.test(reqZip)) { 

    $.ajax({ 
     url: 'data.aspx?zip=' + reqZip, 
     dataType: 'json', 
     success: function(results) { 

     $.each(results.products.product, function() { 

      var display = "<span id='bubble-marker'><strong>"+this.name+"</strong><br>"+ 
         this.address+"<br>"+ 
         this.city+", "+this.state+" "+this.zip+"<br>"+ 
         this.phone+"</span>"; 

      var address = this.address+","+ 
         this.city+","+ 
         this.state+","+ 
         this.zip; 

      codeAddress(display,address); 

     }); 

     }, 
     error: function() { $('#information-bar').text('fail'); } 
    }); 

    } else { $('#information-bar').text('Zip codes are five digit numbers.'); } 

} 

$('#check-zip').click(function() { $('#information-bar').text(''); checkZipcode($('#requested-zipcode').val()); }); 

initialize(); 

InfoText और पता किसी XML फ़ाइल की AJAX क्वेरी से आते हैं। डेटा मुद्दा नहीं है, क्योंकि यह हमेशा सही तरीके से आता है। कोड एड्रेस() को डेटा पुनर्प्राप्त करने और स्वरूपित करने के बाद बुलाया जाता है। फ़ाइल में

एचटीएमएल: मेरे InfoWindow सामग्री के लिए

<div id="google_map"> <div id="map_canvas" style="width:279px; height:178px"></div> </div> 

सीएसएस (कोई अन्य सीएसएस मानचित्र पर लागू होता है):

#bubble-marker{ font-size:11px; line-height:15px; } 

Answer 1

आपका नक्शा कैनवास बहुत छोटा है। अपने <div id="map_canvas"> तत्व की चौड़ाई/ऊंचाई बढ़ाएं और आपको स्वचालित रूप से बड़ी जानकारी दिखाई देनी चाहिए।

उसने कहा, मुझे एक साइट पर एक ही समस्या थी जो मैं बना रहा था। मैंने इसे एक विन्डन डिवी बनाकर हलवाइंडो सामग्री बनाकर हल किया, जो कि div की चौड़ाई और ऊंचाई को मापता है, और उसके बाद उस जानकारी को चौड़ाई और ऊंचाई के लिए InfoWindow सामग्री div सेट करता है। यहाँ मेरी कोड अपने codeAddress समारोह के बीच में स्थलांतरित है (यह भी ध्यान दें कि मैं अपने InfoWindow घोषणा से maxWidth: 200 हटाया):

function codeAddress(infotext,address) { 
    geocoder.geocode({ 'address': address }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 

      // Create temporary div off to the side, containing infotext: 
      var $cloneInfotext = $('<div>' + infotext + '</div>') 
       .css({marginLeft: '-9999px', position: 'absolute'}) 
       .appendTo($('body')); 

      // Wrap infotext with a div that has an explicit width and height, 
      // found by measuring the temporary div: 
      infotext = '<div style="width: ' + $cloneInfotext.width() + 'px; ' + 
       'height: ' + $cloneInfotext.height() + 'px">' + infotext + 
       '</div>'; 

      // Delete the temporary div: 
      $cloneInfotext.remove(); 

      // Note no maxWidth defined here: 
      var infowindow = new google.maps.InfoWindow({ content: infotext }); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map, marker); 
      }); 
     } 
    }); 
} 

Answer 2

मैं अंत में समस्या के लिए एक काम कर समाधान मिल गया। जैसा कि मैंने कामना की उतनी लचीली नहीं है, लेकिन यह बहुत अच्छी है। मूल रूप से मुख्य बिंदु यह है: एक स्ट्रिंग का उपयोग विंडो सामग्री के रूप में नहीं करें बल्कि इसके बजाय एक डोम नोड। यह मेरा कोड है:

div.map-popup { 
    overflow: auto; 
    overflow-x: hidden; 
    overflow-y: auto; 
} 

ps: "उदाहरण" google.maps की वर्तमान कस्टम उपवर्ग को संदर्भित करता है

// this dom node will act as wrapper for our content 
var wrapper = document.createElement("div"); 

// inject markup into the wrapper 
wrapper.innerHTML = myMethodToGetMarkup(); 

// style containing overflow declarations 
wrapper.className = "map-popup"; 

// fixed height only :P 
wrapper.style.height = "60px"; 

// initialize the window using wrapper node  
var popup = new google.maps.InfoWindow({content: wrapper}); 

// open the window 
popup.open(map, instance); 

निम्नलिखित सीएसएस घोषणा है।OverlayView (जो मैं विस्तार कर रहा हूं)

Answer 3

बस आपको पैडिंग-तल के साथ DIV के साथ InfoBox सामग्री को लपेटें: 30px;

जे एस:

map_info_window = new google.maps.InfoWindow();  
var $content = $('<div class="infobox">').html(content); 
map_info_window.setContent($content.get(0)); 
map_info_window.open(map, marker); 

सीएसएस:

.infobox{ 
    padding-bottom: 30px; 
} 

Answer 4

बस एक div के साथ अपनी सामग्री लपेट और यह ऊंचाई है निर्दिष्ट करें: <div style="height:60px">...</div>, उदा

myMarker.setContent('<div style="height:60px">' + txt + '</div>'); 

- मेरे मामले में यह काफी पर्याप्त था।

Answer 5

यह वास्तव में एक उत्तर नहीं है (डीओएम नोड बनाने के लिए डेवोनकोड का समाधान और इसे सामग्री के रूप में उपयोग करने के लिए सही है), लेकिन यदि आपको एक बार सेट (जैसे jQuery के साथ) गतिशील रूप से बदलने की आवश्यकता है तो आप जीमेल को आकार बदलने के लिए मजबूर कर सकते हैं infoWindow के साथ:

infoWindowLinea.setContent(infoWindowLinea.getContent());