API de Google Maps v3: caja gris, sin mapa
Como parte de un proyecto mucho más grande, estamos tratando de obtener un Mapa en un sitio utilizando el Mapa API de Google v3. He seguido los pasos más simples que Google ha trazado, he intentado copiar el código directamente de otros mapas de trabajo. Pero no importa lo que haga, todo lo que obtenemos es un cuadro gris y ningún mapa.
Utilizando Firebug, puedo ver la información que intenta rellenar el mapa, pero simplemente no se muestra. He intentado jquery, bibliotecas de jquery hechas específicamente para google maps, nada funciona. He estado arriba y abajo de Internet y todo a través de los archivos de ayuda de la API de Google. Además, el problema no es local, ya que subí el archivo a varios servidores y lo probé en varios navegadores y computadoras. Nada esta funcionando
En este punto, tiene que ser algo estúpido que estoy pasando por alto. Aquí está mi código.
<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true">
</script>
<script type="text/javascript">
function load()
{
var mapDiv = document.getElementById("map");
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions =
{
//zoom: 8,
center:latlng,
//backgroundColor: '#ff0000',
mapTypeId: google.maps.MapTypeId.ROADMAP,
imageDefaultUI: true
};
var map = new google.maps.Map(mapDiv, mapOptions);
function createMarker(point, text, title)
{
var marker =
new GMarker(point,{title:title});
return marker;
}
}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 800px; height: 400px;"></div>
</div>
</body>
</html>