2014-07-04 66 views
0

我试图呈现一个谷歌地图在对话框中,当用户点击下面的Google Spreadsheet无法使用App脚本

地图不会渲染Maps->极点的位置,以使在对话谷歌地图。

应用脚本功能

function renderPoleLocations(){ 
    var html = HtmlService.createHtmlOutputFromFile('render.html'); 
    SpreadsheetApp.getUi() // Or DocumentApp or FormApp. 
     .showModalDialog(html, 'Pole Locations'); 
} 

render.html是获取由HTML服务称为文件。我期待地图在这个文件中呈现。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Geocoding service</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
     #panel { 
     position: absolute; 
     top: 5px; 
     left: 50%; 
     margin-left: -180px; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
var geocoder; 
var map; 
function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var mapOptions = { 
    zoom: 8, 
    center: latlng 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
} 

function codeAddress() { 
    var address = document.getElementById('address').value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="panel"> 
     <input id="address" type="textbox" value="Sydney, NSW"> 
     <input type="button" value="Geocode" onclick="codeAddress();"> 
    </div> 
    <div id="map-canvas"></div> 
    </body> 
</html> 

回答