AzureMapsCodeSamples/Map/Multiple Maps.html

﻿<!DOCTYPE html>
<html>
<head>
    <title>Multiple Maps - Azure Maps Web SDK Samples</title>

    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="This sample shows how to render multiple maps on the same page." />
    <meta name="keywords" content="map, gis, API, SDK, multiple" />
    <meta name="author" content="Microsoft Azure Maps" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

    <script type='text/javascript'>
        var map, map2;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                view: 'Auto',
				
				//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Initialize asecond map instance.
            map2 = new atlas.Map('myMap2', {
                center: [-122.33, 47.6],
                zoom: 12,
                style: 'satellite_road_labels',
                view: 'Auto',
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });
        }
    </script>
    <style>
        #myMap, #myMap2 {
            position: relative;
            width: calc(50% - 5px);
            min-width: 170px;
            height: 600px;
            float: left;
        }

        #myMap2 {
            margin-left: 10px;
        }
    </style>
</head>
<body onload="GetMap()">
    <div id="myMap"></div>

    <div id="myMap2"></div>
    
    <div style="clear:both;"></div>

    <fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
        <legend>Multiple Maps</legend>
        This sample shows how to render multiple maps on the same page.
    </fieldset>
</body>
</html>