infoBoxes in StreetView? Or another way around this problem???

826 views
Skip to first unread message

Tim Blackburn

unread,
Feb 14, 2011, 12:34:52 PM2/14/11
to google-map...@googlegroups.com
Hi,

Apologies in advance if this has been covered elsewhere, I did a search but could not find anything relevant. And apologies again for not having a link to the map, it is currently under development in our Trunk, and not live yet on the Release Branch. However, I do not require any 'debugging' advice, so this shouldn't be a problem (I hope!)

I have a map with database generated markers and infoBox conents. I am using infoBoxes due to their higher styling flexibility. Everything is working, clustering, etc, except for street view - I only just discovered that you cannot display infoBoxes on there.

- Is it possible to display infoBoxes in StreetView yet?
- If not, does anyone know a snippet of code which would act as an 'if' statement. Ie, if mapType is 'RoadMap' display our classy infoBox, but if mapType is 'StreetView' display a boring unstyled infoWindow?
- I really need a way to display our information in StreetView as well, but if at all possible not to have to revert back to infoWindows across all mapTypes

Thanks a million to everyone in advance for any and all help you can offer a newbie Web Programmer intern who's under the pump from the tyranny of upper management!

Gary Little

unread,
Feb 15, 2011, 11:12:01 AM2/15/11
to Google Maps JavaScript API v3
It would be instructive to know how Google gets markers to appear
above the street view pane. If that is understood it might give
insight into how to force something in the floatPane (i.e., an infobox
or infowindow) to appear above the street view as well.

Marc Ridey

unread,
Feb 15, 2011, 5:32:20 PM2/15/11
to google-map...@googlegroups.com
The Map and StreetViewPanorama controls used the same logic to display markers, infowindows and overlays.
I.e. you can create an overlay like Label (see http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html)
and then load it into the StreetViewPanorama using:

var label = new Label();
label.setMap(panorama);

If you looks at the Maps API v3 reference, you will see that the setMap method for Marker, InfoWindow and Overlay has:


