Work with native infoWindows of interesting places in google maps api

Question

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.

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