60952

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 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:

http://jsfiddle.net/wK5Hq/22/

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>

Answer1:

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:

http://jsfiddle.net/wK5Hq/23/

<!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()); 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> <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>

Answer2:

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:

function showStreetView(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(); var STREETVIEW_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:

function showStreetView(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(); var STREETVIEW_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(...)

Recommend

  • Rails 4.0.0 jQuery Mobile button icons not showing in production
  • Simple test app deploys to Heroku but won't run
  • C#: Import/Export Settings into/from a File
  • Syntax error on tokens, AnnotationName expected instead - error on query
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • Floated image with variable width and heading with background image
  • UIAlertController button function not working
  • How can I display the parent menu item's description using Wordpress walkers?
  • How to add a focus style to an editable ComboBox in WPF
  • How to generate and display a QR Code in ionic 2
  • Adjust width of select element according to selected option's width
  • Installed module is empty
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Webgrid not refreshing after delete MVC
  • Custom validator control occupying space even though display set to dynamic
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Xamarin Forms - UWP Fonts
  • Change JButton Shape while respecting Look And Feel
  • HTML download movie download link
  • Can Jackson SerializationFeature be overridden per field or class?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Shallow update not allowed (git > 1.9)
  • Change an a tag attribute in JavaScript based on screen width
  • jquery mobile loadPage not working
  • Why winpcap requires both .lib and .dll to run?
  • Return words with double consecutive letters
  • Circular dependency while pushing http interceptor
  • How do I rollback to a specific git commit
  • Unanticipated behavior
  • Python: how to group similar lists together in a list of lists?
  • Android Studio and gradle
  • Revoking OAuth Access Token Results in 404 Not Found
  • AngularJs get employee from factory
  • How to set the response of a form post action to a iframe source?
  • Change div Background jquery
  • Busy indicator not showing up in wpf window [duplicate]