Also overlays can position themselves into any of the panes (see http://code.google.com/apis/maps/documentation/javascript/reference.html#MapPanes)

Hope this helps.

Marc

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.


Tim Blackburn

unread,
Feb 16, 2011, 7:24:12 AM2/16/11
to google-map...@googlegroups.com
Great, thanks Marc and Gary for your advice.

As it turns out it was rather simpler than I first thought - if I'd spent another hour researching before posting here I wound not have had to bother you guys at all. What I did was:

- Create a custom streetViewPanorama
- In the create Marker/InfoBox function I simply included a statement to also create markers bound this new panorama and also to create new infoWindows.
- And then just add the appropiate event listeners for in the StreetView/Panorama. And hey presto, I now have lovely RoadMap InfoBoxes and not so lovely StreetView InfoWindows, all displaying with the correct content and behaviour patterns.

Not as pretty as if I could have the infoBoxes in both layers, but until that functionality is added (if ever) to V3, it is an appropiate fix. If/When I have some more time on this project I'll come back and investigate your suggested 'overlay' fix Marc, however, due to time constraints I now have to start testing/bug hunting the code.

Thanks again guys!

Gary Little

unread,
Feb 16, 2011, 11:19:00 AM2/16/11
to Google Maps JavaScript API v3
Marc,

Does this mean that when you overlay a standard Street View window
over top of a Google Map (say by dropping the peg man on a street of
interest), some initialization code is called to iterate through all
the markers shown on the map and calls setMap on them to make them
appear in Street View as well?

Gary

On Feb 15, 2:32 pm, Marc Ridey <mri...@google.com> wrote:
> The Map and StreetViewPanorama controls used the same logic to display
> markers, infowindows and overlays.
> I.e. you can create an overlay like Label (seehttp://blog.mridey.com/2009/09/label-overlay-example-for-google-maps....)
> and then load it into the StreetViewPanorama using:
>
> var label = new Label();
> label.setMap(panorama);
>
> If you looks at the Maps API v3 reference, you will see that the setMap
> method for Marker, InfoWindow and Overlay has:
>
> setMap(map:Map<http://code.google.com/apis/maps/documentation/javascript/reference.h...>
> |StreetViewPanorama<http://code.google.com/apis/maps/documentation/javascript/reference.h...>
> )
>
> Also overlays can position themselves into any of the panes (seehttp://code.google.com/apis/maps/documentation/javascript/reference.h...
> )

Marc Ridey

unread,
Feb 16, 2011, 3:44:27 PM2/16/11
to google-map...@googlegroups.com
Maps Javascript API v3 uses an MVC architecture. The Map and the StreetViewPanorama share the array of Marker and both create their own View.

Tim Blackburn

unread,
Feb 17, 2011, 5:00:51 AM2/17/11
to google-map...@googlegroups.com
Ah, now I wonder if I've double up on my marker creation and if I could have used the same ones in both layers? Anyway what I did was this:

CREATE MAP FUNCTION
// Create the Map and StreetView/Panorama variables
    var mapDiv = document.getElementById('map');
    var width = parseInt(div.style.width);
    var height = parseInt(div.style.height);
    var latlng = new google.maps.LatLng(lat, lng);
   
    // Create Map
    var mapOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(mapDiv, mapOptions);
   
    // Create StreetView/Panorama
    panoramaOptions = {
        addressControl: true,
        addressControlOptions: {style: {backgroundColor: 'grey', color: 'yellow'}},
        position: latlng,
        enableCloseButton: true,
        pov: {heading: 140, pitch: +10, zoom: 1}
    };
    panoramaMap = new  google.maps.StreetViewPanorama(mapDiv, panoramaOptions);
    // set default StreetView/Panoramo of map
    map.setStreetView(panoramaMap);
    // hide it on initial map load
    panoramaMap.setVisible(false);
   
    // Get the markers
    var markers = getMarkers();
   // Lay marker on map
    for (var i = 0; i < markers.length; i++) {
        marker = createMarker(map, markers[i].lat, markers[i].lng, markers[i].infoHTML, markers[i].link, markers[i].options);
    }

So basically I've created a 'custom' StreetView as well as my normal map

CREATE MARKER FUNCTION
.... code setting properties of the icon, shadow, shape here....
// Position of the Marker
    var myLatLng = new google.maps.LatLng(lat, lng);

//Start: create Marker and InfoBox for Map
    // Create Marker
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shadow: shadow,
        shape: shape
    });
   
    // Push Marker into global array (defined in main.html) to be cleared later.   
    markersArray.push(marker);

...code of the content of the infoBox here.....

    // Create InfoBox
    var infoBox = new InfoBox(theInfoBoxDiv);
    markersArray.push(infoBox);

// Control display behaviour of the InfoBox
    var infoBoxIsOpened = false;
    google.maps.event.addListener(marker, 'click', function() {
        if(infoBoxIsOpened == false){
            infoBox.open(map,marker);
            infoBoxIsOpened = true;
        }else if (infoBoxIsOpened == true){
            infoBox.close(map,marker);
            infoBoxIsOpened = false;
        }
    });
   
    google.maps.event.addListener(infoBox, 'closeclick', function() {
        infoBoxIsOpened = false;
    });
   
    google.maps.event.addListener(marker, 'mouseover', function() {
        if (infoBoxIsOpened == false){
            infoBox.open(map,marker);
        }
    });
   
    google.maps.event.addListener(marker, 'mouseout', function() {
        if (infoBoxIsOpened == false){
            infoBox.close(map,marker);
        }
    });   
//End: create Marker and InfoBox for Map       


