Вот моя ситуация: у меня есть список координат Google, который я хочу отобразить на простой карте. Эту карту я хочу разместить на боковой панели в листах Google. Это будет сложнее, чем я go, но я борюсь с основами.
Итак, я хочу импортировать координаты C2: D2 в мой HTML, поэтому я использовал это: google.script.run.withSuccessHandler (initMap) .selectAddress ().
Кажется работать для большинства вещей, но когда я использую его для координат маркера, ничего не отображается. Если я заменю "var lat = CoordArray [0]; var lng = CoordArray [1];" с "var lat = 51.0366961; var lng = -114.0744921;" в HTML появляется маркер.
Даже если я сделаю «var CoordArray = [51.0366961, -114.0744921]» в коде JS, маркер все равно не будет отображаться. Таким образом, проблема связана с передачей информации между двумя страницами.
Мне просто нужна боковая панель с интерактивной картой, основанная на координатах из листа, которые я могу понять и изменить.
Итак, моя кодовая страница JS выглядит следующим образом:
function mapSidebar(){
var html = HtmlService.createHtmlOutputFromFile('Map.html')
.setTitle("Map Sidebar");
SpreadsheetApp.getUi().showSidebar(html);
};
//------------------------------------------------------------------------------------------------
function selectAddress(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("maps?");
var CoordArray = sheet.getRange("C2:D2").getValues(); // C2:D2 = 51.0366961,-114.0744921
return CoordArray;
};
//----------------------------------------------------------------------------------------------
Моя Html страница (Карта. html) выглядит следующим образом:
и да, я заменил, вставил свой ключ API в ссылку https://maps.googleapis.com/.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap(CoordArray) {
var lat = CoordArray[0];
var lng = CoordArray[1];
var markerPosition = {lat: lat,lng: lng}
var map = new google.maps.Map(document.getElementById('map'), {
center:{lat: 51.0366961,lng: -114.0744921},
zoom: 8,
});
var marker = new google.maps.Marker({position: markerPosition, map: map});
}
google.script.run.withSuccessHandler(initMap).selectAddress();
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY=initMap">
</script>
</body>
</html>