Geek Answers Handbook

Can Google Maps vessels V2 and V3 coexist on the same page?

Hi, I have a problem / error while trying to use google v3 and v2 maps on the page at the same time.

The core of our application uses the v2 API and adds some new features, we decided to use the v3 api, since v2 is deprecated. Therefore, I dynamically load the v3 version of the api into another "tab" of the application.

The problem is that if you click on the v3 map and then click on the v2 map, the v2 map will start following the mouse cursor, as if you clicked to start dragging, but you never released the mouse button. And basically errors before page reload

Here is an example with simple instructions on how to replicate http://jsbin.com/googlemapv3v2/1

It’s strange if you first click / play with the v2 card, then click / play with the v3 card, it all works great.

So, I tried to “trick” him by issuing custom click / mousedown events on the v2 map after loading the v3 api. http://jsbin.com/googlemapv3v2/2

But no luck, does anyone have any ideas?

EDIT . It should be noted that this only happens in chrome, firefox, safari havent, a proven opera.

+7
javascript google-maps google-maps-api-3 google-maps-api-2
source share
1 answer

I do not think that both APIs should coexist on the same page. I tried a very simple example that happens to have the same problem as yours. Tested in Chrome 5.0 and Firefox 3.6.6 (both for 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>
+2
source share

More articles:


All Articles