i have a multiple marker Google map, it works fine but i want set infowindow to rounded corner

and MY CODE IS:

<script type="text/javascript">

var locationList = new Array( '23.2531803, 72.4774396', '22.808782, 70.823863' );

var message = new Array('Kalol , Gujarat , India , 382721<br /><br /> Go to <a href="/joomla_1.5/index.php?option=_content&amp;view=article&amp;id=9:chinta-ta-ta-chita-chita-wwwsongspk&amp;catid=1:cat1&amp;Itemid=7">Kalol</a>', 'Morbi , Gujarat , India , 363641<br /><br /> Go to <a href="/joomla_1.5/index.php?option=_content&amp;view=article&amp;id=9:chinta-ta-ta-chita-chita-wwwsongspk&amp;catid=1:cat1&amp;Itemid=7">Morbi</a>');

var map;
var lat_min = 22.808782;
var lat_max = 23.2531803;
var lng_min = 70.823863;
var lng_max = 72.4774396;
 window.onload = function() {
    var myOptions = {
              mapTypeId: google.maps.MapTypeId.ROADMAP
             }
           map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
           map.setCenter(new google.maps.LatLng(
                        ((lat_max + lat_min) / 2.0),
                        ((lng_max + lng_min) / 2.0)
                       ));

            map.fitBounds(new google.maps.LatLngBounds(
                     new google.maps.LatLng(lat_min - 0.01 , lng_min - 0.01),
                     new google.maps.LatLng(lat_max + 0.01, lng_max + 0.01)
                    ));
             for (var i = 0; i < locationList.length; i++)
             {
                 var args = locationList[i].split(",");
                 var location = new google.maps.LatLng(args[0], args[1])
                 var marker = new google.maps.Marker({
                  position: location,
                  map: map,
                  animation: google.maps.Animation.DROP
                  });
                  var j = i + 1;
                   marker.setTitle(message[i].replace(/(<([^>]+)>)/ig,""));
                   attachSecretMessage(marker, i);
        }
}
function attachSecretMessage(marker, number) {
var infowindow = new google.maps.InfoWindow(
{ 
content: message[number],
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});

}
</script>
<div id="map_canvas" style="width:615px; height:400px;"></div>

i have a multiple marker Google map, it works fine but i want set infowindow to rounded corner

and MY CODE IS:

<script type="text/javascript">

var locationList = new Array( '23.2531803, 72.4774396', '22.808782, 70.823863' );

var message = new Array('Kalol , Gujarat , India , 382721<br /><br /> Go to <a href="/joomla_1.5/index.php?option=_content&amp;view=article&amp;id=9:chinta-ta-ta-chita-chita-wwwsongspk&amp;catid=1:cat1&amp;Itemid=7">Kalol</a>', 'Morbi , Gujarat , India , 363641<br /><br /> Go to <a href="/joomla_1.5/index.php?option=_content&amp;view=article&amp;id=9:chinta-ta-ta-chita-chita-wwwsongspk&amp;catid=1:cat1&amp;Itemid=7">Morbi</a>');

var map;
var lat_min = 22.808782;
var lat_max = 23.2531803;
var lng_min = 70.823863;
var lng_max = 72.4774396;
 window.onload = function() {
    var myOptions = {
              mapTypeId: google.maps.MapTypeId.ROADMAP
             }
           map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
           map.setCenter(new google.maps.LatLng(
                        ((lat_max + lat_min) / 2.0),
                        ((lng_max + lng_min) / 2.0)
                       ));

            map.fitBounds(new google.maps.LatLngBounds(
                     new google.maps.LatLng(lat_min - 0.01 , lng_min - 0.01),
                     new google.maps.LatLng(lat_max + 0.01, lng_max + 0.01)
                    ));
             for (var i = 0; i < locationList.length; i++)
             {
                 var args = locationList[i].split(",");
                 var location = new google.maps.LatLng(args[0], args[1])
                 var marker = new google.maps.Marker({
                  position: location,
                  map: map,
                  animation: google.maps.Animation.DROP
                  });
                  var j = i + 1;
                   marker.setTitle(message[i].replace(/(<([^>]+)>)/ig,""));
                   attachSecretMessage(marker, i);
        }
}
function attachSecretMessage(marker, number) {
var infowindow = new google.maps.InfoWindow(
{ 
content: message[number],
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});

}
</script>
<div id="map_canvas" style="width:615px; height:400px;"></div>

• javascript
• jquery
• google-maps
• google-maps-api-3

1 Answer 1

the infoBox constructor take a parameter called boxClass with a string value that can set the css class for this info box, then you can use that to customise it.

Here is a sample:

        var label1 = new InfoBox({
        content: "<div id='label1'>1. Click Me! <br><small>Pane: floatPane (above)</small></div>",
        boxClass: "labelMap label1",
        disableAutoPan: true,
        position: new google.maps.LatLng(49.24660149427584,-123.11008930206299),
        closeBoxURL: "",
        isHidden: false,
        pane: "floatPane" ,    // Pane 2
        enableEventPropagation: true,
});
label1.setMap(_map);