debug/multiple.html

<!DOCTYPE html>
<html>
<head>
    <title>Mapbox GL JS debug page</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
    <style>
        body { margin: 0; padding: 0; }
        .map { width: 300px; height: 300px; display: block; float: left; margin: 5px; }
    </style>
</head>

<body>
<div class='map'></div>
<div class='map'></div>
<div class='map'></div>
<div class='map'></div>

<script src='/dist/mapbox-gl-dev.js'></script>
<script src='/debug/access_token_generated.js'></script>
<script>

var style = {
    "version": 8,
    "sources": {
        "satellite": {
            "type": "raster",
            "url": "mapbox://mapbox.satellite",
            "tileSize": 256
        },
        "streets": {
            "type": "vector",
            "url": "mapbox://mapbox.mapbox-streets-v7"
        }
    },
    "layers": [{
        "id": "background",
        "type": "background",
        "paint": {
            "background-color": "rgb(4,7,14)"
        }
    }, {
        "id": "satellite",
        "type": "raster",
        "source": "satellite"
    }, {
        "id": "road",
        "type": "line",
        "source": "streets",
        "source-layer": "road",
        "paint": { "line-color": "rgb(55,89,144)",  "line-width": 4  }
    }]
};

function addMap (container) {
    var map = new mapboxgl.Map({
        container: container,
        minZoom: 14,
        zoom: 15.5,
        center: [-122.514426, 37.562984],
        bearing: -96,
        style: style,
        hash: false
    });
}

var containers = document.querySelectorAll('.map');
for (var i = 0; i < containers.length; i++) {
    addMap(containers[i]);
}

</script>
</body>
</html>