title: Getting data from different json files
body: <p>I found this file mappanslow.html last week on
  <a href="http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/talks/io2011/map-usability/mappanslow.html?spec=svn265&amp;r=265" rel="nofollow">http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/talks/io2011/map-usability/mappanslow.html?spec=svn265&amp;r=265</a>
  and it was very useful for me to know how to get data from a json
  file. I'm re-coding in V3 this map at present
  <a href="http://www.ville.rimouski.qc.ca/styles/carte/carte.jsp" rel="nofollow">http://www.ville.rimouski.qc.ca/styles/carte/carte.jsp</a> and my problem
  is that the user must be able to choose which data (from different
  json file) will be displayed by selecting what he wants in the select
  box under "Imprimer".
  mappaslow.html works fine with one json file but I tried to use the
  code for more than one json file and, if I list, per example, all my
  files like this:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="file1.json"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="file2.json"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="file3.json"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>the data displayed are always from the last one (file3.json).</p>
  
  <p>Does anyone please have an idea how to get around this issue?</p>
  
  <p>There is the code from mappaslow.html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="markers.json"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var map;        
  var timeout;        
  var m = [];        
  function init() {          
    map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(44.85471, -93.24185),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false
    });
    google.maps.event.addListener(map, 'bounds_changed', function() {
      clearMarkers();
      if (timeout) {
        window.clearTimeout(timeout);
      }
      timeout = window.setTimeout(function() {
        addMarkers();
  
      }, 500);
    });
  }
  function addMarkers() {
    var bounds = map.getBounds();
    for (var i = 0; i &lt; markers.length; i++) {
      var pos = new google.maps.LatLng(markers[i].lat, markers[i].lng);
      if (bounds.contains(pos)) {
        var marker = new google.maps.Marker({
          map: map,
          position: pos
        });
        m.push(marker);
      }
    }
  }
  
  function clearMarkers() {          
    for (var i = 0, marker; marker = m[i]; i++) {            
      marker.setMap(null);
    }
    m = [];
  }
  google.maps.event.addDomListener(window, 'load', init);
  &lt;/script&gt;  
  </code></pre>
  
  <hr>
  
  <p>The json files used in this example and for my map look like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>var markers = [
  {"lat":44.86065444748757, "lng":-93.26223975870084},
  {"lat":44.84990797511595, "lng":-93.22287578639873}];
  </code></pre>
  
  <p>Thanks for your suggestion @harmlessdragon, but my hope was to be able to specify the right variable just by passing the name of the selected .json in parameters, because their structure are identical. Something like:</p>
  
  <pre class="lang-js prettyprint-override"><code>  function addMarkers(jsonName) {
    var rightJson = jsonName;
    var bounds = map.getBounds();
    for (var i = 0; i &lt; rightJson.markers.length; i++) {
      var pos = new google.maps.LatLng(rightJson.markers[i].lat, rightJson.markers[i].lng);
   ...
  </code></pre>
  
  <p>Is it possible to do something like this? I tried many ways but always resulting in syntax error or something undefined.</p>
  
  <p>Don't forget the target is the map of the second link above..</p>
  
  <hr>
  
  <p>@harmlessdragon, I finally found the correct syntax for the json file:</p>
  
  <pre class="lang-html prettyprint-override"><code>var markers = [{
              "file1": [
                  {"lat": "number", "lng": "number"}, {"lat": "number", "lng": "number"}, 
          ]},{"file2": [
                  {"lat": "number", "lng": "number"}, {"lat": "number", "lng": "number"}, 
          ]},{"file3": [
                  {"lat": "number", "lng": "number"}, {"lat": number, lng: number"}
          ]           
  
  }];
  </code></pre>
  
  <p>I see with an alert that the right number of "files" is recognized by the first loop. The problem now is that anything passes into second loop:</p>
  
  <pre class="lang-html prettyprint-override"><code>for (var t = 0; t &lt; markers[i].length; t++) {
  </code></pre>