Shadowbox의 Google지도 v2는 웹킷에서만 작동합니다.

Question

Shadowbox (jQuery 어댑터)를 사용하여 맞춤 Google지도를 열려고합니다. 내 코드는 Webkit 브라우저에서 완벽하게 작동하지만 FF, IE 및 Opera에서 빈 (검은 색) 섀도 상자 창이 표시됩니다.

//map 
$('.map').click(function() { 
    Shadowbox.open({ 
     player:  'html', 
     content: '', 
     height:  300, 
     width:  500, 
     options: { 
      onFinish: function(item) { 
       //create map 
       var body = document.getElementById(Shadowbox.playerId); 
       var map = new GMap2(body); 
       map.setCenter(new GLatLng(45.7311, 21.2320), 16); 

       //create icon 
       var marker_icon = new GIcon(G_DEFAULT_ICON); 
       marker_icon.iconSize = new GSize(35, 38); 
       marker_icon.iconAnchor = new GPoint(17, 30); 
       marker_icon.image = 'http://domain.com/images/map-marker.png'; 

       //add marker 

       var point = new GLatLng(45.7311, 21.2320); 
       map.addOverlay(new GMarker(point, {icon: marker_icon})); 

       //add some simple controls 
       map.addControl(new GSmallMapControl()); 
       map.addControl(new GMapTypeControl()); 
      } 
     } 
    }); 
}); 

//shadowbox 
Shadowbox.init(); 

Answer 1

내가 위의 코드가 작동하지 않는 원인을 발견하지 못했지만 (이되지 있기 때문에 단순히 수 있습니다),지도 API V3에 코드를 마이그레이션하는 것은이 문제를 해결합니다 : 여기에 내 코드입니다.

//map 
$('.map').click(function() { 
    Shadowbox.open({ 
     player:  'html', 
     content: '', 
     height:  300, 
     width:  500, 
     options: { 
      onFinish: function(item) { 
       //create map 
       var map = new google.maps.Map(document.getElementById(Shadowbox.playerId), { 
        center: new google.maps.LatLng(45.7311, 21.2320), 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        zoom: 16 
       }); 

       //add marker 
       var marker = new google.maps.Marker({ 
        icon: 'http://domain.com/test/images/map-marker.png', 
        map: map, 
        position: new google.maps.LatLng(45.7311, 21.2320) 
       }); 
      } 
     } 
    }); 
});