在Google地图API中使用本地infoWindows中有趣的地方 [英] Work with native infoWindows of interesting places in google maps api

问题描述

我不知道它是如何被调用的，所以这里是屏幕。任何嵌入API的地图都有这些带有餐厅，酒店和其他当地人的小标记： b

当用户点击某些图标时，会显示包含说明，电话，链接和评分的美容信息窗口： p>

那么这是什么以及如何使用它？我想用自己的控件更新这些信息窗口。

解决方案

我找到了完全解决这个问题的答案。这里是：我可以在Google Maps API v3中只删除POI的弹出式气泡吗？。
这是关于删除POI的infoWindows，但可以用相同的方式获得HTML代码，追加自己的控件等等。

我们必须重新定义google。 maps.InfoWindow.set方法。例如，在这里我给POI的infoWindow插入了一个按钮：

$ p $函数fixInfoWindow（）{
//这里我们重新定义set（）方法。
//如果调用map选项，我们会隐藏InfoWindow，如果noSupress选项不是true。
//由于Google不知道这个选项，所以它的InfoWindows不会被打开。
var set = google.maps.InfoWindow.prototype.set;
google.maps.InfoWindow.prototype.set = function（key，val）{
var self = this;
if（key ===map）{
if（！this.get（noSupress））{
var link = $（< a href ='＃' >添加到地图< / a>）;
link.click（function（）{
console.log（link clicked，self，self.getContent（），self.content）;
}）;
$（this.content）.find（div.gm-rev）。append（$（< div style ='float：right;'>< / div>链接））;
}
}
set.apply（this，arguments）;
}
}

http://jsfiddle.net/kasheftin/935Km/ - 这里有一个工作示例，在右下角添加一个添加到地图按钮POI infoWindow。

我们可以将日志记录添加到任何方法并观察用户点击POI标记时发生的事件调用堆栈： http://jsfiddle.net/kasheftin/935Km/1/ 。

I don't know how it's called, so here are the screens. Any map, embedded with API, has these small markers with restaurants, hotels and other locals:

When user clicks on some, there's beauty infoWindow with description, phone, link and rating:

So what is this and how to work with this? I want to update these infoWindows with my own controls.

解决方案

I've found the answer that solves this task completely. Here it is: Can I remove just the popup bubbles of POI's in Google Maps API v3?. It's about removing POI's infoWindows, but the same way it's possible to do get HTML code, append own controls and so on.

We have to redefine google.maps.InfoWindow.set method. For example, here I inserted a button to POI's infoWindow:

function fixInfoWindow() {
  //Here we redefine set() method.
  //If it is called for map option, we hide InfoWindow, if "noSupress" option isnt true.
  //As Google doesn't know about this option, its InfoWindows will not be opened.
  var set = google.maps.InfoWindow.prototype.set;
  google.maps.InfoWindow.prototype.set = function (key, val) {
    var self = this;
    if (key === "map") {
      if (!this.get("noSupress")) {
        var link = $("<a href='#'>add to map</a>");
        link.click(function() {
          console.log("link clicked",self,self.getContent(),self.content);
        });
      $(this.content).find("div.gm-rev").append($("<div style='float:right;'></div>").append(link));
      }
    }
    set.apply(this, arguments);
  }
}

http://jsfiddle.net/kasheftin/935Km/ - here's the working example with an additional "add to map" button at the right bottom side of POI infoWindow.

The similar way we can add logging to any method and watch the call stack of events that happen when user clicks on POI marker: http://jsfiddle.net/kasheftin/935Km/1/.

这篇关于在Google地图API中使用本地infoWindows中有趣的地方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！