//Start: create Marker and InfoWindow for StreetView/Panorama   
    // Create Marker
    var markerPanorama = new google.maps.Marker({
        position: myLatLng,
        map: panoramaMap,
        icon: image,
        shadow: shadow,
        shape: shape
    });
   
    // Push Marker into global array (defined in main.html) to be cleared later.   
    markersArray.push(markerPanorama);   
   
    // Create InfoWindow
    var infowindow = new google.maps.InfoWindow({
        content: boxText
    });

    // Control display behaviour of the InfoWindow
    google.maps.event.addListener(markerPanorama, 'click', function() {
        infowindow.open(panoramaMap, marker);
    });

So basically I've made 'Map' Markers, and 'StreetView' Markers, and created InfoBoxes and InfoWindows for each respectively. When the load map function (ablove) is called, it in turn calls this function.

But now that I think of it... I wonder if it would have been possible just to stick with the standard 'StreetView' instead of creating my own, and in this function just create my Markers once instead of twice and control the InfoBox and InfoWindow behaviour as I have done with Event listeners... I would save on having to create the 'same' (well in position at least) markers twice.

Anyway, that's what I did, and it works...

Gary Little

unread,
Feb 18, 2011, 10:45:28 AM2/18/11
to Google Maps JavaScript API v3
Tim & I have been communicating directly about this. I will summarize
the resolution here so that others may benefit.

First of all, the InfoBox utility class ( see
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/
) does work with Street View panoramas. In other words, you can open
an InfoBox on a Map or on a StreetViewPanorama simply by passing the
map or panorama object.

Second, there's no need to create a set of markers and event handlers
for the Map, another set for the StreetViewPanorama, and to create a
custom panorama. All you have to do is add markers to the map (and
handlers to the markers) in the usual way. The standard panorama view
automatically takes care of ensuring the markers also appear on the
panorama, and the markers will use the same event handlers.

In the "click" handlers, which contain the code that shows an InfoBox,
all you need to do is to pass the correct parameter to the
InfoBox.open call depending on whether the panorama is visible. If it
is visible, pass the panorama object otherwise pass the map object. To
check whether the panorama is visible, call
myMap.getStreetView().getVisible() where myMap is your map object --
if the result is true, you're dealing with the panorama.

I have successfully used this technique in my interactive real estate
map at http://map.garylittle.ca/ -- when Street View is active and you
see a property marker, move the mouse over the marker and an InfoBox
appears showing information about the property.

Gary

archinform

unread,
Feb 20, 2011, 4:48:15 AM2/20/11
to Google Maps JavaScript API v3
Hi folks,

have a similar problem (posted on
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/2b96b201007b15ea
)
Seems that You guys are pretty experienced with streetview in
combination with custom markers/overlays.

> Second, there's no need to create a set of markers and event handlers
> for the Map, another set for the StreetViewPanorama, and to create a
> custom panorama. All you have to do is add markers to the map (and
> handlers to the markers) in the usual way. The standard panorama view
> automatically takes care of ensuring the markers also appear on the
> panorama, and the markers will use the same event handlers.

Great, now my question:
Do You know, if it is possible to display the standard panorama view
(with the markers) in a separate div (having a map view and a
streetview, both with (same) markers, at the same time on screen)?

Sascha

Gary Little

unread,
Feb 20, 2011, 12:49:33 PM2/20/11
to Google Maps JavaScript API v3
Sascha,

I think you will have to do what Tim did in his sample code up above.
i.e., create a duplicate set of markers to add to the custom Street
View.

Gary

