google-maps - icon - google.maps.marker label

Agregue un gráfico de Google a una ventana de información con la API de Google Maps.

Question

He visto a muchas otras personas con la misma pregunta pero no he podido encontrar una respuesta. Tengo un mapa simple que construí usando la aplicación api v3 de Google Maps. El mapa tiene algunos marcadores que están vinculados a una ventana de información para mostrar información específica para cada marcador. Quiero agregar un gráfico de Google a la ventana de información pero no pude encontrar la manera de hacerlo. Revisé cada una de las publicaciones que pude encontrar (aquí y en otros foros) y me di cuenta de que otras personas intentaban hacer algo similar, pero parece que no hay una respuesta específica. Me he dado cuenta de que las personas tienen éxito al hacer esto utilizando tablas de fusión, pero este no es mi caso, ya que debo cargar los datos de una tabla de MySQL. Por ahora tengo un mapa simple que el código se muestra a continuación:

  function initialize() {

    var mapOptions = {
      center: new google.maps.LatLng(-33.837342,151.208954),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

    var data = [
      [''Bondi Beach'', -33.891044,151.275537],
      [''Cronulla Beach'', -34.046544,151.159601],
    ];

    var myLatLng1 = new google.maps.LatLng(-33.891044,151.275537);
    var myLatLng2 = new google.maps.LatLng(-34.046544,151.159601);

    var marker1 = new google.maps.Marker({
        position: myLatLng1,
        map: map
    });

    var marker2 = new google.maps.Marker({
        position: myLatLng2,
        map: map
    });

    google.maps.event.addListener(marker1, ''click'', function() {
      var infowindow1 = new google.maps.InfoWindow();
      infowindow1.setContent(''Display the chart here'');
      infowindow1.open(map, marker1);
    });

    google.maps.event.addListener(marker2, ''click'', function() {
      var infowindow2 = new google.maps.InfoWindow();
      infowindow2.setContent(''Display the chart here'');
      infowindow2.open(map, marker1);
      infowindow2.setContent(''Display the chart here'');
      infowindow2.open(map, marker2);
    });          
  }    

y aquí está el código para un gráfico simple, por ejemplo:

https://google-developers.appspot.com/chart/interactive/docs/quick_start

He intentado muchos enfoques diferentes y el que me parece más obvio fue agregar un contenedor () dentro de la propiedad setContent de InfoWindow y luego llamar a una función externa que crea el gráfico. Esto parece no funcionar ya que la función no puede ver el contenedor. También intenté incrustar todo el código del gráfico en la propiedad setContent como se sugiere en esta publicación:

utilizando herramientas de Google Chart en una cadena de contenido de google api infowindow

Logré ejecutar el código sin errores, sin embargo, no se muestra nada. Otro enfoque sería crear el gráfico en otra página html y de alguna manera establecer esta página a la propiedad setContent, tampoco se logró éxito.

Estoy a punto de darme por vencido ya que no puedo ver una manera de hacer esto.

Agradecería cualquier ayuda.

Gracias

Jose

Answer 1

Esto parece no funcionar ya que la función no puede ver el contenedor.

Puede pasar el contenedor como argumento a drawChart()

Pero supongo que te gustaría dibujar el gráfico poblado con datos relacionados con el marcador, así que sugeriría pasar el marcador como argumento a drawChart () y crear allí la ventana de información.

Código de muestra (sin implementación de datos relacionados con marcadores, ya que no está claro qué tipo de datos le gusta dibujar)

       function drawChart(marker) {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn(''string'', ''Topping'');
    data.addColumn(''number'', ''Slices'');
    data.addRows([
      [''Mushrooms'', 3],
      [''Onions'', 1],
      [''Olives'', 1],
      [''Zucchini'', 1],
      [''Pepperoni'', 2]
    ]);

    // Set chart options
    var options = {''title'':''Pizza sold @ ''+
                           marker.getPosition().toString(),
                   ''width'':300,
                   ''height'':200};

    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);
  }

uso:

google.maps.event.addListener(marker1, ''click'', function() {
  drawChart(this);
});

Demostración: http://jsfiddle.net/doktormolle/S6vBK/