Google maps api V3 with rounded corner

Question

I'm using the google maps api v3 for javascript. I'm trying to make the map display with rounded corners. The only way I can find to do this are hacks from a couple years ago involving changing the infowindow into a infobox.

Is there a better way to do this now with css?

Answer 1

Create one html which contain google map javascrip ,google map3 and latest jquery.
Do not forget to add infobubble js which will about to do trick.
Add following jquery code to html file

$('#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);
                            }
                        }
                    }
                }
            );

now all you need to do is add stylesheet as you want to infobubble to display. where data will be html for the infobubble you need to set it as per your need.

Answer 2

How about this example? http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

Actually, if you want to create your own design of InfoWindow, you can do easily. Refer : Customizing an InfoWindow

Answer 3

I also tried to make rounded corners, and found this solutions - maybe it will help you? http://search.missouristate.edu/map/mobile/examples/corners.htm