11

同じ質問をしている他の多くの人を見てきましたが、答えを見つけることができませんでした。Google Maps Javascriptapiv3を使用して作成した簡単な地図があります。マップには、各マーカーの特定の情報を表示するための情報ウィンドウにリンクされたいくつかのマーカーがあります。情報ウィンドウにグーグルチャートを追加したいのですが、その方法がわかりませんでした。私は（ここや他のフォーラムで）見つけたすべての投稿を調べましたが、他の人が同じようなことをしようとしていることに気づきましたが、具体的な答えはないようです。フュージョンテーブルを使用してこのようなことを成功させていることに気づきましたが、MySQLテーブルからデータをロードする場合はそうではありません。今のところ、コードを以下に示す簡単なマップがあります。

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

たとえば、簡単なグラフのコードは次のとおりです。

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

私はさまざまなアプローチを試しましたが、私にとってより明白な方法は、インフォウィンドウのsetContentプロパティ内にコンテナー（）を追加してから、グラフを作成する外部関数を呼び出すことでした。関数がコンテナを認識できないため、これは機能しないようです。また、この投稿で提案されているように、グラフのコード全体をsetContentプロパティに埋め込もうとしました。

グーグルマップAPIインフォウィンドウコンテンツ文字列でグーグルチャートツールを使用する

エラーなしでコードを実行できましたが、何も表示されません。別のアプローチは、別のhtmlページでグラフを作成し、どういうわけかこのページをsetContentプロパティに設定することですが、これも成功しません。

これを行う方法がわからないので、私はあきらめようとしています。

助けていただければ幸いです。

ありがとう

ホセ

4

1 に答える 1

14

関数がコンテナを認識できないため、これは機能しないようです。

コンテナを引数として渡すことができますdrawChart()

しかし、マーカーに関連するデータが入力されたグラフを描画したいと思うので、drawChart（）の引数としてマーカーを渡し、そこにinfoWindowを作成することをお勧めします。

サンプルコード（描画したいデータの種類が明確でないため、マーカー関連データの実装なし）

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

利用方法：

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

デモ： http： //jsfiddle.net/doktormolle/S6vBK/

于 2013-02-03T13:15:30.327 に答える