none
Bing Maps not showing up - Angular4 RRS feed

  • Question

  • hello,

    I am trying to get the bing maps to show in my sample application using Angular4 but for some reason it's not working. Attached are all the files. Specifically, I would assume the issue is with this block: 

        var map;
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'Bing Map Key - I removed it here'
        });

    component

    /// <reference path="../../node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts" />
    
    import { Component, OnInit, ViewChild } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
    })
    export class AppComponent implements OnInit {
      title = 'My App';
      @ViewChild('myMap') myMap;
      
      ngOnInit () {
    
      }
    
      ngAfterViewInit(){
        var map;
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'Bing Map Key - I removed it here'
        });
      }
      
    }
    
    component html
    <p>component works!</p>

    index

    <!DOCTYPE html>
    <html>
        <head>
            <title>My Sample App</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
            <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental' async defer></script>
            <script>
                System.import('app').catch(function(err){ console.error(err); });
            </script>
        </head>
        <body>        
            <app-root>Loading...
                <div id="myMap" style='width: 100%; height: 500px;'></div>`
    
    
            </app-root>  
        </body>
    </html>
    Currently, only the component html shows up. 

    Friday, August 10, 2018 9:28 PM

All replies