Geek Answers Handbook

Why is my google map empty?

I have not seen this before, usually the card either loads or does not occur due to some error. I get the map to load without errors, but it is empty:

enter image description here

<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&#038;ver=3.0'></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(43.9869349, -102.24306); var myOptions = { zoom: 6, center: latlng, mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> <div id="map_canvas" style="width:100%; height:300px"></div>

Has anyone else seen this or knew what could be the culprit? The map itself sits in a div that I show / hide using jQuery. Could this be a conflict?

ANSWER

It was just a silly conflict with the parent div, where I defined img {display: none}. Sorry .. Everyone wants to help.

+4
source share
3 answers

try adding this:

 window.onload = function(evt) { // this is a simple replica of jQuery ready function if(document.readyState === 'complete') { var latlng = new google.maps.LatLng(43.9869349, -102.24306); var myOptions = { zoom: 6, center: latlng, mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } }
+1
source

Try

 <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&#038;ver=3.0'></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(43.9869349, -102.24306); var myOptions = { zoom: 6, center: latlng, mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> <div id="map_canvas" style="width:100%; height:300px"></div> <script>initialize();</script>
+1
source

I tried the Google example, which looks very similar to what you are doing, and it worked fine.

http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html

I suspected you had a lat / lng reverse, but that doesn't seem to be the case. Perhaps repeat this example again, since I just ran it locally without any problems.

+1
source

More articles:


All Articles