স্টাইলিং গুগল ম্যাপ ইনফো উইন্ডো

Question

আমি আমার গুগল ম্যাপের স্টাইল করার চেষ্টা করছি InfoWindow, তবে ডকুমেন্টেশন এই বিষয়টিতে খুব সীমাবদ্ধ। আপনি কিভাবে স্টাইল করবেন InfoWindow?

Answer 1

গুগল এটিকে সহায়তা করার জন্য কিছু কোড লিখেছিল। এখানে কয়েকটি উদাহরণ রয়েছে: ইনফোবল , স্টাইলযুক্ত চিহ্নিতকারী এবং তথ্য উইন্ডো কাস্টম (ওভারলে ভিউ ব্যবহার করে) ব্যবহার করে উদাহরণ।

উপরের লিঙ্কগুলির কোড অনুরূপ ফলাফল অর্জন করতে বিভিন্ন রুট নেয়। এর সংক্ষিপ্তসারটি হ'ল সরাসরি তথ্যউইন্ডোগুলি স্টাইল করা সহজ নয় এবং ইনফো উইন্ডোর পরিবর্তে অতিরিক্ত ইনফোব্লু ক্লাস ব্যবহার করা বা GOverlay ওভাররাইড করা সহজতর হতে পারে। অন্য বিকল্পটি জাভাস্ক্রিপ্ট (বা jQuery) ব্যবহার করে ইনফো উইন্ডোর উপাদানগুলিকে সংশোধন করা হবে, যেমন এটিএটিওএসটিওএর পরামর্শ অনুসারে।

সম্ভবত এই উদাহরণগুলির মধ্যে সহজতম তথ্যটি ইনফো উইন্ডোর পরিবর্তে ইনফোবল ব্যবহার করছে। ইনফোব্বল এই ফাইলটি আমদানির মাধ্যমে উপলব্ধ (যা আপনার নিজের হোস্ট করা উচিত):http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

ইনফোব্বলের গিথুব প্রকল্প পৃষ্ঠা ।

ইনফো উইন্ডোর সাথে তুলনা করে ইনফোব্বলটি খুব স্টাইলযোগ্য:

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

অন্য উদাহরণ হিসাবে, তথ্য উইন্ডো কাস্টম উদাহরণটি গুগল ম্যাপস এপিআই থেকে গোভার্লে ক্লাস প্রসারিত করে এবং এটি আরও নমনীয় তথ্য উইন্ডো তৈরির জন্য বেস হিসাবে ব্যবহার করে। এটি প্রথমে শ্রেণি তৈরি করে:

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

যার পরে এটি গোভারলে ওভাররাইডে এগিয়ে যায়:

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

তারপর আপনি পদ্ধতি আপনি প্রয়োজন ওভাররাইড করা উচিত: createElement, draw, removeএবং panMap। এটি বরং জড়িত হয়, তবে তাত্ত্বিকভাবে আপনি সাধারণ তথ্য উইন্ডোটি ব্যবহার না করে এখন নিজেই মানচিত্রে একটি ডিভ আঁকছেন।

Comments

@ শ্যামক এখানে কেএমএল তথ্য উইন্ডো স্টাইলিং সম্পর্কিত একটি প্রশ্ন রয়েছে যা আপনাকে সাহায্য করতে পারে। আমি মনে করি আমার উত্তরের উদাহরণগুলির অনেকগুলি কেএমএল-এর জন্য প্রযোজ্য নাও হতে পারে (আমি নিশ্চিত নই) তবে সহজেই সেই ক্ষেত্রেও কাজ করার জন্য সামঞ্জস্য করা যেতে পারে।

— হারমান স্কাফ

এটি লক্ষ করা উচিত যে এখানে আপনার লিঙ্কগুলির একটি হ'ল ইনফোবক্স অবজেক্টের (অন্য ধরণের তথ্য উইন্ডোর) উদাহরণ এবং না ইনফো উইন্ডো অবজেক্ট (মূল গুগল তথ্য উইন্ডো)। আপনি যদি এটি গুগল করছেন এবং আপনি কেন নতুন ইনফোবক্স () এবং নতুন ইনফো উইন্ডো () খুঁজে পাচ্ছেন তা সম্পর্কে বিভ্রান্ত হচ্ছেন কিনা তা জানা ভাল। ইনফোবক্স একটি নতুন এবং আইএমও কাস্টমাইজ করা সহজ এবং আপনি কাস্টমাইজ করতে পারেন আরও অনেক কিছু। এর অন্য একটি উদাহরণও এই এসও উত্তরে

