CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Loren Zimmer
Loren Zimmer

Reputation: 480

Google map api v3 add polylines from array

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?

Upvotes: 2

Views: 19447

Answers (3)

tony gil
tony gil

Reputation: 9554

to populate a javascript array from a mysql database (the rest, as i've seen, you know how to do):

<?php 
//replace this to load from database
// populate array
for($j=0;$j<10;$j++){
    $arrayData[$j] = $j*3;
}
?>
<script language="javascript" type="text/javascript">
<!--
var myArray = new Array();
<?php
//populate JS array
for($i=0;$i<10;$i++){
    ?>
    myArray[<?php echo $i;?>]="<?php echo $arrayData[$i];?>";
<?php }?>
-->
</script>

if you want to run this and test it, just include the proper html head tags before the script and this afterwards (you would obviously remove end script and begin script tags -for style)

<script language="javascript" type="text/javascript">
<!--
function showData(){
    for (var i=0;i<myArray.length;i++){
    document.getElementById('output').innerHTML += "array position: "+i+"  array content: "+myArray[i]+"<br>";
    }
}
-->
</script>
</head>
<body onLoad="showData();">
<div id="output"></div>
</body>
</html>

Upvotes: 0

Paco Valdez
Paco Valdez

Reputation: 1975

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>

Upvotes: 1

duncan
duncan

Reputation: 31912

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>

Upvotes: 9

Related Questions