Work with native infoWindows of interesting places in google maps api

匿名 (未验证) 提交于 2019-12-03 08:33:39

问题:

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.

回答1:

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/.



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!