INDEX [Energy]

Browser Side Script

Function initMap [Energy]

The function initializes the map and markers, populate map with the data

Function clearMarkers [Energy]

The function cleans the map by deleting the markers

Function Y2017 [Energy]

The function adds the markers to year (2017)

Function Y2018 [Energy]

The function adds the markers to year (2018)

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="ja">
<style>
p{
    font-family: "Roboto";
}
div{
    font-family: "Roboto";
}
</style>
<head>

<title>ENERGY MONITORING</title>
</head>

<body>

<center><p><font size="5">ENERGY MONITORING</size></p></center>
<div id="floating-panel">
<center><input onclick="Y2017();" type=button value="2017">
<input onclick="Y2018();" type=button value="2018">
</center>
</div>
<p></p>
<div id="map" style="width:1400px; height:550px"></div>
<script>
var map;
var markers = [];
      
google.script.run.withSuccessHandler(onSuccess).import();

function onSuccess(numUnread) {
initMap(numUnread);
}

function initMap(numUnread) {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: { lat: 0, lng: 0 },
mapTypeId: 'terrain'
});

var infowindow = new google.maps.InfoWindow();

for (i = 0; i < numUnread.length; i++) {
var pos = { lat: numUnread[i][2], lng: numUnread[i][3] };

markers[i] = new google.maps.Marker({
position: pos,
map: map,
year: numUnread[i][4] 
});

var contentString = numUnread[i][3] ;

google.maps.event.addListener(markers[i], 'click', (function(marker, i) {
return function() {
google.maps.event.trigger(map, 'click')

var outputs="";
if(numUnread[i][7]!=""){outputs='<p>&nbsp&nbsp&nbsp&nbspA1: Fuel & Cookstove distribution</p>';}
if(numUnread[i][8]!=""){outputs=outputs+'<p>&nbsp&nbsp&nbsp&nbspA2: Community/Household Lighting</p>';}
if(numUnread[i][9]!=""){outputs=outputs+'<p>&nbsp&nbsp&nbsp&nbspO3: Wage-Employment</p>';}

var link="";
if(numUnread[i][13]!=""){link='<p><a href="'+numUnread[i][13]+'" target="_blank">Country Analysis Note</a></p>';}

var Baseline="";
if(numUnread[i][10]!=""){Baseline='<p><b>Baseline:</b> '+numUnread[i][10]+'&nbsp&nbsp&nbsp&nbsp';}
if(numUnread[i][11]!=""){Baseline=Baseline+'<b>Endline:</b> '+numUnread[i][11]+'</p>';}

var contentString = '<div id="bodyContent"><p><b><font size="5">'+numUnread[i][1]+'&nbsp'+numUnread[i][4]+'</size></b>:&nbsp&nbsp<font size="4">'+numUnread[i][14]+'</p>'+
'<p><b>PPG:</b> '+numUnread[i][5]+'</p>'+
'<p><b>Partners:</b> '+numUnread[i][6]+'</p>'+
'<p><b>Outputs:</b> '+outputs+Baseline+
'<p><a href="'+numUnread[i][12]+'" target="_blank">Monitoring Template</a></p>'+
link+'</size></div>';
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(markers[i], i));

}
}

function clearMarkers() 
{
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
}

function Y2017() {
clearMarkers() ;
for (var i = 0; i < markers.length; i++) {
if(markers[i]["year"]==2017){markers[i].setMap(map);}
}
}

function Y2018() {
clearMarkers() ;
for (var i = 0; i < markers.length; i++) {
if(markers[i]["year"]==2018){markers[i].setMap(map);}
}
}
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZRvWZZ_w-oKlpv0G1uiIdLPnqDKGAYpc&callback=initMap"></script>
</body>

</html>