I have not seen this before usually a map either loads or it doesnt because of some error. I am getting the map to load without errors but it is blank:
<script type='text/javascript' src=';#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>
Anyone else seen this or know what might be the culprit? The map itself is sitting in a div that I am show/hide with jQuery. Could that be the conflict?
ANSWER
This was just a stupid conflict with the parent div where I had img {display:none} defined. Oops. .thanks everyone for trying to help.
I have not seen this before usually a map either loads or it doesnt because of some error. I am getting the map to load without errors but it is blank:
<script type='text/javascript' src='http://maps.google./maps/api/js?sensor=false&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>
Anyone else seen this or know what might be the culprit? The map itself is sitting in a div that I am show/hide with jQuery. Could that be the conflict?
ANSWER
This was just a stupid conflict with the parent div where I had img {display:none} defined. Oops. .thanks everyone for trying to help.
Share edited Jun 11, 2011 at 8:45 Zac asked Jun 10, 2011 at 9:53 ZacZac 12.9k21 gold badges77 silver badges124 bronze badges 4-
1
Any errors in the error console? Where are you calling
initialize()? – Pekka Commented Jun 10, 2011 at 9:55 -
no and on body... sorry for leaving that out :
<body onload="initialize()">– Zac Commented Jun 10, 2011 at 10:00 - 2 Just pasted your code into a html file and the map shows up correctly for me, what is the rest of your html? – Karl-Bjørnar Øie Commented Jun 10, 2011 at 10:30
- if you're using jquery you might want this plugin blog.bobcravens./2010/06/… – corroded Commented Jun 10, 2011 at 10:35
3 Answers
Reset to default 1try adding this:
window.onload = function(evt) {
// this is a simple replica of jQuery's ready function
if(document.readyState === 'plete') {
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);
}
}
Try this
<script type='text/javascript' src='http://maps.google./maps/api/js?sensor=false&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>
I tried google's example, which looks quite similar to what you're doing, and it worked fine.
http://code.google./apis/maps/documentation/javascript/examples/map-simple.html
I suspected that you had the lat/lng reversed, but that doesn't appear to be the case. Perhaps work through this example again - as I just ran it locally with no trouble.