title: Google Maps API Dynamic Multiple Polyline Creation
body: <p>So I have a site under developement and a REST server behind it for a presentation,I'm checking some devices from the site and send the names through a GET on the server.The server finds some geo positioning data from a mySQL DB and returns them to the site as a response to the GET.</p>
  
  <p>I want to dynamically draw a polyline for each different device and add to it any number of positions returned from the DB for each device.</p>
  
  <p>Problem is for a polyline to be created I need: </p>
  
  <p>-- a <code>markers</code> array for the markers(one marker for each position I get from the DB) </p>
  
  <p>-- and a <code>latlngs</code> array for the position's location on a map</p>
  
  <p>for each device!</p>
  
  <p>The number of devices I check for or the positions I receive for each one of them are not static.I tried creating new arrays with <code>eval("var " + DeviceID + "_Markers = [];");</code> but it doesn't seem to work...</p>
  
  <p>Besically what I do right now is:
  Get the results from the DB in a very big string which has <code>$$</code> between the different devices, <code>||</code> between the different positions of the devices and <code>#</code> between the fields of each position!
  Here is the code that gets and "de-codes" the string:</p>
  
  <pre><code>var devArray = respData.split("$$");
  
  for (i=0 ; i &lt; devArray.length ; i++)
  {
      var posArray = devArray[i].split("||");
      for (j=posArray.length-1 ; j &gt;= 0 ; j--)
      {
          var data = posArray[j].split("#");
          var DeviceID = data[0];
          var Date = data[1];
          var Latitude = data[2];
          var Longitude = data[3];
          var Altitude = data[4];
          var Angle = data[5];
          var Speed = data[6];
          parent.ifr2.createLocationMarker(DeviceID,Date,Latitude,Longitude,Altitude,Angle,Speed);
      }
  }
  </code></pre>
  
  <p>the <code>createLocationMarker()</code> calls the specific method on the htmp page that the google maps api is and as it says it creates a new location marker for each position read.</p>
  
  <pre><code>    function createLocationMarker(DeviceID,Date,Latitude,Longitude,Altitude,Angle,Speed) {
  
      var newLocation =  new google.maps.LatLng(Latitude,Longitude);
      var locationMarker = new google.maps.Marker();
  
      locationMarker.setOptions({
        icon: locationIcon,
        shadow: newShadow,
        draggable: true,
        map: map,
        position: newLocation
      });
  
      if ((eval("typeof " + DeviceID + "_latlngs") === "undefined") {
          // latlngs Array
          eval("var " + DeviceID + "_latlngs = new google.maps.MVCArray();");
  
          // markers Array
          eval("var " + DeviceID + "_Markers = [];");
  
          // displayPath
          eval("var " + DeviceID + "_displayPath = new google.maps.Polyline({ map: map, strokeColor: '#" + Math.floor(Math.random()*16777215).toString(16) + "' ,strokeOpacity: 1.0, strokeWeight: 2, path: latlngs });");
      }
  
      eval(DeviceID + "_Markers.push(locationMarker);");
      eval(DeviceID + "_latlngs.push(newLocation);");
      eval(DeviceID + "_displayPath.setPath(" + DeviceID + "_latlngs);");
  
      locationMarker.setMap(map);
  
      var content = "&lt;b&gt;Device ID: &lt;/b&gt;" + DeviceID + "&lt;/br&gt;&lt;b&gt;Date: &lt;/b&gt;" + Date + "&lt;/br&gt;&lt;b&gt;Latitude: &lt;/b&gt;" + Latitude + "&lt;/br&gt;&lt;b&gt;Longitude: &lt;/b&gt;" + Longitude + "&lt;/br&gt;&lt;b&gt;Altitude: &lt;/b&gt;" + Altitude + "&lt;/br&gt;&lt;b&gt;Angle: &lt;/b&gt;" + Angle + "&lt;/br&gt;&lt;b&gt;Speed: &lt;/b&gt;" + Speed + "Km/h";
  
      var infowindow = new google.maps.InfoWindow({
          content: content,
          disableAutoPan: true
      });
  
      google.maps.event.addListener(locationMarker, "dblclick", function() {
          infowindow.open(map,locationMarker);
      });
  
      map.setCenter(newLocation);
  }
  </code></pre>
  
  <p>This seems to create new arrays with <code>eval</code> on every point even though they should exist after the first time they are created...
  I'm sure there has to be a better way to implement this but I can't find any right now..
  Any Idea on how to dynamically create a polyline for each different device and add it's positions in there? (Or a way to make this work,even though I know that <code>eval</code> is not a nice way to solve it..)</p>