在信息窗口Google Map API中显示mysql表数据

Question

I'm pretty new on google MAPS API and I like to get some help. I'm drawing polygons on my site from mysql datbase using ajax and it works fine. Ajax code is

function checkbox(clicked_id)
    {   

        var checkbox = document.getElementById(clicked_id);
        if(checkbox.checked==true)
        {
             // coordintaes for routes 

            // Get coordinates of route and display it
            for(m=1;m<=36;m++){

                //alert(m);
            $.ajax({
            url: "route_query4district1.php?id="+m,
            dataType: 'json',
            success: function (msg1) 
            { 
            xarray1 = new Array();
             yarray1 = new Array();
             color1 = new Array();
             new_id = new Array();
             dist_name = new Array();
            js_data1 = eval(msg1);
                //alert(js_data1);
                var k1=0;
                for(j1=0;j1<js_data1.length;j1+=5){
                xarray1[k1] = js_data1[j1];
                yarray1[k1] = js_data1[j1+1];
                color1[k1] = js_data1[j1+2];
                new_id[0] = js_data1[j1+3];
                dist_name[0] = js_data1[j1+4];
                k1++;
                }
            //alert(dist_name);
                var flightPlanCoordinates = new Array();
                for(i=0;i<xarray1.length;i++){
                 flightPlanCoordinates[i] = new google.maps.LatLng(yarray1[i], xarray1[i]);
                }

                var line_color="#00000";
                var stroke_color=line_color.toString();
                var linee_color=color1[m];
                var strokee_color=linee_color.toString();
                flightPath[m] = new google.maps.Polygon({
                    path: flightPlanCoordinates,
                    strokeColor: stroke_color,
                    fillColor: strokee_color,
                    strokeOpacity: 1.0,
                    strokeWeight: 4


              });

              flightPath[m].setMap(map);
             google.maps.event.addListener(flightPath[m], 'click', showArrays);
            infoWindow = new google.maps.InfoWindow();      

            } 
            });
            }

        }

Now i want to display attribute data associate with each polygon in info window google map APi.How i can do it?? i want to display following information.Name is save in geometry table and have unique id,through which geometry is associated with other table. $ sign are using as php variable through which fetch data from datbase

Name:$name, Population:$pop, Area:$area

Answer 1

You could give this a try

flightPath[m] = new google.maps.Polygon({
                    path: flightPlanCoordinates,
                    strokeColor: stroke_color,
                    fillColor: strokee_color,
                    strokeOpacity: 1.0,
                    strokeWeight: 4,
                    id: m
              });  

//Create the info window
var infowindow = new google.maps.InfoWindow({
    width:...,
    ...
});

//Add it to object with the same key as your flightpaths
infowindows[m] = infowindow.

//Set event listener for mouse over
google.maps.event.addListener(flightPath[m], 'mouseover', function(){
    setContent(this.id);
});

google.maps.event.addListener(flightPath[m], 'mouseout', function(){
    infowindows[this.id].close();
});

//mouseover function
var setContent = function(id)
{
    //build your html. This is where you'd get your variables from php. Ajax or save them to a js variable.
    infowindows[id].setContent(html);
    infowindows[id].open(map, flightPath[id]);
};