Work with multiple Google map instances

#1

Using dburles:google-maps package, I’ve loaded multiple maps (template named “routeMap” for each map) into a single page. When each map is ready, I want to set zoom levels. (But the exact thing I’m going to load some paths with waypoints form the database for each map, for the simplicity, let’s focus on simple zooming thing).

Template.routeMap.onRendered(function () {
    GoogleMaps.ready('map' + readyCount + '', function (map) {
        map.instance.setZoom(15);
        console.log("map map" + readyCount + " is ready");
        readyCount++;
    });
});

Here, the log eg:- “map map2 is ready” prints out for each map. But the map.instance.setZoom(15) only works for the first map. Why the zoom code doesn’t work for other maps?

#2

Got the solution. :grin:
the map name sent in to the .ready function was the same. (all the callback functions were executed on one map)

So following is the corrected one.

   var mapName = "map" + renderedCount;
   renderedCount++;
   GoogleMaps.ready(mapName, function (map) {
        map.instance.setZoom(15);
        console.log("map map" + readyCount + " is ready");
        readyCount++;
   });`