2016-02-02 1 views
1

Я закодировал карту google, чтобы отобразить несколько на карте с помощью значка с возможностью нажатия.Как отобразить несколько местоположений на карте Google, извлекая данные из электронной таблицы google?

Код выглядит следующим образом

<html> 
    <head> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
    .container{width: auto; height: auto; } 
    .clear{clear: both;} 
</style> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false"> 
</script> 
<script type="text/javascript"> 
var locations = [ 
['abc', -31.987717, 115.814430, 'our place','image path', 'What is the work'], 
['abc',-32.240765, 115.904158 , 'our place','image path', 'What is the work'], 

    ]; 
    function initialize() { 
    var myOptions = { 
     center: new google.maps.LatLng(-31.65,116.688), 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("default"), 
     myOptions); 
    setMarkers(map,locations) 
    } 
    function setMarkers(map,locations){ 
     var marker, i 
for (i = 0; i < locations.length; i++) 
{ 
var loan = locations[i][0] 
var lat = locations[i][1] 
var long = locations[i][2] 
var add = locations[i][3] 
var image = locations[i][4] 
latlngset = new google.maps.LatLng(lat, long); 
    var marker = new google.maps.Marker({ 
      map: map, title: loan , position: latlngset 
     }); 
     map.setCenter(marker.getPosition()) 
     var content = "<div class='container'>" + '<div style="float:left;">' +'<h2> Heading </h2>' + add +'</div>'+ '<div style="float:right;">' +"<img src='" + image +"'/></div><div class='clear'></div></div>"  
    var infowindow = new google.maps.InfoWindow() 
    var activeWindow; 
    google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
     return function() { 
      //Close active window if exists 
      if(activeWindow != null) 
       activeWindow.close(); 
      //Open new window 
       infowindow.setContent(content); 
       infowindow.open(map,marker); 
      //Store new window in global variable 
       activeWindow = infowindow; 
     }; 
    })(marker,content,infowindow)); 
    } 
    } 
    </script> 
</head> 
<body onload="initialize()"> 
    <div id="default" style="width:100%; height:100%"></div> 
</body> 
    </html> 

Я хочу, чтобы принести товарный текст, координатный, путь изображения и т.д. из таблицы Google.

Я попробовал этот код

<html> 
     <head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script> 
</head> 
    <body> 
    <script> 
      //https://docs.google.com/spreadsheets/d/1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g/pubhtml 
      var cell1= "a1"; 
      var cell2= "b1"; 
      var cell3= "c1"; 
      var cell4= "d1"; 
$.ajax("https://docs.google.com/spreadsheet/pub?key=1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g&single=true&gid=0&range="+cell1+"&b6&output=csv").done(function(result1){ 
document.getElementById("display1").innerHTML = result1; 
}); 
$.ajax("https://docs.google.com/spreadsheet/pub?key=1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g&single=true&gid=0&range="+cell2+"&b6&output=csv").done(function(result2){ 
document.getElementById("display2").innerHTML = result2; 
       }); 
$.ajax("https://docs.google.com/spreadsheet/pub?key=1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g&single=true&gid=0&range="+cell3+"&b6&output=csv").done(function(result3){ 
document.getElementById("display3").innerHTML = result3; 
}); 
$.ajax("https://docs.google.com/spreadsheet/pub?key=1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g&single=true&gid=0&range="+cell4+"&b6&output=csv").done(function(result4){ 
document.getElementById("display4").innerHTML = result4; 
       }); 
</script> 
    <div id="display1"></div> 
    <div id="display2"></div> 
    <div id="display3"></div> 
    <div id="display4"></div> 
</body> 
    </html> 

Я просто хочу знать, как вызвать varible Result1, result2, result3, result4 значение в месте массива. помощь

что кто-нибудь оценил ..

Заранее спасибо.

+0

Объявите 'местоположения' как глобальную переменную, создайте строку в требуемом формате из данных электронной таблицы и используйте' locations.push (string) '. Запустите это перед отображением карты. – sideroxylon

