Google multiple GeoMaps, API

Question

How can I use multiple GeoMaps ?
If I have only one map everything is ok. If I try to add another, without loading again the geomap visualization the map doesn't load, and if I try to load them, I get an error: Uncaught TypeError: Object #<Object> has no method 'Load' The function names are the same for the both map, if I change the functions' names for the second map then I have to change the callback

google.setOnLoadCallback(drawMap);

But, if I do so I get the error posted above....

More code:

    //first map
  <script type="text/javascript">

   google.load("visualization", "1", {"packages": ["geomap"]});

   google.setOnLoadCallback(drawMap);



    function drawMap() {

      var data = new google.visualization.DataTable();

      data.addRows(16);

      data.addColumn("string", "City");

      data.addColumn("number", "Numar anunturi");        

         data.setValue(1, 0, 'Ilfov');

        data.setValue(1, 1, 6);



      var options = {width: 800,height:400};

      options["region"] = "RO";

      options["colors"] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors

      options["dataMode"] = "markers";


      var container = document.getElementById("map_chart_div");

      var geomap = new google.visualization.GeoMap(container);

          geomap.draw(data, options);

    }

    </script> 

        //second map

    <script type="text/javascript">     

    function drawMap() {

      var data = new google.visualization.DataTable();

      data.addRows(16);

      data.addColumn("string", "City");

      data.addColumn("string", "pret/mp:");

         data.setValue(0, 0, 'Ilfov');

        data.setValue(0, 1, '50.44');    


      var options = {width: 800,height:400};

      options["region"] = "RO";

      options["colors"] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors

      options["dataMode"] = "markers";       

      var container = document.getElementById("map_pret_div");

      var geomap = new google.visualization.GeoMap(container);    

      geomap.draw(data, options);

    }

    </script>

Answer 1

I modified your code as follows and it seems to work now, although you have to be patient for the second map to load. I'm listening for the drawingDone event on the first map before firing off the second map. My theory is that this staggering prevents the two maps from stepping on each other's data structures inside of the Visualization API. But even if I'm wrong about the cause, this at least works.

My changes could use some tidying. Sorry about that. I'm in a bit of a rush, but wanted to get the working code to you before I ran off to do other things.

<script type="text/javascript">

google.load("visualization", "1", {"packages": ["geomap"],"callback": "drawMaps"});

function drawMaps() {
    drawMap1();
}

function drawMap1() {

  var data = new google.visualization.DataTable();

  data.addRows(16);

  data.addColumn("string", "City");

  data.addColumn("number", "Numar anunturi");        

     data.setValue(1, 0, 'Ilfov');

    data.setValue(1, 1, 6);



  var options = {width: 800,height:400};

  options["region"] = "RO";

  options["colors"] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors

  options["dataMode"] = "markers";


  var container = document.getElementById("map_chart_div");

  var geomap = new google.visualization.GeoMap(container);

  geomap.draw(data, options);
  google.visualization.events.addListener(geomap, 'drawingDone', drawMap2);
}

function drawMap2() {
  var data = new google.visualization.DataTable();

  data.addRows(16);

  data.addColumn("string", "City");

  data.addColumn("string", "pret/mp:");

     data.setValue(0, 0, 'Ilfov');

    data.setValue(0, 1, '50.44');    


  var options = {width: 800,height:400};

  options["region"] = "RO";

  options["colors"] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors

  options["dataMode"] = "markers";       

  var container = document.getElementById("map_pret_div");

  var geomap2 = new google.visualization.GeoMap(container);    

  geomap2.draw(data, options);

}
</script>