InfoWindows on Markers in StreetView

Question

According to the Google documentation, when you create a marker on a gmap the marker is also 'copied' onto the StreetView version of the map.

However, onClick event binding are not copied (or at least don't appear to be), so I can't open the InfoWindow on the marker when in StreetView.

Ideally I'd actually be able to define different content for the StreetView version of the InfoWindow, but right now I can't even get the same InfoWindow to open.

I'm using code from the Google examples to create the InfoWindow binding on the main map markers as follows (wrapped in a function):

google.maps.event.clearListeners(marker,'click');
google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
//      infoWindow.open(map.getStreetView(), marker);
});

That commented line was my attempt to add the opener for the StreetView version of the marker, but it doesn't do anything.

Note: map is the map object, marker is the marker object and html contains the HTML string to be put into the InfoWindow. All of this works for the main map marker so it's mot a problem of null variables being passed or anything. The problem is only with getting the StreetView marker to pop it's InfoWindow when clicked.

---

Note that this is not a duplicate of Google Maps StreetView InfowIndows opening on map as this issue was due to a coding issue on my side and was solved using the steps in the accepted answer. The linked question refers to a change Google made to their API which broke some of this functionality or at least caused it to behave in an undesirable way.

Answer 1

My first error was that I was trying to display the same InfoWindow on both the map copy and the StreetView copy of the marker.

This is not allowed, and so creating a second instance of the InfoWindow fixed that problem.

In order to create two separate InfoWindows and attach them to the two copies of the same marker I had to modify my code somewhat.

The code above was from a function called bindInfoWindow() based on the code in the Google documentation. I modified this to include a parameter to specify either the map or the streetView object.

The next problem was that the clearListeners method was being called every time bindInfoWindow() was being called, effectively removing the onClick binding for the map copy of the marker.

I therefore moved the clearListeners call to outside of the function and call it before calling binInfoWindow().

The final function looks like below:

function bindInfoWindow(marker, mapOrStreetViewObject, infoWindowObject, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infoWindowObject.setContent(html);
        infoWindowObject.open(mapOrStreetViewObject, marker);
    });
}

This is then called with the sequence:

// Note that the mapObject and streetViewObject variables are defined elsewheer to point to the map nd streetView instances in use.

//Define the local variables that we'll use in the calls
var myMapInfoWindow = new google.maps.InfoWindow;
var mapInfoWindowHTML = 'some stuff';
var myStreetViewInfoWindow = new google.maps.InfoWindow;
var streetViewInfoWindowHTML = 'some stuff';

// Remove any existing listeners from the marker
google.maps.event.clearListeners(marker,'click');

// Bind the event for the map marker click
bindInfoWindow(markerObject, mapObject, myMapInfoWindow, mapInfoWindowHTML);
//Bind the event for the StreetView marker click
bindInfoWindow(markerObject, streetViewObjectObject, myStreetViewInfoWindow, streetViewInfoWindowHTML);

What is nice about this is that if you open an InfoWindow on the map, then open StreetView the same InfoWindow is already open on the Street View!

Answer 2

TL;DR

I was able to make it work with the following steps:

1. Have two (2) independent InfoWindows; one for the map, and one for the street view panorama
2. Explicitly define the value for InfoWindowOptions.position when instantiating the InfoWindows
3. Pass null as the argument to the anchor parameter of the InfoWindow.open() method

Example

// The geolocation point
var point = new google.maps.LatLng(10.5884708621,122.7016563883);

// The map
var map = new google.maps.Map(document.getElementById('map'), {
    center: point,
    zoom: 20,
    mapTypeId: "satellite",
});

// The marker
var marker = new google.maps.Marker({
    title: "Hello world!",
    position: point,
    label: {text:"hello",color:"#ffffffde",fontWeight:"bold",fontSize:"18px"},
    map: map
});

// The InfoWindow for the map view
var mapInfoWindow = new google.maps.InfoWindow({
    content: "foo",
    position: point // refer to step #2
});

// The InfoWindow for the street view
var streetViewPanoramaInfoWindow = new google.maps.InfoWindow({
    content: "bar",
    position: point, // refer to step #2
    disableAutoPan: true // optional but helpful
});

// The click event handler for the marker
marker.addListener('click', function() {
    var streetViewPanorama = map.getStreetView();

    // when streetview was engaged
    if(streetViewPanorama.getVisible()==true) {
        streetViewPanoramaInfoWindow.open(streetViewPanorama); // refer to step #3
    }
    // when normal aerial view was engaged
    else {
        mapInfoWindow.open(map); // refer to step #3
    }
});