isovector · July 7, 2019 17:44 · isovector · Jul 10, 2019
diff --git a/code.gs b/code.gs
 var SPREADSHEET_ID='Google Sheets ID';
 var SHEET_NAME = 'Google Sheets Table Name';

 function doGet(request) {
  var callback = request.parameters.jsonp;
  var range = SpreadsheetApp.openById(SPREADSHEET_ID).getSheetByName(SHEET_NAME).getDataRange();
  var json = callback+'('+Utilities.jsonStringify(range.getValues())+')';
  
  return ContentService.createTextOutput(json).setMimeType(ContentService.MimeType.JAVASCRIPT);
 }
diff --git a/data.tsv b/data.tsv
 Timestamp Place Name	Address
 7/15/2014 10:29:43	home	Salem,MA
 7/15/2014 11:06:02	Nearby	Beverly,MA
 7/15/2014 11:23:44	Big City	Boston,MA
 7/15/2014 11:35:20	Many Auto shops	Peabody,MA
 7/15/2014 11:37:04	Autos..	Danvers,MA
 7/15/2014 12:22:18	Commute	Wonderland Station, MA
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <html>
 <head>
    <title>Googlemaps + Google Sheets + Google Forms</title>
    <style>        
        html,body{
            margin:0;
            padding:0;
            width:100%;
            height:100%;
        }
    
        #map_canvas{
            float:left;
            width:50%;
            height:100%;
        }
        #panel{
            float:right;
            width:50%;
            height:100%;
            background-color:#000;
        }
        #gform{
            height: calc(100% - 22px);
        }
    </style>
 </head>

 <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
 <script>
    var DATA_SERVICE_URL="https://script.google.com/macros/s/AKfycbxHrqv5x-2lCtZJ1W49q0rjU6ATnSLZWAtJADqBj1Kil32H80pL/exec?jsonp=callback";
    
    var geocoder;
    var map;
    
    function initialize() {
        //Create a geocoder
        geocoder = new google.maps.Geocoder();
        
        map=new google.maps.Map(document.getElementById('map_canvas'),{
            center:new google.maps.LatLng(42.456187,-71.0653),
            zoom:10,
            maxZoom:20,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        });
        
        //Inject JavaScript (returned JSON) into the head of the page.
        var scriptElement=document.createElement('script');
        scriptElement.src=DATA_SERVICE_URL;
        document.getElementsByTagName('head')[0].appendChild(scriptElement);
        
        
    }
    
    function callback(data) {
        for (var i=1;i<data.length;i++) {
            
            address=data[i][2];
            
            //Geocode the JSON returned from callback function.
            codeAddress();
        }
        
    }
    
    function codeAddress(){
        
        //Google Async service.
        geocoder.geocode({'address':address},function(results,status){
            
                if (status == google.maps.GeocoderStatus.OK) {
                    
                    var marker = new google.maps.Marker({
                        position:results[0].geometry.location,
                        map:map
                    });
                }else{
                    alert('Geocode was not successful for the following reason:' + status);
                }
            });
            
    }
    
 </script>
 <body onload="initialize()">
    <div id="map_canvas"></div>
    <div id="panel">
        <div id="ctrl">
            <input type="button" value="Update Map" onclick="document.location.reload(true)">
        </div>
        <div id="gform">
            <iframe id="form" src="https://docs.google.com/forms/d/1u0aw5rz6JFfJf0KvjYn900VMOLWlI8yfiQnKysZFHaA/viewform?embedded=true" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
        </div>        
    </div>
 </body>
 </html>
	var SPREADSHEET_ID='Google Sheets ID';
	var SHEET_NAME = 'Google Sheets Table Name';

	function doGet(request) {
	var callback = request.parameters.jsonp;
	var range = SpreadsheetApp.openById(SPREADSHEET_ID).getSheetByName(SHEET_NAME).getDataRange();
	var json = callback+'('+Utilities.jsonStringify(range.getValues())+')';

	return ContentService.createTextOutput(json).setMimeType(ContentService.MimeType.JAVASCRIPT);
	}
	Timestamp Place Name Address
	7/15/2014 10:29:43 home Salem,MA
	7/15/2014 11:06:02 Nearby Beverly,MA
	7/15/2014 11:23:44 Big City Boston,MA
	7/15/2014 11:35:20 Many Auto shops Peabody,MA
	7/15/2014 11:37:04 Autos.. Danvers,MA
	7/15/2014 12:22:18 Commute Wonderland Station, MA
	<!DOCTYPE html>

	<html>
	<head>
	<title>Googlemaps + Google Sheets + Google Forms</title>
	<style>
	html,body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	}

	#map_canvas{
	float:left;
	width:50%;
	height:100%;
	}
	#panel{
	float:right;
	width:50%;
	height:100%;
	background-color:#000;
	}
	#gform{
	height: calc(100% - 22px);
	}
	</style>
	</head>

	<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
	<script>
	var DATA_SERVICE_URL="https://script.google.com/macros/s/AKfycbxHrqv5x-2lCtZJ1W49q0rjU6ATnSLZWAtJADqBj1Kil32H80pL/exec?jsonp=callback";

	var geocoder;
	var map;

	function initialize() {
	//Create a geocoder
	geocoder = new google.maps.Geocoder();

	map=new google.maps.Map(document.getElementById('map_canvas'),{
	center:new google.maps.LatLng(42.456187,-71.0653),
	zoom:10,
	maxZoom:20,
	mapTypeId:google.maps.MapTypeId.ROADMAP
	});

	//Inject JavaScript (returned JSON) into the head of the page.
	var scriptElement=document.createElement('script');
	scriptElement.src=DATA_SERVICE_URL;
	document.getElementsByTagName('head')[0].appendChild(scriptElement);


	}

	function callback(data) {
	for (var i=1;i<data.length;i++) {

	address=data[i][2];

	//Geocode the JSON returned from callback function.
	codeAddress();
	}

	}

	function codeAddress(){

	//Google Async service.
	geocoder.geocode({'address':address},function(results,status){

	if (status == google.maps.GeocoderStatus.OK) {

	var marker = new google.maps.Marker({
	position:results[0].geometry.location,
	map:map
	});
	}else{
	alert('Geocode was not successful for the following reason:' + status);
	}
	});

	}

	</script>
	<body onload="initialize()">
	<div id="map_canvas"></div>
	<div id="panel">
	<div id="ctrl">
	<input type="button" value="Update Map" onclick="document.location.reload(true)">
	</div>
	<div id="gform">
	<iframe id="form" src="https://docs.google.com/forms/d/1u0aw5rz6JFfJf0KvjYn900VMOLWlI8yfiQnKysZFHaA/viewform?embedded=true" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
	</div>
	</div>
	</body>
	</html>