Bing Map

基本的な Bing Maps 　別枠表示　参考

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script>
  var map;
  function GetMap() {
    map = new Microsoft.Maps.Map('#myMap', {
      center: new Microsoft.Maps.Location(35.360631, 138.727307), 
      zoom: 9
    });
  }
  </script>
  <script type='text/javascript' 
    src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=【 Bing Maps Key】' 
    async defer></script>
</head>
<body>
  <div id="myMap" style="width:800px;height:600px;"></div>
</body>
</html>

Infobox を表示　別枠表示　参考

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Infobox : basic</title>
  <meta charset="utf-8">
  <style>
    html,body{height:100%;}
    body{padding:0;margin:0;background:#272;}
    h1{padding:0;margin:0;font-size:50%;color:white;}
    #myMap{ position:absolute;top:18px;right:5px;bottom:5px;left:5px;width:auto;height:auto; }
  </style>
</head>
<body>
<h1>Infobox : basic</h1>
<div id="myMap"></div>
<!-- [ infobox Object ] https://msdn.microsoft.com/en-us/library/mt712658.aspx -->
  <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=【 Bing Maps Key】' async defer></script>
<script>
//Maps Init
function GetMap() {
    let map = new Microsoft.Maps.Map('#myMap', {
        center: new Microsoft.Maps.Location(35.360631, 138.727307), // 富士山
        zoom: 11
    });

    //Get MAP Infomation
    let center = map.getCenter();

    //infobox
    let infobox = new Microsoft.Maps.Infobox(center, {
        title: '富士山',
        description: 'ここは富士山山頂です'
    });
    infobox.setMap(map); //Add infobox to Map
}
</script>
</body>
</html>

経路検索　別枠表示　参考

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Directions Input Panel</title>
  <style>
    html,body{height:100%;}
    body{padding:0;margin:0;background:#272;}
    h1{padding:0;margin:0;font-size:50%;color:white;}
    main{ display:flex;  position:absolute;top:18px;right:5px;bottom:5px;left:5px;width:auto;height:auto; }
    .directionsContainer{ flex-basis :360px; overflow-y:auto; background:white; padding-left:15px; }
    #myMap{ flex:9;  }
</style>
</head>
<body>
<h1>Directions Input Panel</h1>
<main>
<div class="directionsContainer">
    <div id="directionsPanel"></div>
    <div id="directionsItinerary"></div>
</div>
<div id="myMap"></div>
</main>

<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=【 Bing Maps Key】' async defer></script>
<script>
let map,directionsManager;
function GetMap() {
    map = new Microsoft.Maps.Map('#myMap', {
        center: new Microsoft.Maps.Location(35.360631, 138.727307), // 富士山
        zoom: 11,
        mapTypeId: Microsoft.Maps.MapTypeId.aerial
    });
    //Load the directions module.
    Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
        //Create an instance of the directions manager.
        directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
        //Specify where to display the route instructions.
        directionsManager.setRenderOptions({itineraryContainer: '#directionsItinerary'});
        //Specify the where to display the input panel
        directionsManager.showInputPanel('directionsPanel');
    });
}
</script>
</body>
</html>

地図に描き込む　別枠表示　参考

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Display Drawing Toolbar on Map</title>
  <style>
    html,body{height:100%;}
    body{ padding:0;margin:0;background:#272; }
    h1{ padding:4px;margin:0;font-size:60%;color:white; }
    #myMap{ position:absolute;top:32px;right:5px;bottom:5px;left:5px;width:auto;height:auto; }    
  </style>
</head>
<body>
  <h1>map に描き込む　<input type="text" id="from" value="東京駅"> <button id="get">Search</button></h1>
  <div id="main">
    <div id="myMap"></div>
  </div>

<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=【 Bing Maps Key】' async defer></script>
<script>
  let map, drawingManager,searchManager, bounds;
  function GetMap() {
    map = new Microsoft.Maps.Map('#myMap', {
        zoom: 16,
        center: new Microsoft.Maps.Location(35.681381, 139.766083), // 東京駅
   //     mapTypeId: Microsoft.Maps.MapTypeId.aerial
    });
    //Load the DrawingTools module
    Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
        //Create an instance of the DrawingTools class and bind it to the map.
        let tools = new Microsoft.Maps.DrawingTools(map);
        //Show the drawing toolbar and enable editting on the map.
        tools.showDrawingManager(function (manager) {
            //Store a reference to the drawing manager as it will be useful later.
            drawingManager = manager;
        })
    });
    geocodeQuery(document.getElementById("from").value);
  }
  //Geocode：Location
  function geocodeQuery(query) {
    //If search manager is not defined, load the search module.
    if (!searchManager) {
        //Create an instance of the search manager and call the geocodeQuery function again.
        Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
            searchManager = new Microsoft.Maps.Search.SearchManager(map);
            geocodeQuery(query);
        });
    } else {
        let searchRequest = {
            where: query,
            callback: function (r) {
                //Add the first result to the map and zoom into it.
                if (r && r.results && r.results.length > 0) {
                    var pin = new Microsoft.Maps.Pushpin(r.results[0].location);
                    map.entities.push(pin);
                    map.setView({ bounds: r.results[0].bestView });
                }
            },
            errorCallback: function (e) {
                alert("No results found.");
            }
        };
        //Make the geocode request.
        searchManager.geocode(searchRequest);
    }
  }
  //SearchButton
  document.getElementById("get").onclick = function(){
    geocodeQuery(document.getElementById("from").value);
  };
</script>
</body>
</html>