2011-05-30 27 views
6

Código con API V3.El mapa no se muestra Google Maps API V3

function initialize() 
{ 
    if (GBrowserIsCompatible()) 
    { 
     var ch = new GLatLng (0,0); 

     var myOptions = { 
      zoom:7, 
      center: ch, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     map = new google.maps.Map(document.getElementById("map"), myOptions); 

     directionsDisplay = new google.maps.DirectionsRenderer(map, document.getElementById("map")); 
     directionsDisplay.setMap(map);     
    } 
} 

Código con API V2.

function initialize() 
{ 
    if (GBrowserIsCompatible()) 
    { 
     map = new GMap2 (document.getElementById("map")); 
     map.setCenter (new GLatLng(0,0),1); 
    } 
} 

El código API V2 funcionó a la perfección, el código API V3 NO muestra ningún mapa. ¿Cuál es el punto que me falta?

EDITAR modificado el código V3 de la siguiente manera, pero todavía no hay mapas:

var chicago = new google.maps.LatLng (0, 0); 

var myOptions = { 
    zoom:1, 
    center: chicago, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 

map = new google.maps.Map(document.getElementById("map"), myOptions); 

Respuesta

13

Asegúrese de que está cargando la correcta API de Google Maps, que tiene una etiqueta div con una identificación del mapa, y (por si fuera poco) que le das al div un alto y ancho. (Quizás sea mejor poner el alto y el ancho en una hoja de estilo, pero para mayor claridad, lo incluyo en línea aquí.)

Aquí hay una página web con su código de post-edición. Intentalo. Funciona para mi.

<html> 
<head> 
<title>Google Map test</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head> 
<body> 
<div id="map" style="height:500px;width:500px"></div> 
<script> 
var chicago = new google.maps.LatLng (0, 0); 

var myOptions = { 
    zoom:1, 
    center: chicago, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 

map = new google.maps.Map(document.getElementById("map"), myOptions); 
</script> 
</body> 
</html> 
+0

@Ray @ wong2 ¡Finalmente esto está resuelto, no podría haberlo hecho sin toda tu ayuda! El problema era esta línea '

1

En V3, todos los nombres han cambiado. Por ejemplo, GLatLng ahora es google.maps.LatLng. Deberá revisar su código para usar los nuevos nombres.

Un link to the docs en caso de que no lo tiene

+0

Gracias pero eso no cambió nada :(¡Los mapas aún no se muestran! –

+0

Bien Acabo de lanzar la declaración 'if (GBrowserIsCompatible())' en total, sigue sin cambios. De hecho, quiero esta propiedad: http: // code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsRoute ¿Está disponible en V2? –

+0

, tal vez sea una pregunta tonta, pero ¿está seguro de que document.getElementById ("map") encuentra realmente un elemento DOM? ? – Ray

1

No hay GLatLng en la versión 3, cambie a google.maps.LatLng

center: chicago, 
+0

He editado el código anterior, pero no me ayudó :( –

+0

@AnishaKaul: I He actualizado mi respuesta – wong2

+0

Lo intenté también, no ayudó :(este documento lo muestra sin comillas también: http://code.goog le.com/apis/maps/documentation/javascript/tutorial.html # HelloWorld –

0

Tenía los mismos síntomas, mis mapas de v2 no se mostrarían con V3. Cuando miro en los registros de la consola del navegador, veo el error: Uncaught ReferencedError: GBrowserIsIncompatible no está definido.

Por el Google V2 to V3 Migration Guide, GBrowserIsIncompatible ya no es compatible. No he encontrado una alternativa y simplemente eliminé la lógica relacionada con esta función. Esto site suggests just removing the function.

Encontré otros problemas con la migración que se tratan en el enlace de la Guía de migración de Google anterior.

0

1- Asegúrate de que la clave API de google map sea correcta.

2- es posible que no esté habilitado en la consola de google maps.

3- habilitado incorrectamente la API de ubicación en lugar de la API de mapa.

Cuestiones relacionadas