7

Hola, tengo un problema/error cuando trato de tener un google maps v3 y v2 en la página al mismo tiempo.¿Pueden las API v2 y v3 Google Maps coexistir en la misma página?

El núcleo de nuestra aplicación utiliza la v2 de la API y agrega nuevas funcionalidades. Decidimos usar v3 de la API, ya que v2 está en desuso. Así que estoy cargando dinámicamente la versión v3 de la API en otra "pestaña" en la aplicación.

El problema es que si hace clic en el mapa v3 y luego hace clic en el mapa v2, el mapa v2 comienza siguiendo el cursor del mouse como si hubiera hecho clic para comenzar a arrastrar pero nunca soltó el botón del mouse. Y básicamente errores de allí hasta que vuelva a cargar la página

Aquí está un ejemplo, con instrucciones sencillas sobre cómo replicar http://jsbin.com/googlemapv3v2/1

Lo extraño es que si se hace clic/jugar con el mapa v2 primero y luego haga clic/jugar con el mapa v3 todo funciona muy bien.

Así que he probado "engañar" por arranques de clics personalizado/mousedown en el mapa v2 una vez que la versión 3 del API se carga ver http://jsbin.com/googlemapv3v2/2

Pero no hay suerte, alguien tiene alguna idea?

EDIT: Debe tenerse en cuenta que solo parece estar sucediendo en Chrome, Firefox, Safari no ha intentado ópera.

+0

Si alinea los mapas correctamente, parece que está arrastrando un mapa que se ajusta a dos divisiones. –

Respuesta

2

No creo que las dos API estén pensadas para coexistir en la misma página. Intenté un ejemplo muy básico, que tiene el mismo problema que el tuyo. Probado en Chrome 5.0 y Firefox 3.6.6 (ambos para Mac):

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Maps v2 and v3 on same page</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
      type="text/javascript"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 
</head> 
<body> 
    <div id="map_v3" style="width: 500px; height: 400px;"></div> 
    <div id="map_v2" style="width: 500px; height: 400px; margin-top: 50px;"></div> 

    <script type="text/javascript"> 

    var map3 = new google.maps.Map(document.getElementById('map_v3'), { 
     zoom: 6, 
     center: new google.maps.LatLng(-41.00, 174.00), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var map2 = new GMap2(document.getElementById('map_v2')); 
    map2.addControl(new GLargeMapControl3D()); 
    map2.setCenter(new GLatLng(-41.00, 174.00), 6); 
    </script> 

</body> 
</html> 
+0

Lo raro es que coexisten si primero interactúas con el mapa v2. – Okeydoke

+0

Sí, noté que :) –

+4

Fui el Dev-Fest de Google de Sydney y le hice esta pregunta a un Googler. Puedo confirmar que no están diseñados para existir en la misma página. – RedBlueThing

Cuestiones relacionadas