On Feb 20, 1:48 am, archinform <arch...@archinform.de> wrote:
> Hi folks,
>
> have a similar problem (posted onhttp://groups.google.com/group/google-maps-js-api-v3/browse_thread/th...

Marc Ridey

unread,
Feb 20, 2011, 3:59:22 PM2/20/11
to google-map...@googlegroups.com
I can confirm that once you create your own panorama to display side by side with the map, the markers in the map are no longer displayed in StreetView and the API doesn't let you re-enable this.

archinform

unread,
Feb 21, 2011, 3:47:50 AM2/21/11
to Google Maps JavaScript API v3
Hi Gary & Marc,

thanks, the method to set all markers again for the streetview div
(like Tim suggested) looks like a possible solution. It just produces
a lot of overhead to do the overlay stuff twice (in my case markers a
refreshed on pan/zoom with ajax) and slow down the script.
Marc mentioned:
>>Maps Javascript API v3 uses an MVC architecture. The Map and the
>>StreetViewPanorama share the array of Marker and both create their own View.
If this is the case, shouldn't it be possible to share this array
again for another streetview/map div? Would be a much smarter
solution.

Sascha

Rossko

unread,
Feb 21, 2011, 4:19:46 AM2/21/11
to Google Maps JavaScript API v3
> thanks, the method to set all markers again for the streetview div
> (like Tim suggested) looks like a possible solution. It just produces
> a lot of overhead to do the overlay stuff twice (in my case markers a
> refreshed on pan/zoom with ajax) and slow down the script.

It's your choice to have two displays at once ; it's your choice to
refresh the contents. Maybe you expect too much.

archinform

unread,
Feb 21, 2011, 6:38:22 AM2/21/11
to Google Maps JavaScript API v3
Hi Rossko,
I don't understand your answer. Of course it's my choice (and I'm
doing this with a serious intense to give the user a better
experience).
Google build up v3 with a great software architecture (MVC). I don't
believe, that using the advantages of this API is "expecting to much".
I'm just not so familiar with the inner structure of gmaps to clone/
etc. the overlay array. And that's the reason why I ask here for help.

Sascha

archinform

unread,
Feb 24, 2011, 7:00:00 AM2/24/11
to Google Maps JavaScript API v3
Hi folks,

seems that nobody have a smart solution.
Out of this reason I have now created a feature request for this
missing functionality:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=3072

If someone else needs this, please starr this issue and Google will
hopefully extend the API soon.

Sascha

Gary Little

unread,
Mar 1, 2013, 6:12:35 PM3/1/13
to google-map...@googlegroups.com
Alexander,

I'm not sure how to get this new perspective view when using the API. I certainly like it much more than the distorted view I'm currently using. I will have to investigate.


Gary



On Feb 27, 2013, at 13:58 :33, Alexander Bell wrote:

Hi There Gary. Apologies if I should be starting a new thread for this, I'm unsure. I'm looking at utilising these 'hotspot' features within the new StreetView inside tours. I see your example renders the streetview panorama in the stretched out older render of StreetView rather than the more modern correct perspective view which you can see in StreetView when viewing on google maps.

Is there any way to resolve this? i.e. same functionality with the correct perspective render of StreetView panorama?

Thanks in advance! And great work!!

Alexander
--
You received this message because you are subscribed to a topic in the Google Groups "Google Maps JavaScript API v3" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-maps-js-api-v3/udvgNSKo56k/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-maps-js-a...@googlegroups.com.

To post to this group, send email to google-map...@googlegroups.com.

Alexander Bell

unread,
Mar 2, 2013, 5:44:58 AM3/2/13
to google-map...@googlegroups.com
Thanks for your prompt response Gary. Yes me too, it's so much clearer and detailed but seems to only work within the Google Maps App on phones / tablets or on a pc browser within Google Maps or <iframe>. All API uses have the old view from what I've seen.

Perhaps this is something we could ask Google directly?

I'm keen to help if I can, although I'm not an experienced API developer. I'm more of a creative design kind of guy :-)

Have a great weekend!

Alexander
--
You received this message because you are subscribed to a topic in the Google Groups "Google Maps JavaScript API v3" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-maps-js-api-v3/udvgNSKo56k/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-maps-js-a...@googlegroups.com.
To post to this group, send email to google-map...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 


--
Sent from my iPhone
Reply all
Reply to author
Forward
0 new messages