infowindow question
want to add an infowindow in overley's marker
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Map-Test</title>
<script src="https://cdn.jsdelivr.net/gmap3/7.2.0/gmap3.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzlZxe7Hg60lCe2pXEDiVY7we11YphLZI®ion=GB"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/gauge.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
</head>
<body>
<div id="map"></div>
<div id="ShanhuaChart1"></div>
<div id="ShanhuaChart2"></div>
</body>
<script src="app.js"></script>
</html>
CSS
#map {
height: 100%;
width: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#ShanhuaChart1 {
width: 40%;
height: 20%;
}
#ShanhuaChart2 {
width: 200px;
height: 200px;
}
JavaScript
// test gmap3 feature
// set lat/lng for map's center
var uluru = {
lat: -25.363,
lng: 131.044
};
let markerShanhua = [23.11509722, 120.2971417];
// set map
let map = $('#map').gmap3({
zoom: 10,
address: "Taiwan Tainan",
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// draw charts
map.marker({
position: markerShanhua
}).overlay({
position: markerShanhua,
content: ShanhuaChart1,
x: 30,
y: -50
});
map.marker({
position: markerShanhua
}).overlay({
position: markerShanhua,
content: ShanhuaChart2,
x: -200,
y: -75
});
// set markers with infowindow
map.marker({
address: "Taiwan Tainan"
}).infowindow({
content: "Hello from Uluru"
}).then(function (infowindow) {
console.log("this is this");
console.log(this);
console.log("this is infowindow");
console.log(infowindow);
var map = this.get(0);
var marker = this.get(1);
console.log("this is map");
console.log(map);
console.log("this is marker");
console.log(marker);
marker.addListener('click', function () {
infowindow.open(map, marker);
});
});
// do draw charts by html element
//Shanhua
var _ShanhuaChart1 = new CanvasJS.Chart("ShanhuaChart1", {
title: {
text: "AQI"
},
animationEnabled: true,
backgroundColor: "rgba(255,255,255,0.5)",
data: [{
type: "spline",
dataPoints: [{
x: new Date('2018-05-12 03:00:00'),
y: 460
},
{
x: new Date('2018-05-12 04:00:00'),
y: 450
},
{
x: new Date('2018-05-12 05:00:00'),
y: 500
},
]
}]
});
_ShanhuaChart1.render();
var _ShanhuaChart2 = AmCharts.makeChart("ShanhuaChart2", {
"hideCredits": true,
"type": "gauge",
"theme": "light",
"axes": [{
"axisAlpha": 0,
"tickAlpha": 0,
"labelsEnabled": false,
"startValue": 0,
...