show streetview in infowindow
I'm trying to get a streetview to show in an infowindow. I had this
working in the v2 API but that method (setTimeout) did not work for me in
v3, so I am trying to use the addListener method to show the panorama. The
error I am getting is a null reference when I try to pass the div I wish
to show the streetview in. I found a couple of questions on here that
seemed on point but I don't see what they were doing differntly - both
examples used the infowindow domready event which is what I am using also.
Here is my code.
var map;
function initialize()
{
var lat = document.getElementById("Lat").value;
var lon = document.getElementById("Lon").value;
var latlon = new google.maps.LatLng(parseFloat(lat), parseFloat(lon));
var mapOptions = {
center: latlon,
zoom: 15,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var sv = new google.maps.StreetViewService();
sv.getPanoramaByLocation(latlon, 50, showShopInfo);
}
function showShopInfo(panoData, status)
{
var streetview;
var dirName = document.getElementById("Directory").value;
var zipSearch = document.getElementById("ZipCodeSearch").value;
var valID = document.getElementById("ShopValID").value;
var shopInfo;
if(status == google.maps.StreetViewStatus.OK)
{
// Got street view!
streetview = true;
shopInfo = "<div id='shopInfo'><table border='0'><tr><td
height='200'>";
shopInfo = shopInfo + "<div id='svMini' style='height: 200px;
width: 200px;'></div></td></tr>";
shopInfo = shopInfo + "<tr><td><br /><b><a
href='ShopProfileBU.asp?ValidationID=" + valID + "&DirectoryName="
+ dirName + "&ZipCodeSearch=" + zipSearch + "' title='Shop
Profile'>";
shopInfo = shopInfo + document.getElementById("ShopName").value +
"</b><br /></a>";
shopInfo = shopInfo + document.getElementById("Address").value +
"<br />";
shopInfo = shopInfo + document.getElementById("City").value + ", ";
shopInfo = shopInfo + document.getElementById("State").value + " ";
shopInfo = shopInfo + document.getElementById("ZipCode").value +
"<br /><br />";
shopInfo = shopInfo + "<b>" +
document.getElementById("Phone").value +
"</b></td></tr></table></div>";
}
else
{
// No street view available
streetview = false;
shopInfo = "<br /><b><a href='ShopProfileBU.asp?ValidationID=" +
valID + "&DirectoryName=" + dirName + "&ZipCodeSearch=" +
zipSearch + "' title='Shop Profile'>";
shopInfo = shopInfo + document.getElementById("ShopName").value +
"</b><br /></a>";
shopInfo = shopInfo + document.getElementById("Address").value +
"<br />";
shopInfo = shopInfo + document.getElementById("City").value + ", ";
shopInfo = shopInfo + document.getElementById("State").value + " ";
shopInfo = shopInfo + document.getElementById("ZipCode").value +
"<br /><br />";
shopInfo = shopInfo + "<b>" +
document.getElementById("Phone").value + "</b>";
}
var infowindow = new google.maps.InfoWindow({
content: shopInfo,
position: map.getCenter()
});
infowindow.open(map);
if(streetview)
google.maps.event.addListener(infowindow, 'domready',
showPanoMini(panoData.location.latLng.lat(),
panoData.location.latLng.lng()));
}
function showPanoMini(pLat, pLon)
{
var panoLat = parseFloat(document.getElementById("PanoLat").value);
var panoLon = parseFloat(document.getElementById("PanoLon").value);
var panoYaw = parseFloat(document.getElementById("PanoYaw").value);
var panoPitch = parseFloat(document.getElementById("PanoPitch").value);
var panoZoom = parseFloat(document.getElementById("PanoZoom").value);
var panoLatLon;
if(panoLat==0 && panoLon==0)
panoLatLon = new google.maps.LatLng(pLat, pLon);
else
panoLatLon = new google.maps.LatLng(parseFloat(panoLat),
parseFloat(panoLon));
var panoPOV = {
heading: parseFloat(panoYaw),
pitch: parseFloat(panoPitch)
};
var panoOptions = {
position: panoLatLon,
pov: panoPOV,
addressControl: false,
linksControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
visible: true
};
var panorama = new
google.maps.StreetViewPanorama(document.getElementById("svMini"),
panoOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
This is the function I was using in v2 to display the streetview.
setTimeout(showPanoMini(pLat, pLon), 1000);
No comments:
Post a Comment