+0

Можете ли вы добавить ссылку jsfiddle :) –

+0

вы можете скопировать и вставить указанный выше код в html-файл и запустить в браузере @ Gourav Makhija .. – Lipsa

ответ

0

Вы должны дождаться возвращения ajax, прежде чем сделать карту.

здесь рабочий пример для одного маркеров:

<html> 
    <head> 
    <style type="text/css"> 
      html { height: 100% } 
      body { height: 100%; margin: 0; padding: 0 } 
      #map_canvas { height: 100% } 
      .container{width: auto; height: auto; } 
      .clear{clear: both;} 
     </style> 
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
     <script type="text/javascript"> 

    var locations = []; 
    $(document).ready(initialize()) 

      function initialize() { 
       var cell1 = "a1"; 
       var cell2 = "b1"; 
       var cell3 = "c1"; 
       var cell4 = "d1"; 
       $.ajax("https://docs.google.com/spreadsheet/pub?key=1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g&single=true&gid=0&range=" + cell1 + "&b6&output=csv").done(function(result1) { 
       $.ajax("https://docs.google.com/spreadsheet/pub?key=1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g&single=true&gid=0&range=" + cell2 + "&b6&output=csv").done(function(result2) { 
        $.ajax("https://docs.google.com/spreadsheet/pub?key=1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g&single=true&gid=0&range=" + cell3 + "&b6&output=csv").done(function(result3) { 
        $.ajax("https://docs.google.com/spreadsheet/pub?key=1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g&single=true&gid=0&range=" + cell4 + "&b6&output=csv").done(function(result4) { 
         console.log("here"); 
         locations.push(result1 + ', ' + result2 + ', ' + result3 + ', ' + result4); 
         makeMap(); 
        }); 
        }); 
       }); 
       }); 

      } 

      function makeMap() { 
      var myOptions = { 
       center: new google.maps.LatLng(-31.65,116.688), 
       zoom: 5, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("default"), 
       myOptions); 
      setMarkers(map,locations) 

      google.maps.event.trigger(map, 'resize'); 
      } 
      function setMarkers(map,locations){ 
       var marker, i 
       for (i = 0; i < locations.length; i++) 
       { 
       console.log(locations); 
       var res = locations[0].split(" "); 
       console.log(res); 
       var loan = res[0] 
       var lat = -31.987717 
       var long = 115.814430 
       var add = res[3] + res[4] + res[5] 
       var image = res[6] 
       console.log(add) 
       console.log(image) 
       latlngset = new google.maps.LatLng(lat, long); 
        var marker = new google.maps.Marker({ 
          map: map, title: loan , position: latlngset 
         }); 
         map.setCenter(marker.getPosition()) 
         var content = "<div class='container'>" + '<div style="float:left;">' +'<h2> Heading </h2>' + add +'</div>'+ '<div style="float:right;">' +"<img src='" + image +"'/></div><div class='clear'></div></div>"  
        var infowindow = new google.maps.InfoWindow() 
        var activeWindow; 
        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
         return function() { 
          //Close active window if exists 
          if(activeWindow != null) 
           activeWindow.close(); 
          //Open new window 
           infowindow.setContent(content); 
           infowindow.open(map,marker); 
          //Store new window in global variable 
           activeWindow = infowindow; 
         }; 
        })(marker,content,infowindow)); 
        } 
      } 
    </script> 
    </head> 
    <body onload=""> 
     <div id="default" style="width:100%; height:100%"></div> 
    </body> 
</html> 

Примечания: Это не чистый код. Когда один запрос находится внутри другого (например, функция инициализации), мы называем Pyramid of Doom. Вы можете использовать q library для более чистого кода.

+0

Можете ли вы опубликовать чистый рабочий код для меня @ Tom Karachristos .... Этот код не работает для меня – Lipsa

+0

Я добавил полный рабочий пример для одного маркера. Скажи мне, если у тебя есть вопрос. –

