Making Highcharts appear in a infowindow window when making an AJAX request with Google Maps

StackOverflow https://stackoverflow.com/questions/23656789

Вопрос

Using this demo here I created a map from my mySQL table.

I now want to place a HighChart in the infowindow however I can't get it to appear, evenually I want to pull the chart data from the same table as the marker information.

Any suggestions would be appreciated.

Page is here http://map.itp.ca/ I'm going to list the unemployment in cities against the national avereage.

<!DOCTYPE html>
 <html>
<head>
<title>Employment</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://map.itp.ca/css/style.css" rel="stylesheet">


<script type="text/javascript">
 $(function () {
    $('#chart_joblessness').highcharts({
        chart: {
            type: 'bar',
            backgroundColor:'rgba(255, 255, 255, 0.1)'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: ['Total Workforce', 'Youth', 'Women', 'Imigrants']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Percentage'
            }
        },
        legend: {
            reversed: true
        },
       plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
            series: [{
            name: 'ICT Jobs',
            data: [2.7, 4.4, 3.1, 2.8]
        }, {
            name: 'Canada',
            data: [7, 13, 6, 7.9]
         }]
    });
});
 </script>  

<script src="http://map.itp.ca/charts/js/highcharts.js"></script>
<script src="http://map.itp.ca/charts/js/modules/exporting.js"></script>    

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?   sensor=true"></script>
<script type="text/javascript">
//<![CDATA[

var customIcons = {
  LargeUrban: {
    icon: 'img/chart-pin.png'
  },
  Medium: {
    icon: 'img/chart-pin.png'
  },
  Small: {
    icon: 'img/chart-pin.png'
  }
};


function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(47.899754, -90.137494),
    zoom: 5,
    mapTypeId: 'roadmap'
 });




  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("phpsqlajax_genxml2.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("city");
      var type = markers[i].getAttribute("type");
      var population = markers[i].getAttribute("population");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = '<div id="content">'+
        '<h2 id="firstHeading" class="firstHeading">' + name + '</h2>'+
        '<div id="bodyContent">'+
        '<p><b>ICT Employment</b>, ' + population + ' </p>' +
        '<div id="chart_joblessness" style="z-index:9999; min-width: 500px; max-width: 600px; height: 230px;"></div>'+
        '<p><a href="#" class="btn btn-primary" role="button">Additional City Data</a>  '+
                    '<a href="#" class="btn btn-primary" role="button">Another Button</a></p>'+
                    '</div>';

      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
    map.setCenter(marker.getPosition());
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);when making an AJAX request
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

//]]>


<body  onload="load()">

    <div class="contact">
    <div class="map" id="map"></div>
    </div>

</body>

Это было полезно?

Решение

I have worked with google charts: https://developers.google.com/chart/?hl=es.

Google charts work with JSON, I can see a JSON structure in your code, then if you are programming on PHP, you can use the json_encode and json_decode functions to generate the correct JSON structure. It's very simple, you have to do queries to the database, after that, you only need to organize the data in an JSON structure.

this is the documentation about JSON PHP functions: http://www.php.net/manual/en/book.json.php

I hope this information helps you.

Good luck.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top