स्टाइलिंग गूगल मैप्स InfoWindow

Question

मैं अपने Google मानचित्र को स्टाइल करने का प्रयास कर रहा हूं InfoWindow, लेकिन इस विषय पर प्रलेखन बहुत सीमित है। आप एक शैली कैसे करते हैं InfoWindow?

Answer 1

Google ने इससे सहायता के लिए कुछ कोड लिखे। यहां कुछ उदाहरण दिए गए हैं: InfoBubble , स्टाइल मार्कर और इन्फो विंडो कस्टम ( OverlayView का उपयोग करके) का उपयोग करके उदाहरण ।

उपरोक्त लिंक में कोड समान परिणाम प्राप्त करने के लिए अलग-अलग मार्ग लेते हैं। इसका सार यह है कि InfoWindows को सीधे स्टाइल करना आसान नहीं है, और InfoWindow के बजाय अतिरिक्त InfoBubble क्लास का उपयोग करना या Goverlay को ओवरराइड करना आसान हो सकता है। एक अन्य विकल्प यह होगा कि InfoWindow के तत्वों को जावास्क्रिप्ट (या jQuery) का उपयोग करके संशोधित किया जाए, जैसे कि बाद में ATOzTOI ने सुझाव दिया था।

संभवतः इन उदाहरणों में से सबसे सरल InfoWindow के बजाय InfoBubble का उपयोग कर रहा है। InfoBubble इस फ़ाइल को आयात करके उपलब्ध है (जिसे आपको स्वयं होस्ट करना चाहिए):http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

InfoBubble का Github प्रोजेक्ट पेज ।

InfoWindow की तुलना में InfoBubble बहुत ही शैलीगत है:

 infoBubble = new InfoBubble({
      map: map,
      content: '<div class="mylabel">The label</div>',
      position: new google.maps.LatLng(-32.0, 149.0),
      shadowStyle: 1,
      padding: 0,
      backgroundColor: 'rgb(57,57,57)',
      borderRadius: 5,
      arrowSize: 10,
      borderWidth: 1,
      borderColor: '#2c2c2c',
      disableAutoPan: true,
      hideCloseButton: true,
      arrowPosition: 30,
      backgroundClassName: 'transparent',
      arrowStyle: 2
});

infoBubble.open();

आप इसे खोलने के लिए दिए गए नक्शे और मार्कर के साथ भी कॉल कर सकते हैं:

infoBubble.open(map, marker);

एक अन्य उदाहरण के रूप में, इन्फो विंडो कस्टम उदाहरण Google मैप्स एपीआई से गोवर्ले वर्ग का विस्तार करता है और इसे अधिक लचीली जानकारी विंडो बनाने के लिए एक आधार के रूप में उपयोग करता है। यह पहले वर्ग बनाता है:

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  this.offsetVertical_ = -195;
  this.offsetHorizontal_ = 0;
  this.height_ = 165;
  this.width_ = 266;

  var me = this;
  this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
      return me.panMap.apply(me);
    });

  // Once the properties of this OverlayView are initialized, set its map so
  // that we can display it.  This will trigger calls to panes_changed and
  // draw.
  this.setMap(this.map_);
}

जिसके बाद यह GOverlay को ओवरराइड करने के लिए आगे बढ़ता है:

InfoBox.prototype = new google.maps.OverlayView();

फिर आप तरीकों की जरूरत ओवरराइड करना चाहिए: createElement, draw, removeऔर panMap। यह बल्कि शामिल हो जाता है, लेकिन सिद्धांत रूप में आप एक सामान्य जानकारी विंडो का उपयोग करने के बजाय, नक्शे पर खुद को अब एक div आरेखण कर रहे हैं।

Comments

@ShyamK यहां KML जानकारी विंडो को स्टाइल करने से संबंधित प्रश्न है , जो आपकी मदद कर सकता है। मुझे लगता है कि मेरे उत्तर में कई उदाहरण केएमएल पर लागू नहीं होंगे (मुझे यकीन नहीं है), लेकिन उस मामले में भी काम करने के लिए आसानी से समायोजित किया जा सकता है।

— हरमन शेफ

यह ध्यान दिया जाना चाहिए कि यहाँ आपका एक लिंक InfoBox ऑब्जेक्ट (अन्य प्रकार की जानकारी विंडो) के उदाहरण हैं न कि InfoWindow ऑब्जेक्ट (मूल Google जानकारी विंडो)। यह जानने के लिए अच्छा है कि क्या आप इसे गुगली कर रहे हैं और शायद इस बात से भ्रमित हैं कि आप नई InfoBox () और नई InfoWindow () क्यों ढूंढ सकते हैं। InfoBox नया है और IMO को अनुकूलित करना आसान है और बहुत कुछ है जिसे आप अनुकूलित कर सकते हैं। इसका एक और उदाहरण इस SO उत्तर

