Bir google grafik kullanarak google maps api kullanarak bir haritaya

Question

Aynı soruyla başka birçok insan gördüm ama bir cevap bulamadım. Google Haritalar Javascript API v3 kullanarak oluşturduğum basit bir haritaya sahibim. Harita, her bir işaretçi için belirli bilgileri görüntülemek için bir alt menüye bağlı birkaç işaretleyiciye sahiptir. Web sitesine bir google grafik eklemek istiyorum, ancak nasıl yapacağını anlayamadım. Bulduğum her gönderiyi (burada ve diğer forumlarda) inceledim ve başkalarını benzer şeyler yapmaya çalıştıklarını fark ettim ama belli bir cevabı yok gibi görünüyor. İnsanların füzyon tablolarını kullanarak böyle bir şey yapmakta başarılı olduklarını fark ettim, ancak bu, verileri MySQL tablosundan yükleyeceğim durumum değil.

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

ve burada örneğin basit bir grafik için kodudur: Birçok farklı yaklaşımlar denedim

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

Şimdilik ben kod aşağıda gösterilmiştir basit harita var ve benim için daha açık gözüken bir şey InfoWindow'un setContent özelliği içinde bir container() eklemek ve ardından grafiği oluşturan harici bir işlevi çağırmaktı. Bu işlev, kapsayıcıyı göremediği için işe yaramaz. Ben ancak hiçbir şey gösterilir, hatasız kod çalıştırmak için idare ettik

using google chart tools in a google maps api infowindow content string

: Bu yazıdaki önerdiği gibi Ben de setContent özelliğinde grafik için tüm kodu gömmek için çalıştık. Anotther yaklaşımı, başka bir html sayfasındaki tabloyu oluşturacak ve bir şekilde bu sayfayı setContent özelliğine ayarlayacaktır, aynı zamanda hiçbir başarı sağlanamadı.

Bunu yapmanın bir yolunu göremediğim için pes etmek üzereyim.

Herhangi bir yardım için minnettar olurum. Bu doens't

Teşekkür

Jose

Answer 1

işlev kabı göremiyorum olarak çalışıyor gibi görünüyor.

Sen drawChart()

Ama işaretleyici ile ilgili verilerle doldurulur grafiği çizmek istiyorum tahmin argüman olarak kabı geçebilir, bu yüzden drawChart için argüman olarak işaretleyici geçmek öneririm

() ve infoWindow orada oluşturun. (Eğer çekmek istiyoruz ne tür verilerin net değil olarak işaretleyici ile ilgili verilerin implementaion olmadan)

örnek kod

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

kullanımı:

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

Demo: http://jsfiddle.net/doktormolle/S6vBK/