INDEX

Browser Side Script

Function initMap

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

Function clearMarkers

The function cleans the map by deleting the markers

Function Y2017

The function adds the markers to year (2017)

Function Y2018

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
<!DOCTYPE html>
<html lang="ja">
<style>
p{
    font-family: "Roboto";
}
div{
    font-family: "Roboto";
}
</style>
<head>

<title>LIVELIHOODS MONITORING</title>
</head>

<body>

<center><p><font size="5">LIVELIHOODS 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&nbspO1: Agriculture Production</p>';}
if(numUnread[i][8]!=""){outputs=outputs+'<p>&nbsp&nbsp&nbsp&nbspO2: Self-Employment</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>