Google map api v3 add polylines from array

19,261

Solution 1

So you loop over the contents of data, adding things into the array, path.... and then, what? Nothing as far as I can see. Presumably you then want to use that path array to set the path for your polyline.

var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);

var path = new MVCArray;

$.getJSON('json.php', function(data) {
    //var items = [];
    $.each(data, function(key, val) {
            path.push(new google.maps.LatLng(val.lat, val.longi));
    });

    // now update your polyline to use this path
    poly.setPath(path);
});

PS: Your HTML structure is all wrong:

<body onload="initialize()">
  <div id="map_canvas" style="width:90%; height:100%"></div>

</body>

</html>

<html>
<head>

</head>
<body>

</body>
</html>

shouldn't that just be

<body onload="initialize()">
  <div id="map_canvas" style="width:90%; height:100%"></div>

</body>

</html>

Solution 2

You should put all your code within the initialize function:

<script type="text/javascript">
var poly;
var map;
function initialize() {
  var latlng = new google.maps.LatLng(38.698044, -77.210411);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  //map is already declared
  //var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

  var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  }
  poly = new google.maps.Polyline(polyOptions);
  poly.setMap(map);

  var path = new MVCArray;
  // every time the path is updated, automatically the map will update the polyline
  poly.setPath(path);

  $.getJSON('json.php', function(data) {
    //var items = [];
    $.each(data, function(key, val) {


    path.push(new google.maps.LatLng(val.lat, val.longi));

    });

  });



  var myOptions = {
    zoom: 12,
    //center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
}
</script>

19,261

Author by

Loren Zimmer

Updated on June 14, 2022

Comments

Loren Zimmer almost 2 years

I'm trying to add a set of poly lines to a google map from an array.

Here is my code:

<!DOCTYPE html>

<html>
<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">
  html { height: 90% }
  body { height: 90%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript">
var poly;
var map;
  function initialize() {
    var latlng = new google.maps.LatLng(38.698044, -77.210411);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);


     //var myLatLng = new google.maps.LatLng(0, -180);
  }


  var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  }
  poly = new google.maps.Polyline(polyOptions);
  poly.setMap(map);

var path = new MVCArray;

$.getJSON('json.php', function(data) {
  //var items = [];
  $.each(data, function(key, val) {


  path.push(new google.maps.LatLng(val.lat, val.longi));

  });

});



  var myOptions = {
    zoom: 12,
    //center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>








</head>

<body onload="initialize()">
  <div id="map_canvas" style="width:90%; height:100%"></div>

</body>

</html>

<html>
<head>

</head>
<body>

</body>
</html>

Any thoughts on why the line path.push(new google.maps.LatLng(val.lat, val.longi)); isn't adding the data in?

Or is there a better way for me to loop the data in?