样式化Google Maps InfoWindow

7 回答

• -1

  谷歌写了一些代码来帮助解决这个问题 . 以下是一些示例：Example using InfoBubble，Styled markers和Info Window Custom（使用OverlayView） .

  上面链接中的代码采用不同的路由来实现类似的结果 . 它的要点是直接设置InfoWindows的样式并不容易，使用额外的InfoBubble类而不是InfoWindow或覆盖GOverlay可能更容易 . 另一个选择是使用javascript（或jQuery）修改InfoWindow的元素，就像后来ATOzTOA建议的那样 .

  可能这些示例中最简单的是使用InfoBubble而不是InfoWindow . 通过导入此文件（您应该自己托管）可以使用InfoBubble： http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

  InfoBubble's Github project page .

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

  您也可以使用给定的 Map 和标记来打开它：

  infoBubble.open(map, marker);
  

  另一个例子是，Info Window Custom示例从Google Maps API扩展了GOverlay类，并将其用作创建更灵活的信息窗口的基础 . 它首先创建类：

  /* 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 . 它变得相当复杂，但理论上你现在只是自己在 Map 上画一个div，而不是使用普通的信息窗口 .

  回复于 2024-05-06T09:16:54+08:00
• 1

  您可以单独使用jquery修改整个InfoWindow ...

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

  这里<p>元素将充当实际InfoWindow的钩子 . 一旦domready触发，该元素将变为活动状态并可使用javascript / 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');
          }
      }
  });
  

  您可以执行任何操作，例如设置新的CSS类或只添加新元素 .

  玩弄元素来获得你需要的东西......

  回复于 2024-05-06T09:16:54+08:00
• 34

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

  回复于 2024-05-06T09:16:54+08:00
• 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);
  

  回复于 2024-05-06T09:16:54+08:00
• 3

  使用Google Maps Utility Library中的 InfoBox 插件 . 它使得样式/管理 Map 弹出窗口变得更加容易 .

  请注意，您需要确保在Google Maps 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>
  

  回复于 2024-05-06T09:16:54+08:00
• 0

  我有设计谷歌 Map 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));
  }
  

  最重要的是CSS

  #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;
  }
  

  回复于 2024-05-06T09:16:54+08:00
• 121

  你也可以使用css类 .

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

  美好的一天！

  回复于 2024-05-06T09:16:54+08:00