How can I fix google maps api v3 showing how gray the square is?

Question

when I search for nearby locations on the site, I come up with the results that appear in the list, but the map area is just gray, sometimes it returns, but then leaves.

any help would be greatly appreciated

Answer 1

This is the answer to your question on the first answer. His idea is correct, that you need to initialize it by location before anything is visible. Also note that this is a question about V3, the first answer is about V2 syntax. Please try using the code using the same idea as the v2 post.

Set the center value in the map options with the source location. You can also adjust the scale here.

var mapOptions = { zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(latitude, longitude) }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

Answer 2

In v3, check that your Lat and Lng are ok and not "undefined".

 console.log(results[0].geometry.location.k); console.log(results[0].geometry.location.D); var mapOptions = { zoom: 15, center: new google.maps.LatLng( results[0].geometry.location.k, results[0].geometry.location.D ) }; map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

Answer 3

The initialization time is important. Is the map displayed at the moment the page loads, or does it pop up / disappear in / (regardless of what changes state from invisible to visible)?

If the card is hidden at the time of initialization, the card will be gray.

Answer 4

Based on my experience with google maps, sometimes gray patches appear when there is no map data available in the place you are currently viewing (especially when the zoom ratio is high) or when you slowly connect to the Internet, so the map data takes a lot of time to load / crash!

But other factors can also be the cause - perhaps.

When you initialize your map, say, for example:

 var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); 

seconds parameter for map.setCenter - scaling factor - in this case 13 .

You can also set a new zoom level for such a map:

 map.setZoom(5); 

Read more here ...