Bing Maps: Two Maps on webpage

I'm trying to display two Bing maps on the same webpage, however my code is only displaying the second map (see code below).

I've already tried with async (scripts at end of <body>) and sync (scripts inside <head>) options but I'm getting the same error.

Any idea of how to fix it? Appreciate it!

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id='printoutPanel'></div>
    <h1>Map 1: </h1>
    <div id='myMap' style='width: 30vw; height: 30vh;'></div>

    <h1>Map 2:</h1>
    <div id='myMap2' style='width: 30vw; height: 30vh;'></div>


    <script type='text/javascript'>
        function loadMapScenario() {
            var loc1 = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

            var navigationBarMode1 = Microsoft.Maps.NavigationBarMode;
            var map1 = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                credentials: 'My Bing Maps Key',
                navigationBarMode: navigationBarMode1.compact, //uncomment to show/hide compact navigation bar
                center: loc1,
                zoom: 16,
            });
        }
    </script>

    <script type='text/javascript'>
        function loadMapScenario() {
            var loc2 = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

            var navigationBarMode2 = Microsoft.Maps.NavigationBarMode;
            var map2 = new Microsoft.Maps.Map(document.getElementById('myMap2'), {
                credentials: 'My Bing Maps Key',
                navigationBarMode: navigationBarMode2.compact, //uncomment to show/hide compact navigation bar
                mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                center: loc2,
                zoom: 16,
            });
        }
    </script>

    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>

</body>

Solution

If you have more than one function with the same name the last to be defined will override the others.

You can merge your code in to one function which will allow you to create both maps in the script callback:

<script>
    function loadMapScenario() {
        var loc1 = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

        var navigationBarMode1 = Microsoft.Maps.NavigationBarMode;
        var map1 = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'BING MAPS KEY',
            navigationBarMode: navigationBarMode1.compact, //uncomment to show/hide compact navigation bar
            center: loc1,
            zoom: 16,
        });

        var loc2 = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

        var navigationBarMode2 = Microsoft.Maps.NavigationBarMode;
        var map2 = new Microsoft.Maps.Map(document.getElementById('myMap2'), {
            credentials: 'BING MAPS KEY',
            navigationBarMode: navigationBarMode2.compact, //uncomment to show/hide compact navigation bar
            mapTypeId: Microsoft.Maps.MapTypeId.aerial,
            center: loc2,
            zoom: 16,
        });
    }
</script>

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>

Since both maps are using identical coordinates and NavigationBarModes you don't need to duplicate these variables which would save a couple of lines:

<script>
    function loadMapScenario() {
        var loc = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

        var navigationBarMode = Microsoft.Maps.NavigationBarMode;

        var map1 = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'BING MAPS KEY',
            navigationBarMode: navigationBarMode.compact, 
            center: loc1,
            zoom: 16,
        });

        var map2 = new Microsoft.Maps.Map(document.getElementById('myMap2'), {
            credentials: 'BING MAPS KEY',
            navigationBarMode: navigationBarMode.compact, // use 'navigationBarMode' instead of 'navigationBarMode2'
            mapTypeId: Microsoft.Maps.MapTypeId.aerial,
            center: loc, // use 'loc' instead of 'loc2'
            zoom: 16,
        });
    }
</script>

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>