— डॉन वॉन

ओह, नहीं, पिछले एक न तो: कि जानकारी बॉक्स के बारे में भी है।

— मैटियो

अच्छा, यह वही है जिसकी मुझे तलाश है, btw मैं एक बटन कैसे जोड़ूँ?

— युसुफ १४

Answer 2

आप अकेले jquery का उपयोग करके पूरे InfoWindow को संशोधित कर सकते हैं ...

var popup = new google.maps.InfoWindow({
    content:'<p id="hook">Hello World!</p>'
});

यहां <p> तत्व वास्तविक InfoWindow में एक हुक के रूप में कार्य करेगा। एक बार पहले से ही आग लगने के बाद, तत्व जावास्क्रिप्ट / jquery, जैसे का उपयोग करके सक्रिय और सुलभ हो जाएगा $('#hook').parent().parent().parent().parent()।

नीचे दिए गए कोड में InfoWindow के चारों ओर 2 पिक्सेल की सीमा निर्धारित है।

google.maps.event.addListener(popup, 'domready', function() {
    var l = $('#hook').parent().parent().parent().siblings();
    for (var i = 0; i < l.length; i++) {
        if($(l[i]).css('z-index') == 'auto') {
            $(l[i]).css('border-radius', '16px 16px 16px 16px');
            $(l[i]).css('border', '2px solid red');
        }
    }
});

आप कुछ भी कर सकते हैं जैसे एक नया सीएसएस वर्ग स्थापित करना या केवल एक नया तत्व जोड़ना।

तत्वों के साथ खेलने के लिए आप क्या चाहते हैं ...

Comments

यह मेरे लिए (एक कम माता-पिता के साथ) काम करता है, और एकोर्स ब्राउज़र (ओपेरा, एफएफ, यानी सफारी, क्रोम) काम करता है, लेकिन IE9 के नीचे काम नहीं करता है।

— जॉन्थप्रन्योर

कुछ अतिरिक्त कोड को शामिल करने के लिए प्रॉप्स जिन्हें मैं उपयोग करना चाहता था। धन्यवाद

— MetalPhoenix

जब मैं इसे दस्तावेज़ (तैयार), विंडो (लोड) में शामिल करता हूं या यदि पृष्ठ लोड होते ही मैं सीधे कंसोल में पेस्ट करता हूं, तो मुझे 'पॉपअप परिभाषित नहीं होता है' मिल रहा है। क्या मुझे बाहरी js फ़ाइल या कुछ याद आ रही है?

— user1380540

यह अच्छा विचार नहीं है क्योंकि Google मानचित्र रेंडरिंग लॉजिक्स सदा के लिए नहीं हैं। इसके बजाय पॉपअप का उपयोग करें: Developers.google.com/maps/documentation/javascript/examples/…

— अली शेखपुर

Answer 3

google.maps.event.addListener(infowindow, 'domready', function() {

    // Reference to the DIV that wraps the bottom of infowindow
    var iwOuter = $('.gm-style-iw');

    /* Since this div is in a position prior to .gm-div style-iw.
     * We use jQuery and create a iwBackground variable,
     * and took advantage of the existing reference .gm-style-iw for the previous div with .prev().
    */
    var iwBackground = iwOuter.prev();

    // Removes background shadow DIV
    iwBackground.children(':nth-child(2)').css({'display' : 'none'});

    // Removes white background DIV
    iwBackground.children(':nth-child(4)').css({'display' : 'none'});

    // Moves the infowindow 115px to the right.
    iwOuter.parent().parent().css({left: '115px'});

    // Moves the shadow of the arrow 76px to the left margin.
    iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

    // Moves the arrow 76px to the left margin.
    iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

    // Changes the desired tail shadow color.
    iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'});

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'});

    // If the content of infowindow not exceed the set maximum height, then the gradient is removed.
    if($('.iw-content').height() < 140){
      $('.iw-bottom-gradient').css({display: 'none'});
    }

    // The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value.
    iwCloseBtn.mouseout(function(){
      $(this).css({opacity: '1'});
    });
  });

// CSS को स्टाइलशीट में डाल दिया

.gm-style-iw {
  background-color: rgb(237, 28, 36);
    border: 1px solid rgba(72, 181, 233, 0.6);
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    color: rgb(255, 255, 255) !important;
    font-family: gothambook;
    text-align: center;
    top: 15px !important;
    width: 150px !important;
}

