Gráfico circular en el mapa de Google

Question

Jul 06, 2013, 01:21 PM

Gráfico circular en el mapa de Google

Quiero dibujar gráficos circulares en varias ubicaciones en un mapa de Google. ¿Hay una manera de dibujar un gráfico circular de Google en una ubicación particular en un mapa de Google para representar un conjunto de datos (como población en una ubicación / ciudad particular)?

Se me ocurrió una solución y a continuación se muestra el código que escribí para mostrar un ícono de gráfico circular en una ubicación en particular. Tengo algún otro requisito para agregar el detector de eventos al icono del gráfico pi para mostrar una ventana con un gráfico circular más detallado. Se me ocurrió el siguiente código como una solución para estos requisitos, pero no muestra la ventana cuando se hace clic en el icono. ¿Puedes por favor ayudar a encontrar el problema aquí?

<html>
<head>
    <link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.10&sensor=false&.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi?.js"></script>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        google.load( 'visualization', '1', { packages:['corechart'] });

        function drawChart(marker, data) {


            var options = {'title':'Perception Analysis '+
                    marker.getPosition().toString(),
                'width':400,
                'height':150};

            var node        = document.createElement('div'),
                    infoWindow  = new google.maps.InfoWindow(),
                    chart       = new google.visualization.PieChart(node);

            chart.draw(data, options);
            infoWindow.setContent(node);
            infoWindow.open(marker.getMap(),marker);
        }

        function ChartMarker( options ) {
            this.setValues( options );

            this.$inner = $('<div>').css({
                position: 'relative',
                left: '-50%', top: '-50%',
                width: options.width,
                height: options.height,
                fontSize: '1px',
                lineHeight: '1px',
                padding: '2px',
                backgroundColor: 'transparent',
                cursor: 'default'
            });

            this.$div = $('<div>')
                    .append( this.$inner )
                    .css({
                        position: 'absolute',
                        display: 'none'
                    });
        };

        ChartMarker.prototype = new google.maps.OverlayView;

        ChartMarker.prototype.onAdd = function() {
            $( this.getPanes().overlayMouseTarget ).append( this.$div );
        };

        ChartMarker.prototype.onRemove = function() {
            this.$div.remove();
        };

        ChartMarker.prototype.draw = function() {
            var marker = this;
            var projection = this.getProjection();
            var position = projection.fromLatLngToDivPixel( this.get('position') );

            this.$div.css({
                left: position.x,
                top: position.y,
                display: 'block'
            })

            this.$inner
                    .html( '<img src="' + this.get('image') + '"/>' )
                    .click( function( event ) {
                        var events = marker.get('events');
                        events && events.click( event );
                    });

            this.chart = new google.visualization.PieChart( this.$inner[0] );
            this.chart.draw( this.get('chartData'), this.get('chartOptions') );
        };

        function initialize() {
            var latLng = new google.maps.LatLng( 40.708762, -74.006731 );
            var mapOptions = {
                center: latLng,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("map_canvas"),
                    mapOptions);

            var data = google.visualization.arrayToDataTable([
                [ 'Task', 'Hours per Day' ],
                [ 'Work', 11 ],
                [ 'Eat', 2 ],
                [ 'Commute', 2 ],
                [ 'Watch TV', 2 ],
                [ 'Sleep', 7 ]
            ]);

            var options = {

                fontSize: 8,
                backgroundColor: 'transparent',
                legend: {position: 'none'}
            };

            var marker = new ChartMarker({
                map: map,
                position: latLng,
                width: '250px',
                height: '100px',
                chartData: data,
                chartOptions: options,
                events: {
                    click: function( event ) {
                        drawChart(this,data)
                    }
                }
            });

        };

    </script>
</head>

<body onload="initialize()">

<div id="map_canvas" style="width: 900px; height: 500px;"></div>
</body>
</html>