0

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:

small markers on the map

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

infoWindow with locality info

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

3

1 Answer 1

0

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

5
  • Does this still work? I'm trying the fiddles and can't see anything different to the normal PoI InfoWindows...
    – Fat Monk
    Oct 18, 2016 at 16:26
  • This works as earlier, they just updated design and changed class names. Here's the updated version, jsfiddle.net/kasheftin/935Km/119
    – Kasheftin
    Oct 19, 2016 at 9:00
  • That fiddle looks very close but seems to add an additional 'Add to map' to each InfoWindow each time an InfoWindow is opened. Ie the first PoI clicked has an InfoWindow with 1 'Add To Map' added bottom right, the second PoI clicked has 2 x 'Add to map', the third 3 x etc... (I'm looking on a phone right now so can't easily try tweaking the code myself to fix that)
    – Fat Monk
    Oct 19, 2016 at 19:32
  • Yes, you are right. I added the second flag externalLinkAlreadyAdded, now it works as earlier, jsfiddle.net/kasheftin/935Km/121.
    – Kasheftin
    Oct 19, 2016 at 19:47
  • None of the fiddle's seem to address the OP? Not sure what is being done.
    – Kalnode
    Jan 23, 2018 at 15:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.