Menu
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.
925
Google Maps v3 is very slow when it comes to subclassing overlay classes. Most of the time when you have some custom overlays on your map it will start to LAG which means it is unusable in most cases. Version 2 is much, much, much FASTER for REAL PURPOSES.
Easily create your styleThe new Google Maps APIs Styling Wizard helps you to create a map style in a few clicks. Use one of our pre-built styles or create your own style from scratch.
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&v=2&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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
