views:

116

answers:

1

Hey there, I have an issues/bug when trying to have a v3 and v2 google maps on the page at the same time.

The core of our application uses v2 of the API and adding some new functionality we decided to use v3 of the api since v2 is deprecated. So I'm dynamically loading the v3 version of the api in another "tab" on the application.

The problem is if you click on the v3 map and then click on the v2 map the v2 map starts following the mouse cursor around as if you had clicked to start dragging but never released the mouse button. And basically bugs out till you reload the page

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

The weird thing is if you click/play around with the v2 map first then click/play around with the v3 map it all works nicely.

So I've tried "tricking" it by firing custom click/mousedown events on the v2 map once the v3 api is loaded see http://jsbin.com/googlemapv3v2/2

But no luck there, anyone got any ideas?

EDIT: Should note, it only seems to be happening in chrome, firefox, safari havent tried opera.

+1  A: 

I don't think the two APIs are meant to co-exist on the same page. I tried a very basic example, which 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;amp;v=2&amp;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>
Daniel Vassallo
The weird thing is they do co-exist if you interact with the v2 map first.
RueTheWhirled
Yes, noticed that :)
Daniel Vassallo
I was a the Sydney Google Dev-Fest and asked a Googler this question. I can confirm they are not designed to exist on the same page.
Cannonade
After emailing support about it one of the developers replied, "Using the same namespace and sharing a good bunch of class, methods and constant ames, V2 and V3 APIs are not designed to run together in the same page." And then in a follow up email "Indeed you can run both versions together, it is possible and works fairlywell, considering it's not designed to do so." So I guess the answer is it works sort of ;)
RueTheWhirled
@RueTheWhirled: Interesting. Was this response on the public api groups?
Daniel Vassallo
@Daniel Vassallo nah, I did report a bug about in the api groups but the emails were from google enterprise support
RueTheWhirled
Gonna mark this as the answer although; if it was somehow possible to simulate interacting with the v2 map in the same way as if the user had then it might be possible to overcome the particular issue I've described. I think it might have to do with v2 using an array to store events where v3 is using an object but its in the internals of the API so hard to fix. And having said that there's probably still other bugs with having both v2 and v3 on same page
RueTheWhirled