Q:

Google maps api V3 with rounded corner

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?

A:

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.
infoBubble.setContent(data);  where data will be html for the infobubble you need to set it as per your need.

