Thread: Impossible to stop Propagation on JQuery tab after clicking on google maps infoWindow

I'm facing this below problem:

I can't stop event propagation when I click on a Google Maps infoWindow StreetView tab, considering the Google Maps is displaying into a JQuery tabs.

To observe the different behaviors, I propose you To test here-> GMaps_NOk_Propagation tab->mark->streetView tab. In this example, there are two same tabs, displaying each on a Google Maps, static markers and using the same duplicated code (See gmaps.js code below)

The behavior is, if I click on streetView of a marker in:

1. First tab GMaps_Ok => Ok => no propagation
2. Second tab GMaps_NOk_Propagation => Nok => Propagation
   
   • =>$(document).ready(function() initialized in index.js (see on post ending)
   • => $("#jQueryTabs1").on("tabsactivate", function(event, ui)
   • => reinitialization

The gmaps.js code is below

Code:

var arrMarkers = [{
        'locNr': "Location 1",
        'lat': 45.767299,
        'lon': 4.834329,
        'city': 'Lyon',
        'zip': 69,
        'land': "Fance",
        'info': '<b>Lyon<\/b><br>la suite du texte...'
    },
    {   'locNr': "Location 2",
        'lat': 48.856667,
        'lon': 2.350987,
        'city': 'Paris',
        'zip': 75,
        'land': "Fance",
        'info': '<b>Paris<\/b><br>la suite du texte...'
    },
    {   'locNr': "Location 3",
        'lat': 44.837368,
        'lon': -0.576144,
        'city': 'Bordeaux',
        'zip': 33,
        'land': "Fance",
        'info': '<b>Bordeaux<\/b><br>la suite du texte...'
    },
    {   'locNr': "Location 4",
        'lat': 43.297612,
        'lon': 5.381042,
        'city': 'Marseille',
        'zip': 13,
        'land': "Fance",
        'info': '<b>Marseille<\/b><br>la suite du texte...'
    }];

var oMap = {
    map: null,
    markers: []
};

function initMaps(layerNbr) 
{   if (document.getElementById)
    {   var mapDiv = document.getElementById('Layer1');
        var latlng = new google.maps.LatLng(46.316584,2.98169);
        var options = 
        {   zoom: 6,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP, // Existe d'autre format Ex: HYBRID => Plan sur photo
            scalecontrol: true,
            navigationControl: true,
            maxZoom : 20,
            navigationControlOptions:
            {   style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeControlOptions:
            {   style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            streetViewControl: true
        };  
    };
    oMap.map = new google.maps.Map(mapDiv, options);
    addMarker();
}

function addMarker(){
    if (oMap.map){
        //var latlng = new google.maps.LatLng(lat,lng);
        for (var i in arrMarkers) {
            var lat = arrMarkers[i].lat;
            var lng = arrMarkers[i].lon;
            var locNr = arrMarkers[i].locNr;
            var city = arrMarkers[i].city;
            var zip = arrMarkers[i].zip;
            var land = arrMarkers[i].land;
            var info = arrMarkers[i].info;
            var latlngset = new google.maps.LatLng(lat, lng);
            var markOpt = {
                map: oMap.map,
                position: latlngset,
                title: city
            };
            var marker = new google.maps.Marker(markOpt);
            oMap.markers.push(marker);

            var contentInfoWindow = [
                '<div id="InfoText">',
                    '<div class ="tabs">',
                        '<ul>',
                            '<li><a href="#tab1">General</a></li>',
                            '<li><a href="#tab2" id="SV">Street View</a></li>',
                        '</ul>',
                        '<div id="tab1">', 
                            '<h3><b>' + locNr + '</h3></b>', '<p>' + city + '<BR>' + land + '<BR>' + zip + '<BR>' + info + '</p>',
                        '</div>',
                        '<div id="tab2">',
                            '<div id="pano"></div>',
                        '</div>', 
                    '</div>',   
                '</div>'        
                ].join('');
            var infoWindowOptions = {
                content: contentInfoWindow,
                position: latlngset
            };
            var infowindow = new google.maps.InfoWindow(infoWindowOptions);
            setEventMarker(marker, infowindow);
        };
        adjustViewPort()
    };
}
function setEventMarker(marker, infowindow) {
    google.maps.event.addListener(marker, "click", function () {
        infowindow.open(this.getMap(), this);
    });

    google.maps.event.addListener(infowindow, 'domready', function () {
        $(".tabs").tabs();
        $('#SV').click(function (e) {
            e.stopPropagation();
            var panoramaOptions = {
                position: marker.position
            };
            var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);

            //oMap.map.setStreetView(panorama);
        });
    });
};


adjustViewPort = function() {
    if (oMap.map) {
        var bounds = new google.maps.LatLngBounds();
        for (var i in oMap.markers) {
            bounds.extend(oMap.markers[i].getPosition());
        }
        oMap.map.fitBounds(bounds);
}}

/*----------------------------2 */
var oMap2 = {
    map: null,
    markers: []
};

function initMaps2() 
{   if (document.getElementById)
    {   var mapDiv2 = document.getElementById('Layer2');
        var latlng = new google.maps.LatLng(46.316584,2.98169);
        var options = 
        {   zoom: 6,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP, // Existe d'autre format Ex: HYBRID => Plan sur photo
            scalecontrol: true,
            navigationControl: true,
            maxZoom : 20,
            navigationControlOptions:
            {   style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeControlOptions:
            {   style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            streetViewControl: true
        };  
    };
    oMap2.map = new google.maps.Map(mapDiv2, options);
    addMarker2();
}

function addMarker2(){
    if (oMap2.map){
        //var latlng = new google.maps.LatLng(lat,lng);
        for (var i in arrMarkers) {
            var lat = arrMarkers[i].lat;
            var lng = arrMarkers[i].lon;
            var locNr = arrMarkers[i].locNr;
            var city = arrMarkers[i].city;
            var zip = arrMarkers[i].zip;
            var land = arrMarkers[i].land;
            var info = arrMarkers[i].info;
            var latlngset = new google.maps.LatLng(lat, lng);
            var markOpt = {
                map: oMap2.map,
                position: latlngset,
                title: city
            };
            var marker = new google.maps.Marker(markOpt);
            oMap2.markers.push(marker);

            var contentInfoWindow = [
                '<div id="InfoText2">',
                    '<div class ="tabs2">',
                        '<ul>',
                            '<li><a href="#tab3">General</a></li>',
                            '<li><a href="#tab4" id="SV2">Street View</a></li>',
                        '</ul>',
                        '<div id="tab3">', 
                            '<h3><b>' + locNr + '</h3></b>', '<p>' + city + '<BR>' + land + '<BR>' + zip + '<BR>' + info + '</p>',
                        '</div>',
                        '<div id="tab4">',
                            '<div id="pano2"></div>',
                        '</div>', 
                    '</div>',   
                '</div>'        
                ].join('');
            var infoWindowOptions = {
                content: contentInfoWindow,
                position: latlngset
            };
            var infowindow = new google.maps.InfoWindow(infoWindowOptions);
            setEventMarker2(marker, infowindow);
        };
        adjustViewPort2()
    };
}
function setEventMarker2(marker, infowindow) {
    google.maps.event.addListener(marker, "click", function () {
        infowindow.open(this.getMap(), this);
    });

    google.maps.event.addListener(infowindow, 'domready', function () {
        $(".tabs2").tabs();
        $('#SV2').click(function (e) {
            e.stopPropagation();
            var panoramaOptions = {
                position: marker.position
            };
            var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano2"), panoramaOptions);

            //oMap.map.setStreetView(panorama);
        });
    });
};


adjustViewPort2 = function() {
    if (oMap2.map) {
        var bounds = new google.maps.LatLngBounds();
        for (var i in oMap2.markers) {
            bounds.extend(oMap2.markers[i].getPosition());
        }
        oMap2.map.fitBounds(bounds);
}}

The HTML code is below (only 2 tabs and 2 div (Layer1 & 2) in which are displayed the Google Maps :

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 11 - http://www.wysiwygwebbuilder.com">
<link href="css/cupertino/jquery-ui.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.ui.core.min.js"></script>
<script src="js/jquery.ui.widget.min.js"></script>
<script src="js/jquery.ui.mouse.min.js"></script>
<script src="js/jquery.ui.sortable.min.js"></script>
<script src="js/jquery.ui.tabs.min.js"></script>


<link href="css/gmaps.css" rel="stylesheet">

<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript' src="js/gmaps.js"></script>

</head>
<body onload="initMaps2();return false;">
<div id="wb_Form1" style="position:absolute;left:12px;top:2px;width:1213px;height:807px;z-index:5;">
<form name="Form1" method="post" action="mailto:[email protected]" enctype="text/plain" id="Form1">
<div id="jQueryTabs1" style="position:absolute;left:8px;top:7px;width:1187px;height:783px;z-index:2;">
<ul>
<li><a href="#jquerytabs1-page-0"><span>GMaps_Ok</span></a></li>
<li><a href="#jquerytabs1-page-1"><span>GMaps_NOk_Propagation</span></a></li>
</ul>
<div style="height:743px;overflow:auto;padding:0;" id="jquerytabs1-page-0">
<div id="Layer2" style="position:absolute;text-align:left;left:15px;top:55px;width:1164px;height:722px;z-index:0;">
</div>
</div>
<div style="height:743px;overflow:auto;padding:0;" id="jquerytabs1-page-1">
<div id="Layer1" style="position:absolute;text-align:left;left:11px;top:58px;width:1164px;height:718px;z-index:1;">
</div>
</div>
</div>
</form>
</div>
<script src="js/index.js"></script>
</body>
</html>

The index.js code is below

Code:

$(document).ready(function()
{
   var jQueryTabs1Options =
   {
      show: false,
      event: 'click',
      collapsible: false
   };
   $("#jQueryTabs1").tabs(jQueryTabs1Options);
   $("#jQueryTabs1").on('tabsactivate', function(event, ui)
   {
      var index = $("#jQueryTabs1").tabs('option', 'active');
      switch(index)
      {
         case 1:
            initMaps();
            break;
      }
   });
});

Thanks by advance for any help

Be seeing you