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 On Friday, February 18, 2011 3:45:28 PM UTC, Gary Little wrote: > > 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 > > On Feb 17, 2:00 am, Tim Blackburn <timmybb...@gmail.com> wrote: > > 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... -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To unsubscribe from this group and stop receiving emails from it, send an email to google-maps-js-api-v3+unsubscr...@googlegroups.com. To post to this group, send email to google-maps-js-api-v3@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.
