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>    O1: Agriculture Production</p>';}
if(numUnread[i][8]!=""){outputs=outputs+'<p>    O2: Self-Employment</p>';}
if(numUnread[i][9]!=""){outputs=outputs+'<p>    O3: 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]+'    ';}
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]+' '+numUnread[i][4]+'</size></b>:  <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>
|