— ডন ভন

ওহ, না, শেষেরটিও নয়: এটিও তথ্যবক্স সম্পর্কে।

— মাত্তেও

খুব ভাল, আমি যা খুঁজছিলাম তা হল, তবে কীভাবে আমি একটি বোতাম বন্ধ করব?

— ইউসুফ 1494

Answer 2

আপনি একা jquery ব্যবহার করে পুরো ইনফরমোটি সংশোধন করতে পারেন ...

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

এখানে <p> উপাদানটি আসল ইনফো উইন্ডোতে হুক হিসাবে কাজ করবে। ডমডিয়ার আগুন জ্বলে গেলে, উপাদানটি জাভাস্ক্রিপ্ট / জ্যাকুয়েরি, পছন্দ মতো ব্যবহার করে সক্রিয় এবং অ্যাক্সেসযোগ্য হয়ে উঠবে $('#hook').parent().parent().parent().parent()।

নীচের কোডটি কেবল ইনফো উইন্ডোর চারপাশে একটি 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

এটি আমার জন্য (একটি কম পিতা-মাতার সাথে) কাজ করে এবং অ্যাকোর্স ব্রাউজারগুলি (অপেরা, এফএফ, অর্থাত্, সাফারি, ক্রোম) কাজ করে তবে আই 9 এর নীচে কাজ করে না।

— জনহিতুর

কিছু অতিরিক্ত কোড অন্তর্ভুক্ত করার জন্য প্রপস যা আমি কীভাবে ব্যবহার করব তা খুঁজছিলাম। ধন্যবাদ

— ধাতবফিনিক্স

আমি যখন ডকুমেন্টে (প্রস্তুত) উইন্ডোতে (লোড) অন্তর্ভুক্ত করব বা পৃষ্ঠাটি লোড হয়ে গেলে আমি সরাসরি কনসোলে পেস্ট করি তবে 'পপআপ সংজ্ঞায়িত হয় না' getting আমি কি কোনও বাহ্যিক জেএস ফাইল বা কিছু মিস করছি?

— ব্যবহারকারী 1380540

গুগল ম্যাপের রেন্ডারিং লজিক চিরস্থায়ী না হওয়ায় এটি ভাল ধারণা নয়। পরিবর্তে পপআপগুলি ব্যবহার করুন: developers.google.com/maps/docamentation/javascript/example/…

— আলী শেখপুর

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

// স্টাইলশিটে সিএসএস লাগানো

.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 ক্লিক করতে হবে

— সিপিসিদেব

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

— ক্লাইড লোবো

Answer 4

কিছু বাহ্যিক সিএসএস প্রয়োগ করতে আমি নিম্নলিখিত কোডটি ব্যবহার করেছি:

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-style> div> div: nth-child (3)> div: nth-child (4)> div> div> div: nth-child (2)

— using

Answer 5

গুগল ম্যাপস ইউটিলিটি লাইব্রেরি থেকে ইনফোবক্স প্লাগইন ব্যবহার করুন । এটি স্টাইলিং / ম্যাপের পপ-আপগুলি পরিচালনা করা আরও সহজ করে তোলে।

নোট করুন যে আপনাকে গুগল ম্যাপস এপিআইয়ের পরে এটি লোড হচ্ছে তা নিশ্চিত করতে হবে :

<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

আমার কাছে ডিজিটাল গুগল ম্যাপের ইনফাইন্ডো রয়েছে চিত্র সহ এবং নীচের মত কিছু সামগ্রী।

মানচিত্র_স্ক্রিপ্ট (কেবল এইচটিএমএল রেফারেন্সের জন্য)

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

ধন্যবাদ! সিএসএস কাজ করেনি তবে এটি সহজেই বিকাশকারী সরঞ্জামগুলি ব্যবহার করে এবং সরাসরি ক্লাসে গিয়ে ..gm- স্টাইলের জিনিসটির প্রয়োজন হয় না।

— ব্যবহারকারী 2060451

Answer 7

আপনিও একটি CSS ক্লাস ব্যবহার করতে পারেন।

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

শুভ দিন!