tags:

views:

159

answers:

1
Q: 

Google Maps V3 StreetView not displaying on second setVisible() call

EDIT: Heard back from Google, they've confirmed this is an issue on their end.

EDIT2: my contact at Google has informed me they've fixed this bug.

I've got a troublesome bug using the Google Maps V3 API.

If you set up a map, switch to streetview, close streetview, then reopen, the imagery appears blank (though the controls still display). If you click on the controls to move the camera, the imagery returns.

What causes this? As you can see the code below is very simple, I can't think where I've gone wrong.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  </head>
  <body>
    <div id="map" style="width:500px;height:300px"></div>

    <script type="text/javascript">
      var map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(37.767063, -122.445724),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 15
      });

      var streetView = map.getStreetView();
      streetView.setPosition(map.getCenter());

      setTimeout(function() { streetView.setVisible(true); }, 1500);
      setTimeout(function() { streetView.setVisible(false); }, 3000);
      setTimeout(function() { streetView.setVisible(true); }, 4500);
    </script>
  </body>
</html>
A: 

I found the same annoying bug and developed a workaround with a further div and a bit of CSS. Assign the streetView to #street

<div id="map" style="width:500px;height:300px;display:block"></div>
<div id="street" style="width:500px;height:300px;display:none"></div>

Add a function to toggle the visibility of the divs:

function toggleStreetView() {
  var mapDiv    = document.getElementById('map');
  var streetDiv = document.getElementById('street');

  var streetVisible = (streetDiv.style.display == 'block');
  if (streetVisible) {
    // hide streetView, show map
    streetDiv.display = 'none';
    mapDiv.display    = 'block';
  } else {
    // vice versa
    mapDiv.display    = 'none';
    streetDiv.display = 'block';
    streetView.setVisible(true); /* order important, show after div is visible */
  }      
}

Maybe not the most elegant solution - but it works. With CSS absolute positioning and a JavaScript framework, i prefer jQuery, you can add a nice fade effect.

Chapter2  2010-08-01 13:56:16

related questions

NHibernate many-to-one mappings updating unchanged table
nHibernate mapping to custom types
Mapping Oracle bool fields with nHibernate
Color mapping a texture in opengl
Google Maps API - GMarker.openInfoWindowHtml() stopped working
Mapping multiple Values to a Value Object in NHibernate
Getting String Sets into Presentation Layer
Which map api would best support fictionally defined maps?
Mapstraction as a library to access Google maps
Object-relational mapping: What's the best way to implement getters?
What is the ideal data type to use when storing latitude / longitudes in a MySQL database?
Annotated Spring-MVC controller not recognized when controller extends interface
Why isn't my NHibernate bag collection setting the 'parent id' of the children dynamically?
GIS/Mapping solutions that provide easy access to routing data
TIGER shapefiles - using and interpreting
Does such a procedure exist in a Scheme standard and if yes, how is it called?
We're manually mapping our internal data elements to external vendors' xml schema. there's gotta be a better way...
Which tool do I use if I want to map a programming framework visually and see the relationship between all entities?
Why does Python's iter() on a mapping return iterkeys() instead of iteritems()?
Finding City and Zip Code for a Location
How do I calculate distance between two latitude longitude points?
Java code for WGS84 to Google map position and back
Map Routing, a la Google Maps?
Mapping latitude/longitude to a distorted map
Decent, simple, GIS/mapping component for ASP.NET?