Google map API with Infobox using associative array

As I said in previous article. This is the code for Google map API with Infobox style using associative array.

<script type="text/javascript">
var map;
var markers = [];
var data = [
{id:"1",name:"Sujan Bhochhibhoya",address:"KATHMANDU, NEPAL"},

{id:"3",name:"David Beckham",address:"LONDON, UNITED KINGDOM"},

{id:"4",name:"KOBE BRYANT",address:"Los Angeles, California, United States"}];

function initialize() {
        var latlng = new google.maps.LatLng(0, 0);
        var myOptions = {
           zoom: 2,
           minZoom:2,
           zoomControl: true,
           zoomControlOptions: {
              style: google.maps.ZoomControlStyle.LARGE,
           },
           center: latlng,
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        geocoder = new google.maps.Geocoder();
        data.forEach(function(mapData,idx) {
        geocoder.geocode( { 'address': mapData.address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
           var markers = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location,
              title: mapData.address,
              draggable: false,
              visible: true
           });
           var ibLabel = new InfoBox({});
           var boxText = document.createElement("div");
           boxText.style.cssText = "border: 3px solid #fde919; 
               margin-left: 22px; padding: 5px; 
               background:#fff; width:150px; 
               height:auto !important; z-index:999; ";
        boxText.innerHTML = "<div class='marker' style='width:150px ; 

height: auto !important; align:center;'><h3>
        "+mapData.name+"</h3>"+mapData.address+"</div>";
        var myOptions = {
        content: boxText,
        disableAutoPan:true,
        position: results[0].geometry.location,
        pixelOffset: new google.maps.Size(8, -54.5),
        zIndex: null,
        boxStyle: {
           background: "url('map-pointer.png') no-repeat scroll 0% 0% transparent",
           textAlign: "center",
        },
        closeBoxMargin: "4px 4px 4px 4px",
        infoBoxClearance: new google.maps.Size(1, 1),
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        isHidden: false,
        pane: "floatPane",
        };

google.maps.event.addListener(markers, 'mouseover', function(e) {
        ibLabel.setOptions(myOptions);
        ibLabel.open(map,markers);
        });

google.maps.event.addListener(map, "click", function (e) {
        ibLabel.close();
        });
        return markers;
        }
});
        });
}
</script>

For more examples and the previews, go to the SITE

This is it. I will post my new research on this blog