After exploring the demo available here, I successfully created a map using data from my MySQL table.
Now, my goal is to include a HighChart in the infowindow. However, despite several attempts, I am unable to make it appear. Ultimately, I aim to retrieve chart data from the same table that contains the marker information.
If you have any suggestions or tips on how to achieve this, please feel free to share them.
You can view the page here. The objective is to display unemployment rates in different cities compared to the national average.
<!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>