Google Maps Streetview Tiles Do Not Load In Firefox Initially, Only After Dragging
I have a problem with google maps streetview (in a bootstrap theme, if that has something to do with it). I set the streetview visible with a click of a button and it works in IE a
Solution 1:
I got it resolved.
It started to work when I added initial position to the street view when creating it for the first time.
See fixed code in fiddle:
<!DOCTYPE html><html><head><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><title>Google maps streeview issue - jsFiddle demo</title><scripttype='text/javascript'src='http://code.jquery.com/jquery-1.8.3.js'></script><linktype="text/css"href="/css/normalize.css"><linktype="text/css"href="/css/result-light.css"><scripttype='text/javascript'src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script><scripttype='text/javascript'src="http://maps.google.com/maps/api/js?v=3.11&sensor=false&foo=.js"></script><styletype='text/css'>@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.map-canvasimg {
border: none !important;
max-width: none !important;
}
.panorama-activated-map-canvas {
width: 50%;
float:left;
-webkit-border-top-left-radius: 6px;
-moz-border-top-left-radius: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-bottom-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.panorama-activated-panorama-canvas {
width: 50%;
float:left;
-webkit-border-top-right-radius: 6px;
-moz-border-top-right-radius: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-bottom-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.panorama-disabled-map-canvas {
width: 100%;
border-radius: 6px6px6px6px;
}
.panorama-disabled-panorama-canvas {
display: none;
}
</style><scripttype='text/javascript'>//<![CDATA[
$(window).load(function(){
var data = "{success:true, data:{\"schoolMarker\":{\"lat\":62.759379214514,\"lng\":22.840391666132},\"polylines\":[{\"path\":[{\"lat\":62.768091219265,\"lng\":22.841507465082},{\"lat\":62.767678823231,\"lng\":22.841421634393},{\"lat\":62.767168229676,\"lng\":22.841292888361},{\"lat\":62.766569252889,\"lng\":22.840928107935},{\"lat\":62.765842608979,\"lng\":22.840456039148},{\"lat\":62.76528288457,\"lng\":22.839919597345},{\"lat\":62.764772249527,\"lng\":22.839576274591},{\"lat\":62.764340166815,\"lng\":22.839533359247},{\"lat\":62.764016100627,\"lng\":22.839490443903},{\"lat\":62.763623288351,\"lng\":22.839554816919},{\"lat\":62.762660876165,\"lng\":22.839919597345},{\"lat\":62.761885031233,\"lng\":22.840220004755},{\"lat\":62.761020774875,\"lng\":22.840498954492},{\"lat\":62.760303815724,\"lng\":22.840820819574},{\"lat\":62.759655591079,\"lng\":22.841035396295},{\"lat\":62.759439513032,\"lng\":22.840541869836}]}]}}";
var map = null;
var schoolmarker = null;
var polyBounds = null;
var panorama = null;
var streetViewService = null;
var g = google.maps;
var response = eval( "(" + data + ")" );
if (response.success) {
initMap('#map_canvas', '#panorama_canvas', response.data);
}
functioninitMap(mapSelector, panoramaSelector, data) {
var mapOptions = {
scrollwheel: false,
zoom: 5,
minZoom: 5,
streetViewControl: false,
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: [g.MapTypeId.ROADMAP, g.MapTypeId.SATELLITE]
},
center: new g.LatLng(65.567, 25.303),
mapTypeId: g.MapTypeId.ROADMAP,
draggableCursor: 'auto',
draggingCursor: 'move',
disableDoubleClickZoom: true,
scaleControl: true
};
map = new g.Map($(mapSelector).get(0), mapOptions);
mapSelector = null;
mapOptions = null;
schoolmarker = new google.maps.Marker({
animation: g.Animation.DROP,
draggable: true,
icon: 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/dancinghall.png',
map: map,
position: new g.LatLng(data.schoolMarker.lat, data.schoolMarker.lng)
});
polyBounds = new g.LatLngBounds();
$.each(data.polylines, function(index, polyline) {
var path = [];
$.each(polyline.path, function(index, position) {
var point = new g.LatLng(position.lat, position.lng);
polyBounds.extend(point);
path.push(point);
});
var polyLineObj = new g.Polyline({
strokeColor: "#00BA03",
strokeOpacity: 0.8,
strokeWeight: 4,
path: path,
clickable: false
});
polyLineObj.setMap(map);
});
map.fitBounds(polyBounds);
map.setCenter(schoolmarker.getPosition());
streetViewService = new g.StreetViewService();
streetViewService.getPanoramaByLocation(schoolmarker.getPosition(), 50, function(panoramaData, status) {
if (status == google.maps.StreetViewStatus.OK) {
var heading = g.geometry.spherical.computeHeading(panoramaData.location.latLng, schoolmarker.getPosition());
var panoOptions = {
position: panoramaData.location.latLng,
addressControl: false,
linksControl: false,
panControl: false,
zoomControlOptions: {
style: g.ZoomControlStyle.SMALL
},
pov: {
heading: heading,
pitch: 10,
zoom: 2
},
enableCloseButton: false,
visible:false
};
panorama = new google.maps.StreetViewPanorama($(panoramaSelector).get(0), panoOptions);
}
});
map.setStreetView(panorama);
}
$('#thebutton').click(function () {
$('#map_canvas').removeClass('panorama-disabled-map-canvas').addClass('panorama-activated-map-canvas');
$('#panorama_canvas').removeClass('panorama-disabled-panorama-canvas').addClass('panorama-activated-panorama-canvas');
g.event.trigger(map, 'resize');
map.fitBounds(polyBounds);
map.setCenter(schoolmarker.getPosition());
streetViewService.getPanoramaByLocation(schoolmarker.getPosition(), 50, function(panoramaData, status) {
if (status == google.maps.StreetViewStatus.OK) {
var heading = g.geometry.spherical.computeHeading(panoramaData.location.latLng, schoolmarker.getPosition());
var panoOptions = {
position: panoramaData.location.latLng,
addressControl: false,
linksControl: false,
panControl: false,
zoomControlOptions: {
style: g.ZoomControlStyle.SMALL
},
pov: {
heading: heading,
pitch: 10,
zoom: 2
},
enableCloseButton: false,
visible:true
};
panorama.setOptions(panoOptions);
g.event.trigger(panorama, 'resize');
}
});
});
});//]]></script></head><body><divclass="container"><divclass="container"id="infocontainer"style=""><ahref="#"class="btn btn-primary"id="thebutton"onclick="return false;">Click here</a></div><divid="mapcontainer"class="container"style="position: relative"><divclass="container hero-unit"style="padding:0;"><divclass="map-canvas panorama-disabled-map-canvas"id="map_canvas"style="height: 480px;"></div><divclass="map-canvas panorama-disabled-panorama-canvas"id="panorama_canvas"style="height: 480px;"></div></div></div><divid="bottomcontainer"style=""></div><divid="log"></div></div></body></html>Solution 2:
I had the same problem.
Sometimes StreetView worked and at other times it just displayed grey.
It depended on the location.
Let me clarify the solution...
My unreliable code was like this:
functionshowStreetView(lat, lng)
{
var pos = new google.maps.LatLng(lat, lng);
var panoramaOptions =
{
position: pos,
pov: {
heading: 0,
pitch: 0
}
};
var streetViewService = new google.maps.StreetViewService();
varSTREETVIEW_MAX_DISTANCE = 100;
streetViewService.getPanoramaByLocation(pos, STREETVIEW_MAX_DISTANCE, function(streetViewPanoramaData, status)
{
if (status === google.maps.StreetViewStatus.OK)
{
var panorama = new google.maps.StreetViewPanorama(document.getElementById('streetView'), panoramaOptions);
map.setStreetView(panorama);
}
else
{
// no street view available in this range, or some error occurred
map.getStreetView().setVisible(false);
}
});
}
... that is, the 'panoramaOptions' were near the beginning and contained the position that I calculated.
I changed this to put the 'panoramaOptions' after the call to streetViewService.getPanoramaByLocation() and set the position within it to the value returned in 'streetViewPanoramaData.location.latLng' i.e. the actual position of the panorama, not my calculated position. Then it worked.
The updated code looks like this:
functionshowStreetView(lat, lng)
{
var pos = new google.maps.LatLng(lat, lng);
/* var panoramaOptions =
{
position: pos,
pov: {
heading: 0,
pitch: 0
}
};
*/var streetViewService = new google.maps.StreetViewService();
varSTREETVIEW_MAX_DISTANCE = 100;
streetViewService.getPanoramaByLocation(pos, STREETVIEW_MAX_DISTANCE, function(streetViewPanoramaData, status)
{
if (status === google.maps.StreetViewStatus.OK)
{
var panoramaOptions =
{
position: streetViewPanoramaData.location.latLng, // here is the important change !!!!pov: {
heading: 0,
pitch: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('streetView'), panoramaOptions);
map.setStreetView(panorama);
}
else
{
// no street view available in this range, or some error occurred
map.getStreetView().setVisible(false);
}
});
}
So it was displaying 'grey' because I was trying to force it to display the panorama at the location I had calculated, rather that using the actual location of the panorama returned by the function in the third parameter of getPanoramaByLocation(...)
Post a Comment for "Google Maps Streetview Tiles Do Not Load In Firefox Initially, Only After Dragging"