0

Вот упрощенная демонстрация получения результатов ваших AJAX запросов в переменный, которая доступна для вашей функции карты:

var locations = []; //global variable array 
 

 
$(document).ready(function() { 
 
    var cell1 = "a1"; 
 
    var cell2 = "b1"; 
 
    var cell3 = "c1"; 
 
    var cell4 = "d1"; 
 
    //run each successive ajax function in the 'done' function of the previous 
 
    $.ajax("https://docs.google.com/spreadsheet/pub?key=1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g&single=true&gid=0&range=" + cell1 + "&b6&output=csv").done(function(result1) { 
 
    $.ajax("https://docs.google.com/spreadsheet/pub?key=1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g&single=true&gid=0&range=" + cell2 + "&b6&output=csv").done(function(result2) { 
 
     $.ajax("https://docs.google.com/spreadsheet/pub?key=1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g&single=true&gid=0&range=" + cell3 + "&b6&output=csv").done(function(result3) { 
 
     $.ajax("https://docs.google.com/spreadsheet/pub?key=1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g&single=true&gid=0&range=" + cell4 + "&b6&output=csv").done(function(result4) { 
 
      locations.push(result1 + ', ' + result2 + ', ' + result3 + ', ' + result4); //in the last function, push the results to the `locations` array; 
 
      //call the map function 
 
      goMap(); 
 
     }); 
 
     }); 
 
    }); 
 
    }); 
 
}); 
 

 
function goMap() { 
 
    //here's the result of your ajax requests to the spreadsheet. You can use them in your map function. 
 

 
    $('#locations').html('[' + locations + ']'); 
 
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> 
 
</script> 
 

 
<div id="locations"></div>

+0

Гораздо более читаемый, чтобы иметь первую и конечную часть URL-адреса, хранящегося в виде констант. Есть ли причина, по которой вы не можете отправлять все 4 запроса ajax параллельно? – Michael

+0

Вы можете запускать их параллельно, но вам нужно подождать, пока они не будут выполнены, прежде чем нажимать данные в массив. – sideroxylon

+0

Ну, тогда вы не должны запускать их последовательно.Если каждый запрос занимает в среднем 2 секунды, ваш код добавит четыре места на карту примерно через 8 секунд. Если вы запускаете их параллельно, вы можете добавить их после того, как вернется самый медленный запрос, который не должен превышать 2 секунды. – Michael

0

других ответов предлагает вы запустить AJAX запросы, которые на практике имеют нулевую причину, поэтому я предложу небольшое изменение. Я также пытался уменьшить репликацию кода.

var locations = []; //global variable array 

$(document).ready(function() { 
    var cells = ["a1", "b1", "c1", "d1"]; 
    var url_start = "https://docs.google.com/spreadsheet/pub?key=1-LBh3AdwWxhvlkxZrsCuJSz9y4xuBT5DRCgHC_m6F6g&single=true&gid=0&range="; 
    var url_end = "&b6&output=csv"; 

    // for each of our cells 
    for (var i = 0; i < cells.length; i++){ 
    // perform the ajax call 
    $.ajax(url_start + cells[i] + url_end).done(function(result){ 
     // once we get our reply, store it 
     locations.push(result); 
     // was this the last reply? 
     if(locations.length == 4){ 
      // then add our locations! 
      addToMap(); 
     } 
    }); 
    } 
}); 

function addToMap() { 
    //here's the result of your ajax requests to the spreadsheet. You can use them in your map function. 
    $('#locations').html('[' + locations.join(", ") + ']'); 
} 

Это должно быть немного, но заметно быстрее.

0

Если вы хотите сделать это без написания кода, ознакомьтесь с GeoSheets. Это дополнение для электронных таблиц Google, которое позволяет вам создавать карту непосредственно из вашей электронной таблицы и вставлять ее на свой веб-сайт. Обратитесь к advanced docs за информацией о том, как заставить всплывающее окно работать с данными из столбца в электронной таблице.