Google지도에 둥근 모서리가있는 V3 V3

Question

자바 스크립트에 google maps api v3을 사용하고 있습니다. 둥근 모서리로지도를 표시하려고합니다. 내가 이것을 할 수있는 유일한 방법은 infowindow를 infobox로 바꾸는 것을 포함하여 몇 년 전의 해킹이다.

CSS를 사용하여 더 좋은 방법이 있습니까?

Answer 1

Google지도 javascrip, google map3 및 최신 jquery가 포함 된 하나의 HTML을 만듭니다.
트릭을하려고하는 infobubble js를 추가하는 것을 잊지 마십시오. html 파일

 


$('#homepage_map').gmap3 
      (
       { 
        action:'init', 
        options: 
        { 
         center:[response.locations.latitude, response.locations.longitude], 
         zoom: 8, 
         mapTypeId: google.maps.MapTypeId.ROADMAP, 
         mapTypeControl: true, 
         navigationControl: true, 
         scrollwheel: true, 
         mapTypeControlOptions: 
         { 
          mapTypeIds: ['Map'] 
         }, 
         streetViewControl: true 
        } 
       }, 
       { 
        action:'clear' 
       }, 
       { 
        action: 'addMarkers', 
        markers:MarkerOBJ, 
        marker: 
        { 
         options: 
         { 
          draggable: false, 
          icon: HOST+'img/icons/google_marker.png', 
          animation: google.maps.Animation.DROP 
         }, 
         events: 
         { 
          click: function(marker, event, data) 
          { 
           var map = $(this).gmap3('get'); 
           infoBubble = new InfoBubble({ 
            maxWidth: 395, 
            shadowStyle: 1, 
            padding: 5, 
            borderRadius: 10, 
            arrowSize: 20, 
            borderWidth: 5, 
            borderColor: '#CCC', 
            disableAutoPan: true, 
            hideCloseButton: false, 
            arrowPosition: 50, 
            arrowStyle: 0 
           }); 
           infoBubble.close(); 
           infoBubble.setContent(data); 
           infoBubble.open(map, marker); 
          } 
         } 
        } 
       } 
      ); 

 

에
추가 다음 jQuery 코드는 이제 당신이해야 할 모든 당신이 표시 infobubble 원하는대로 스타일 시트를 추가 할 수 있습니다. infoBubble.setContent (data); 데이터는 infobubble에 대한 html로 표시되며 필요에 따라 설정해야합니다.

Answer 2

이 예제는 어떻습니까? 당신이 InfoWindow는 당신의 자신의 디자인을 만들려면 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

사실, 당신은 쉽게 할 수 있습니다. 참조 : Customizing an InfoWindow

Answer 3

나는 또한 둥근 모서리를 만들려고 시도했고,이 해결책을 찾았습니다. 아마도 도움이 될까요? http://search.missouristate.edu/map/mobile/examples/corners.htm