2 maps 1 page...2nd map not rendering correctly

[James Corey]

I have 2 tabs, each has a map.  The first map is rendering correctly, but the second map is only displaying 1 tile (the rest grey) and the map is not centered on the correct area.  What am I doing wrong?  Thanks.

      var map = L.map(location).setView([latitude, longitude], 5);

      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {

        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',

        maxZoom: 18,

        id: '',

        accessToken: ''

      }).addTo(map);

      var map2 = L.map(location).setView([latitude, longitude], 5);

      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {

        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',

        maxZoom: 18,

        id: '',

        accessToken: ''

      }).addTo(map2);

[Anika Halota]

Looks like you place both of them into the same div, "location". You'll have to give them each their own div to be placed into.

Set up a https://jsfiddle.net/ when you have specific questions like this and it will make it easier for others to look at your code and provide you with a link to a solution.