Google지도 InfoBubble 창이 닫히거나 다시지도가 나타나지 않습니다.

Question

InfoBubble here을 사용하여 성공적인 작업 GM 프로토 타입을 작성했습니다.

InfoBubble 창을 열 때마다 지도를 다시 작성해야합니다.

이

google.maps.event.addListener(infoBubble, "closeclick", function() 

둘째, 왜 로스 앤젤레스 (미국 서부 해안, LA)는 InfoBubble 또한 가장 최근 닫히지 않습니다 : 각 InfoBubble을 닫는에

맵 recenters 나는 [등 라인 (238)]를 호출하기 때문에 InfoBubble 창이 다른 모든 것과 마찬가지로 열려 있습니다.

미리 제안 해 주셔서 감사합니다. 나는 그것이 단순해야만한다는 것을 압니다. 그러나 시간과 시간을 소비하고 S/O도 검색했습니다!

자바 스크립트 :

$(document).ready(function() { initialize(); }); 
    var myLatlng = new google.maps.LatLng(51.30, 0.7); 
    function initialize() { 
     google.maps.Map.prototype.setCenterWithOffset = function(LatLng, offsetX, offsetY) { 
      var map = this; 
      var ov = new google.maps.OverlayView(); 
      ov.onAdd = function() { 
       var proj = this.getProjection(); 
       var aPoint = proj.fromLatLngToContainerPixel(LatLng); 
       aPoint.x = aPoint.x+offsetX; 
       aPoint.y = aPoint.y+offsetY; 
       map.setCenter(proj.fromContainerPixelToLatLng(aPoint)); 
      }; 
      ov.draw = function() {}; 
      ov.setMap(this); 
     }; 
     var centerMap = new google.maps.LatLng(51.30, 0.7); 
     var mapOptions = { 
      zoom: 2, 
      disableDefaultUI: true, 
      scrollwheel: false, 
      navigationControl: false, 
      mapTypeControl: false, 
      scaleControl: false, 
      draggable: false, 
      center: centerMap, 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
     map.setCenterWithOffset(myLatlng, 50, 225); 
     setMarkers(map, sites); 
     google.maps.event.addListener(infoBubble, "closeclick", function() { 
      map.setCenterWithOffset(myLatlng, 50, 225); 
     }); 
     google.maps.event.addListener(infoBubbleLA, "closeclick", function() { 
      map.setCenterWithOffset(myLatlng, 50, 225); 
     }); 
    }; 

    var infoBubble = new InfoBubble({ 
     maxWidth: 400, 
    }); 

    var infoBubbleLA = new InfoBubble({ 
     maxWidth: 400, 
    }); 

// locationstrings start 
    var losangeles1 = 'losangeles1'; 
    var losangeles2 = 'losangeles2'; 
    var losangeles3 = 'losangeles3'; 
    var losangeles4 = 'losangeles4'; 
    var losangelescontentString ='losangelescontentString'; 
    var portonovocontentstring ='Porto Novo'; 
    var shackletoncontentstring = 'Shackleton'; 
    var florencecontentstring = 'Florence'; 
    var buenosairescontentstring = 'Buenos Aires'; 
    var jodhpurcontentstring = 'Jodhpur'; 
    var mtsinaicontentstring = 'Mt Sainai'; 
    var neworleanscontentstring = 'New Orleans'; 
    var pariscontentstring='Paris'; 

// locationstrings end 

    infoBubbleLA.addTab('Electronic Cataloguing Initiative', losangeles1); 
    infoBubbleLA.addTab('Getty Leadership Institute at Claremont Graduate University', losangeles2); 
    infoBubbleLA.addTab('Tab 3', losangeles3); 
    infoBubbleLA.addTab('Preserve L.A.', losangeles4); 

    var sites = [ 
    // 'Title',  lat,  long,  contentstring 
     ['Los Angeles', 34.054082,-118.24261, losangelescontentString], 
     ['Porto Novo', 6.501411,2.604275, portonovocontentstring], 
     ['Shackleton', -77.550000, 166.150000, shackletoncontentstring], 
     ['Florence', 43.773046,11.255901, florencecontentstring], 
     ['Buenos Aires', -34.578528,-58.526273, buenosairescontentstring], 
     ['Jodhpur', 27.199507,73.73826, jodhpurcontentstring], 
     ['Mt Sinai', 28.555972,33.975048, mtsinaicontentstring], 
     ['New Orleans', 29.984676,-90.063171, neworleanscontentstring], 
     ['Paris', 48.821799,2.404933, pariscontentstring] 
    ]; 

    var iconBase = 'http://gettylabs.org/visit/FoundationMap/images/'; 
    function setMarkers(map, markers) { 
     for (var i = 0; i < markers.length; i++) { 
      var sites = markers[i]; 
      var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); 
      var marker = new google.maps.Marker({ 
       icon: iconBase + 'bullet.png', 
       title: sites[0], 
       position: siteLatLng, 
       html: sites[3], 
       map: map 
      }); 
      google.maps.event.addListener(marker, "click", function() { 
       map.setCenterWithOffset(myLatlng, 50, 25); 
       if (this.html == losangelescontentString) { 
        infoBubbleLA.setContent(this.html); 
        infoBubbleLA.open(map,this); 
       } else { 
        infoBubble.setContent(this.html); 
        infoBubble.open(map,this); 
       } 
      }); 
     }; 
    }; 

Answer 1

당신은 당신의 2 개의 다른 InfoBubbles infoBubbleLA 및 infoBubble을 코드가 있습니다. 하나를 열면 다른 하나가 닫히지 않습니다.

var infoBubble = new InfoBubble({ 
     maxWidth: 400, 
    }); 

    var infoBubbleLA = new InfoBubble({ 
     maxWidth: 400, 
    }); 

이 그렇게해야합니다

google.maps.event.addListener(marker, "click", function() { 
       map.setCenterWithOffset(myLatlng, 50, 25); 
       if (this.html == losangelescontentString) { 
        infoBubbleLA.setContent(this.html); 
        infoBubbleLA.open(map,this); 
        infoBubble.close(); 
       } else { 
        infoBubble.setContent(this.html); 
        infoBubble.open(map,this); 
        infoBubbleLA.close(); 
       } 
      }); 

working fiddle