Create Multiple Maps object with polylines

Question

Wonder what I am doing wrong, I want to create multiple map objects, with their own polylines based on an encoded latlng, I get it to work with one map, but can't get it right with multiple.

var outerDiv = document.getElementById('myOuterDiv');
var encodedlatlngs = ["ah|qIe{ow@wHagSvuIwfF", "yy`rIg}uu@v}MpnBeK{cY`bKa{@", "ah|qIe{ow@wHagSvuIwfF"];

   function initialize() {
        for(i = 0; i < encodedlatlngs.length; i++){             
            var myMap = document.createElement('div');
                myMap.className = 'map' + i;
                myMap.setAttribute("height", "200");
                myMap.setAttribute("width", "400");
                initMap(encodedlatlngs[i], myMap.className);
                outerDiv.appendChild(myMap);
              });           
            }




    google.maps.event.addDomListener(window, "load", initialize);
    function initMap(encoded_latlngs,mapID) {   

    map = new google.maps.Map(document.getElementById(mapID), {
              zoom: 10,
              center: {lat: 55.570, lng: 9.000},
              mapTypeId: google.maps.MapTypeId.TERRAIN
            });

             var decode2 = google.maps.geometry.encoding.decodePath(encoded_latlngs);

            // Construct the polyline.
            var polyline = new google.maps.Polyline({
                path: decode2,
                strokeColor: '#036eff',
                strokeOpacity: 0.8,
                strokeWeight: 3,
                fillOpacity: 0.35
            });

            polyline.setMap(map);
            infoWindow = new google.maps.InfoWindow;
          }

Answer 1

1. You are attempting to retrieve the reference to the div with id="outerDiv" before it is present in the DOM.
2. there is a syntax error (an extra ")" after the for loop).
3. you need to attach the myMap div to the DOM before you render the map.
4. you need to pass the map's id to your initMap function (document.getElementById only works for ids, not classNames).
5. you need to set the size of the element with:

myMap.setAttribute("style", "height: 200px; width: 400px;");

proof of concept fiddle

code snippet:

var encodedlatlngs = ["ah|qIe{ow@wHagSvuIwfF", "yy`rIg}uu@v}MpnBeK{cY`bKa{@", "ah|qIe{ow@wHagSvuIwfF"];

function initialize() {
  var outerDiv = document.getElementById('myOuterDiv');
  for (i = 0; i < encodedlatlngs.length; i++) {
    var myMap = document.createElement('div');
    myMap.id = 'map' + i;
    myMap.setAttribute("style", "height: 200px; width: 400px;");
    outerDiv.appendChild(myMap);
    initMap(encodedlatlngs[i], myMap.id);
  };
}

google.maps.event.addDomListener(window, "load", initialize);

function initMap(encoded_latlngs, mapID) {

  map = new google.maps.Map(document.getElementById(mapID), {
    zoom: 10,
    center: {
      lat: 55.570,
      lng: 9.000
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var decode2 = google.maps.geometry.encoding.decodePath(encoded_latlngs);

  // Construct the polyline.
  var polyline = new google.maps.Polyline({
    path: decode2,
    strokeColor: '#036eff',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillOpacity: 0.35
  });

  polyline.setMap(map);
  infoWindow = new google.maps.InfoWindow;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="myOuterDiv"></div>