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 solution of http://stackoverflow.com/questions/7950030/can-i-remove-just-the-popup-bubbles-of-pois-in-google-maps-api-v3/11929651


//------------------------------------------
//Magic fix:
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);
  }
}


//------------------------------------------
//our application:

function helloWorld() {
  var latlng = new google.maps.LatLng(-34.398, 150.650);
  var myOptions = {
    zoom: 9,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var popup = new google.maps.InfoWindow({
    content: 'Okay...',
    noSupress: true //<-- here we tell InfoWindow to bypass our blocker
  });
  popup.setPosition(new google.maps.LatLng(-34.397, 150.644));

  $('.btn-open').click(function() {
    popup.open(map);
  });

}




//applying our hack
fixInfoWindow();

//running map application
helloWorld();

html {
  height: 100%
}

body {
  height: 100%;
  margin: 0px;
  padding: 0px
}

#map_canvas {
  height: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<button class="btn-open">Open...</button>
<div id="map_canvas" style="position:absolute; display:block; top:40px; bottom:0; left:0; right:0;"></div>

---

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

var addDebugToPrototype = function(pr) {
  for (var i in pr) {
    if (typeof pr[i] == "function") {
      (function(i) {
        var origMethod = pr[i];
        pr[i] = function(a, b, c, d, e, f, g, h) {
          console.log("InsertedDebug", i, this, arguments);
          return origMethod.apply(this, arguments);
        }
      })(i);
    }
  }
}

function helloWorld() {
  var latlng = new google.maps.LatLng(50, 20);
  var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), myOptions);
}

addDebugToPrototype(google.maps.InfoWindow.prototype);
helloWorld();

html,
body,
.map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" class="map"></div>

---

Latest JS Fiddle (as mentioned in the comments) : https://jsfiddle.net/kasheftin/935Km/121/

//the solution of http://stackoverflow.com/questions/7950030/can-i-remove-just-the-popup-bubbles-of-pois-in-google-maps-api-v3/11929651


//------------------------------------------
//Magic fix:
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") && !this.get("externalLinkAlreadyAdded")) {
        var link = $("<a href='#'>add to map</a>");
        link.click(function() {
          console.log("link clicked", self, self.getContent(), self.content);
        });
        $(this.content).find("div.view-link").append($("<div style='float:right;'></div>").append(link));
        this.set("externalLinkAlreadyAdded", true);
      }
    }
    set.apply(this, arguments);
  }
}


//------------------------------------------
//our application:

function helloWorld() {
  var latlng = new google.maps.LatLng(-34.398, 150.650);
  var myOptions = {
    zoom: 9,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var popup = new google.maps.InfoWindow({
    content: 'Okay...',
    noSupress: true //<-- here we tell InfoWindow to bypass our blocker
  });
  popup.setPosition(new google.maps.LatLng(-34.397, 150.644));

  $('.btn-open').click(function() {
    popup.open(map);
  });

}




//applying our hack
fixInfoWindow();

//running map application
helloWorld();

html {
  height: 100%
}

body {
  height: 100%;
  margin: 0px;
  padding: 0px
}

#map_canvas {
  height: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<button class="btn-open">Open...</button>
<div id="map_canvas" style="position:absolute; display:block; top:40px; bottom:0; left:0; right:0;"></div>