Question

I found this file mappanslow.html last week on
http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/talks/io2011/map-usability/mappanslow.html?spec=svn265&r=265
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
http://www.ville.rimouski.qc.ca/styles/carte/carte.jsp 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:

<script type="text/javascript" src="file1.json"></script>
<script type="text/javascript" src="file2.json"></script>
<script type="text/javascript" src="file3.json"></script>

the data displayed are always from the last one (file3.json).

Does anyone please have an idea how to get around this issue?

There is the code from mappaslow.html:

<script type="text/javascript" src="markers.json"></script>
<script type="text/javascript">
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 < 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);
</script>  

---

The json files used in this example and for my map look like this:

var markers = [
{"lat":44.86065444748757, "lng":-93.26223975870084},
{"lat":44.84990797511595, "lng":-93.22287578639873}];

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:

  function addMarkers(jsonName) {
  var rightJson = jsonName;
  var bounds = map.getBounds();
  for (var i = 0; i < rightJson.markers.length; i++) {
    var pos = new google.maps.LatLng(rightJson.markers[i].lat, rightJson.markers[i].lng);
 ...

Is it possible to do something like this? I tried many ways but always resulting in syntax error or something undefined.

Don’t forget the target is the map of the second link above..

---

@harmlessdragon, I finally found the correct syntax for the json file:

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"}
        ]           

}];

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:

for (var t = 0; t < markers[i].length; t++) {

Answer 1

MOST RECENT EDIT:

I’m going off this example here:

http://www.json.org/js.html

var myJSONObject = {"bindings": [
    {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
    {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
    {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
   ]
};

myJSONObject.bindings[0].method    // "newURI"

Your loop should look similar to this:

function addMarkers(param) {
   if (param == "1") {
    // if it is for file one, loop through all in file one
    for (t = 0; t < markers.file1.length; t++ ) {
           var pos = new google.maps.LatLng(markers.file1[t].lat, markers.file1[t].lng)
            // then create marker, push map, etc.
     }
   } else if (param == "2") {
     // if it is for file two, loop through all in file two instead
           for (t = 0; t < markers.file2.length; t++ ) {
           var pos = new google.maps.LatLng(markers.file2[t].lat, markers.file2[t].lng)
            // then create marker, push map, etc.
     }
   } else if ( param == "3") {
     for (t = 0; t < markers.file3.length; t++ ) {
           var pos = new google.maps.LatLng(markers.file3[t].lat, markers.file3[t].lng)
            // then create marker, push map, etc.
     }
   }
}

/////////////////////////////////////////////////////////////////////////////////////////

You can’t store different data under the same name and retrieve the data without some indicator that differentiates the data. If you want to use the same variable name, then you will need to add that additional indicator into your json and merge your json files.

You can do something like this:

var markers = [
      file1: {
                {lat: number, lng: number}, {lat: number, lng: number}, etc.
      }
      file2: {
              {lat: number, lng: number}, {lat: number, lng: number}, etc.
      }
      file3: {
              {lat: number, lng: number}, {lat: number, lng: number}, etc.
      }
 ];

Then, to retrieve the data, you’ll need to add in another loop. This json structure is an array..within an array…within an array, which I don’t think is the most efficient.

      function addMarkers(param) {

            ...

          for (var i = 0; i < markers.length; i++) {
              for (var t = 0; t < markers[i].length; t++) {
                 if (markers[i] == param) {
                   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);
                  }
                 }
             }

You may want to consider looking into a hash map structure. Here’s one that I just looked up:

http://freecode-freecode.blogspot.com/2007/06/hashmap-object-in-javascript-like.html

Some syntax may be wrong in the above code, as I don’t regularly code in Javascript, but I should convey the general idea of what needs to be done.

//////////////////////////////////////////////////////////////////////////////////////////

Perhaps what we needed was information on file1.json, file2.json, and file3.json.

I’m going on a few assumptions, but here’s my guess of what’s happening:

If you have files1.json, file2.json, file3.json, etc., and you’re following the example of having var markers = [] then you have created 3 variables with the same name, which are overwriting each other, which is why files3.json, the last one you have created, is the one that remains.

Here’s what you need to pay attention to if you want this example to work for you:

// This method adds a marker by looping through the variable 
// with the name 'markers', which you created
// in the JSON file with var markers = [].
function addMarkers() {
    var bounds = map.getBounds();
    for (var i = 0; i < 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);
      }
    }
  }

If you want this example to work, you will need to make sure the json files have a variable of a different name, and make sure that the above method is changed for the new names. That might mean you will have 3 different function: addJSONFile1Markers, addJSONFile2Markers, addJSONFile3Markers, where each function handles a different variable. Alternatively, you can create a function that checks based on a parameter, which file to add markers for.

function addMarkers(FILE2) {
   if (FILE2 == "file2") {
        // do this for file2
   }
   else if (FILE3 == "file3") {
        // do this for file 3
   }
}

This is just an example in pseudo code.

If this isn’t the problem, then please provide more information regarding the json files.