Google नक्शे एपीआई

Question

का उपयोग करके एक इन्फॉइंडो में एक Google चार्ट जोड़ें मैंने कई अन्य लोगों को एक ही प्रश्न के साथ देखा है लेकिन उत्तर नहीं मिला। मेरे पास एक आसान नक्शा है जिसे मैंने Google मानचित्र जावास्क्रिप्ट एपीआई v3 का उपयोग करके बनाया है। मानचित्र में कुछ मार्कर हैं जो प्रत्येक मार्कर के लिए विशिष्ट जानकारी प्रदर्शित करने के लिए एक infowindow से जुड़े हुए हैं। मैं infowindow में एक Google चार्ट जोड़ना चाहता हूं लेकिन यह पता नहीं लगा सकता कि इसे कैसे किया जाए। मैं प्रत्येक एकल पोस्ट (यहां और अन्य मंचों में) ढूंढ सकता था और मैंने देखा है कि अन्य लोग कुछ ऐसा करने की कोशिश कर रहे हैं लेकिन ऐसा लगता है कि कोई विशिष्ट जवाब नहीं है। मैंने देखा है कि लोग फ़्यूज़न टेबल का उपयोग करके ऐसी चीज कर रहे हैं, लेकिन यह मेरा मामला नहीं है क्योंकि मैं एक 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

मैं कई विभिन्न दृष्टिकोण की कोशिश की है अभी के लिए मैं एक साधारण नक्शा जो कोड नीचे दिखाया गया है है और जो मेरे लिए अधिक स्पष्ट प्रतीत होता है वह थाइंडिंडो की सेट सामग्री सामग्री के भीतर एक कंटेनर() जोड़ना था और फिर एक बाहरी फ़ंक्शन को कॉल करना जो चार्ट बनाता है। ऐसा लगता है कि फ़ंक्शन कंटेनर नहीं देख सकता है।

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

मैं, कोई त्रुटि के साथ कोड निष्पादित करने के लिए प्रबंधित किया है लेकिन कुछ भी नहीं दिखाया गया है: मैं भी setContent संपत्ति में चार्ट के लिए पूरे कोड एम्बेड करने के लिए के रूप में इस पोस्ट पर सुझाव की कोशिश की है। Anotther दृष्टिकोण किसी अन्य HTML पृष्ठ में चार्ट बनाएगा और किसी भी तरह से इस पृष्ठ को सेट सामग्री संपत्ति पर सेट करेगा, कोई सफलता प्राप्त नहीं की जाएगी।

मैं हार मानने वाला हूं क्योंकि मुझे ऐसा करने का कोई तरीका नहीं दिख रहा है।

मैं किसी भी मदद की सराहना करेंगे।

धन्यवाद

जोस

Answer 1

यह doens't काम करने के लिए के रूप में कार्य कंटेनर नहीं देख सकते हैं लगता है।

आप drawChart()

लेकिन मैं तुम्हें चार्ट मार्कर से संबंधित डेटा के साथ आकर्षित करना चाहते अनुमान लगाना तर्क के रूप में कंटेनर प्रदान कर सकते हैं, तो मैं drawChart को तर्क के रूप में मार्कर पारित करने के लिए सुझाव है() और जानकारी बनाओ वहाँ विन्डो।

नमूना-कोड (मार्कर-संबंधी डेटा की implementaion बिना, यह स्पष्ट नहीं है के रूप में डेटा की किस तरह आप आकर्षित करना चाहते)

 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/