jquery Program to make different markers,infowindows on google maps

Hi frnds welcome to my blog.This is my first post .Hope somebody will find it useful


Here making the arrangements for map options
$(function() { // onload handler
      var trieste = new google.maps.LatLng(45.6111555,13.8022614);
      var mapOptions = {
        zoom:      12,
        center:    trieste,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }



      var map = new google.maps.Map($("#map_canvas")[0], mapOptions);
Next step is to mark different locations on map

      var places =
        [
          {
            "position": [45.6466883,13.7631226]
          },
          {
            "position": [45.6433281,13.7895584]
          },
          {
            "position": [45.6017884,13.6673355]
          },
          {
            "position": [45.622442,13.7641525]
          }
        ]
     

In this step we are defining different icons for corresponding markers
 
  var icons=["green.png","red.png","blue.png","yellow.png"];
      var i=0;

        $(places).each(function()           var place = this;
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(place.position[0],     place.position[1],place.position[2],place.position[3]),
            map     : map,
            icon    : icons[i]
          });
       
Next step is to display different infowindows for different markers
       if(i==0)
       {
       var infowindow = new google.maps.InfoWindow({
       content: '<p>hai</p>'
         });
       google.maps.event.addListener(marker, 'mouseover', function() {
       infowindow.open(map, marker);
         });
        google.maps.event.addListener(marker, 'mouseout', function() {
       infowindow.close();
         });
        }
        else if(i==1)
        {
         var infowindow = new google.maps.InfoWindow({
       content: '<p>hello</p>'
         });
       google.maps.event.addListener(marker, 'mouseover', function() {
       infowindow.open(map, marker);
         });
        google.maps.event.addListener(marker, 'mouseout', function() {
       infowindow.close();
         });
        }else if(i==2)
         {
       var infowindow = new google.maps.InfoWindow({
       content: '<ul><li>Device ID3</li><li>Device configuration3</li><li>Device Description3</li></ul><a href="links">goto link</a>'
         });
       google.maps.event.addListener(marker, 'mouseover', function() {
       infowindow.open(map, marker);
         });
        google.maps.event.addListener(marker, 'mouseout', function() {
       infowindow.close();
         });
        }else if(i==3)
         {
          var infowindow = new google.maps.InfoWindow({
       content: 'html'
         });
       google.maps.event.addListener(marker, 'mouseover', function() {
       infowindow.open(map, marker);
         });
        google.maps.event.addListener(marker, 'mouseout', function() {
       infowindow.close();
         });
         }    
        i++;
        });      
    
      });
The two functions are for opening infowindow on mouseover and closing it after

Thankyou

Any pattern of comments are welcomed.......;