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 and Chrome ok, but in Firefox, the streetview stays gray (ie. it doesn't load the initial tiles) until you drag the view with a mouse.
I created a fiddle about it, try your self and be amazed:
Anyone have a guess why is this happening?
EDIT: Now when I tried it in the fiddle, the tiles are not loading at all with Firefox, loads fine on chrome. In my real environment, the tiles load in Firefox too after first drag of the view.
EDIT2: The tiles didn't show at all in the fiddle because I had forgot to add the styles to fix bootstrap messing with the google map canvas. I added ".map-canvas img" rule to the css and now it shows the initial problem. Tiles wont load until street view is dragged in Firefox. Updated the fiddle link above.
Here's the code from the fiddle
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Google maps streeview issue - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script type='text/javascript' src="http://maps.google.com/maps/api/js?v=3.11&sensor=false&foo=.js"></script>
<style type='text/css'>
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.map-canvas img {
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: 6px 6px 6px 6px;
}
.panorama-disabled-panorama-canvas {
display: none;
}
</style>
<script type='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);
}
function initMap(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());
panorama = new google.maps.StreetViewPanorama($(panoramaSelector).get(0));
panorama.setVisible(false);
streetViewService = new g.StreetViewService();
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>
<div class="container">
<div class="container" id="infocontainer" style=""><a href="#" class="btn btn-primary" id="thebutton" onclick="return false;">Click here</a></div>
<div id="mapcontainer" class="container" style="position: relative">
<div class="container hero-unit" style="padding:0;">
<div class="map-canvas panorama-disabled-map-canvas" id="map_canvas" style="height: 480px;"></div>
<div class="map-canvas panorama-disabled-panorama-canvas" id="panorama_canvas" style="height: 480px;"></div>
</div>
</div>
<div id="bottomcontainer" style="">
</div>
<div id="log"></div>
</div>
</body>
</html>
