user3518270 user3518270 - 2 months ago 10
HTML Question

How to display multiple location in a google map by retrieving the data from google spreadsheet?

I coded the google map to display multiple in map with clickable icon.

The code is as follows

<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>


I want to fetch the Heading text, co-ordinate, image path etc from google spreadsheet.

I have tried this code

<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>


I simply wish to know how to call varible result1, result2, result3, result4 value in location array.

Anyone's help appreciated..

Thanks in advance.

Answer

You must wait for the return of ajax before make the map.

here a working example for one marker:

<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>

Note: This is not clean code. When one request is inside the other(like the initialize function) we named as Pyramid of Doom. You can use q library for more clean code.