Home/ Questions/Q 932351
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T20:39:13+00:00

Hey there, I have an issues/bug when trying to have a v3 and v2

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;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