Question

127

Google map api v3 add polylines from array

rated 0 times [ 133] [ 6] / answers: 1 / hits: 19435 / 13 Years ago, fri, november 18, 2011, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

karolinab

Add To Favorites

Follow

Total Points: 644

Total Questions: 98

Total Answers: 117

Location: Vanuatu

Member since Mon, Dec 7, 2020

4 Years ago

answered 13 Years ago dusty · Accepted Answer

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>