Comments

इस कोड में Chrome में पूंछ के साथ एक समस्या है। आपको सही स्थिति दिखाने के लिए पूंछ प्राप्त करने के लिए 2x पर क्लिक करना होगा

— cpcdev

En.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html

— क्लाइड लोबो

Answer 4

मैंने कुछ बाहरी CSS लागू करने के लिए निम्नलिखित कोड का उपयोग किया:

boxText = document.createElement("html");
boxText.innerHTML = "<head><link rel='stylesheet' href='style.css'/></head><body>[some html]<body>";

infowindow.setContent(boxText);
infowindow.open(map, marker);

Comments

मैं सीधे .gm- शैली> div> div: nth-child (3)> div: nth-child (4)> div> div> div: nth-child (2) {

— चार्ली-

Answer 5

Google मानचित्र उपयोगिता लाइब्रेरी से InfoBox प्लगइन का उपयोग करें । यह स्टाइल / मैपिंग पॉप-अप को बहुत आसान बनाता है।

ध्यान दें कि आपको Google मानचित्र API के बाद यह सुनिश्चित करना होगा कि यह लोड होता है:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script>
<script src="/js/infobox_packed.js" async defer></script>

Answer 6

मेरे पास चित्र के साथ Google मानचित्र infowindow और नीचे के अनुसार कुछ सामग्री है।

map_script (सिर्फ infowindow html संदर्भ के लिए)

for (i = 0; i < locations.length; i++) { 
    var latlng = new google.maps.LatLng(locations[i][1], locations[i][2]);
    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: "<?php echo plugins_url( 'assets/img/map-pin.png', ELEMENTOR_ES__FILE__ ); ?>"
    });

    var property_img = locations[i][6],
    title = locations[i][0],
    price = locations[i][3],
    bedrooms = locations[i][4],
    type = locations[i][5],
    listed_on = locations[i][7],
    prop_url = locations[i][8];

    content = "<div class='map_info_wrapper'><a href="+prop_url+"><div class='img_wrapper'><img src="+property_img+"></div>"+
    "<div class='property_content_wrap'>"+
    "<div class='property_title'>"+
    "<span>"+title+"</span>"+
    "</div>"+

    "<div class='property_price'>"+
    "<span>"+price+"</span>"+
    "</div>"+

    "<div class='property_bed_type'>"+
    "<span>"+bedrooms+"</span>"+
    "<ul><li>"+type+"</li></ul>"+
    "</div>"+

    "<div class='property_listed_date'>"+
    "<span>Listed on "+listed_on+"</span>"+
    "</div>"+
    "</div></a></div>";

    google.maps.event.addListener(marker, 'click', (function(marker, content, i) {
        return function() {
            infowindow.setContent(content);
            infowindow.open(map, marker);
        }
    })(marker, content, i));
}

सबसे महत्वपूर्ण बात सीएसएस है

 #propertymap .gm-style-iw{
    box-shadow:none;
    color:#515151;
    font-family: "Georgia", "Open Sans", Sans-serif;
    text-align: center;
    width: 100% !important;
    border-radius: 0;
    left: 0 !important;
    top: 20px !important;
}

 #propertymap .gm-style > div > div > div > div > div > div > div {
    background: none!important;
}

.gm-style > div > div > div > div > div > div > div:nth-child(2) {
     box-shadow: none!important;
}
 #propertymap .gm-style-iw > div > div{
    background: #FFF!important;
}

 #propertymap .gm-style-iw a{
    text-decoration: none;
}

 #propertymap .gm-style-iw > div{
    width: 245px !important
}

 #propertymap .gm-style-iw .img_wrapper {
    height: 150px;  
    overflow: hidden;
    width: 100%;
    text-align: center;
    margin: 0px auto;
}

 #propertymap .gm-style-iw .img_wrapper > img {
    width: 100%;
    height:auto;
}

 #propertymap .gm-style-iw .property_content_wrap {
    padding: 0px 20px;
}

 #propertymap .gm-style-iw .property_title{
    min-height: auto;
}

Comments

धन्यवाद! CSS काम नहीं करता था, लेकिन यह आसानी से डेवलपर टूल का उपयोग करके और सीधे वर्ग में जाकर किया गया था, .gm- शैली की चीज़ की कोई आवश्यकता नहीं है।

— user2060451

Answer 7

आप एक css क्लास भी इस्तेमाल कर सकते हैं।

$('#hook').parent().parent().parent().siblings().addClass("class_name");

अच्छा दिन!