Geek Answers Handbook

How to add Bing Maps v8 in Angular 2.0?

I want to add Bing Map V8 to my Anguar 2.0 project. I want to know what I need to do to add Bing Map V8 to an Angular 2.0 project. I attached my implementation. Failed to load the component that I created. How to link to Microsoft.Maps.Map?

Here is an example of v8 bing mapping. Everything works well if you save the following example as HTML. The bin card key has been truncated.

<!DOCTYPE html> <html> <head> <title>addOneLayerItemHTML</title> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> </head> <body> <div id='printoutPanel'></div> <div id='myMap' style='width: 100vw; height: 100vh;'></div> <script type='text/javascript'> function loadMapScenario() { var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'My Bing Map Key - I removed here' }); var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null); var layer = new Microsoft.Maps.Layer(); layer.add(pushpin); map.layers.insert(layer); } </script> <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script> </body> </html>

This is the file that I created as map.component.html.

 <div class='panel panel-primary'> <div class='panel-heading'> {{pageTitle}} </div> <div id='myMap' style='width: 100vw; height: 100vh;'></div> </div>

Here is the file I created as map.component.ts.

 import { Component, OnInit } from 'angular2/core'; @Component({ selector: 'pm-map', templateUrl: 'app/bingmap/map.component.html' }) export class MapComponent implements OnInit { public pageTitle: string = "Map"; var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'Bing Map Key - I removed it here' }); var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null); var layer = new Microsoft.Maps.Layer(); layer.add(pushpin); map.layers.insert(layer); }
+5
source share
3 answers

Your code is almost normal, you just need a few modifications

1- in index.html remove callback function and div

 <div id='myMap' style='width: 100vw; height: 100vh;'></div> <script type='text/javascript'> function loadMapScenario() { var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'My Bing Map Key - I removed here' }); var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null); var layer = new Microsoft.Maps.Layer(); layer.add(pushpin); map.layers.insert(layer); } </script>

Also, in index.html remove the callback parameter from the script import.

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

Be:

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

Now you have the script loaded, all you have to do is create a map in your component

 @Component({ selector: 'pm-map', template: ` <div class='panel panel-primary'> <div class='panel-heading'> {{pageTitle}} </div> <div #myMap style='width: 100%; height: 500px;'></div> </div>` }) export class MapComponent implements OnInit { @ViewChild('myMap') myMap; // using ViewChild to reference the div instead of setting an id public pageTitle: string = "Map"; ngAfterViewInit(){ // after the view completes initializaion, create the map var map = new Microsoft.Maps.Map(this.myMap.nativeElement, { credentials: 'Bing Map Key - I removed it here' }); var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null); var layer = new Microsoft.Maps.Layer(); layer.add(pushpin); map.layers.insert(layer); } }

check it in this panel

+4
source

There is a community of efforts to create Angular2 directives for Bing Maps. Still in alpha, but the basic demo can be found here: http://ng2-bingmaps.azurewebsites.net/

The Github repository is here: https://github.com/youjustgo/ng2-bingmaps

+2
source

First I tried the accepted answer and ran into a problem that some people had in the comments, where when loading 'prototype' it was null.

At first I solved this using try / catch with setTimeout in catch, which will try to load bing in a second. It worked, but it was a very messy decision.

In the end, I looked for people loading Google Maps in angular to see if there was a better solution. Fortunately, there are promises and uses.

The solution that worked for me was found here in this answer. Full credit for them goes to them.

First create a service to download your map ...

forklift card-service.service

 import { Injectable } from '@angular/core'; const url = 'http://www.bing.com/api/maps/mapcontrol?callback=__onBingLoaded&branch=release'; @Injectable() export class BingMapsLoader { private static promise; public static load() { // First time 'load' is called? if (!BingMapsLoader.promise) { // Make promise to load BingMapsLoader.promise = new Promise( resolve => { // Set callback for when bing maps is loaded. window['__onBingLoaded'] = (ev) => { resolve('Bing Maps API loaded'); }; const node = document.createElement('script'); node.src = url; node.type = 'text/javascript'; node.async = true; node.defer = true; document.getElementsByTagName('head')[0].appendChild(node); }); } // Always return promise. When 'load' is called many times, the promise is already resolved. return BingMapsLoader.promise; } }

In the parent component, the component containing the bing map element has this code ...

 import { BingMapsLoader } from './services/map-loader-service/map-loader-service.service'; export class BingMapParentComponent { mapReady = false; constructor() { BingMapsLoader.load() .then(res => { console.log('BingMapsLoader.load.then', res); this.mapReady = true; }); } }

In addition, the template of the parent component has this code, which will prevent the initialization of the component of binge cards until it is ready.

 <app-bing-map *ngIf='mapReady'></app-bing-map>

Now, at bing-map.component , we want to wait until the component is in the DOM before loading the map.

 ngOnInit() { if (typeof Microsoft !== 'undefined') { console.log('BingMapComponent.ngOnInit'); this.loadMap(); } }

And finally, you upload the bing map to bing-map.component

 loadMap() { this.map = new Microsoft.Maps.Map(document.getElementById('mapId'), { credentials: 'Your Bing Maps Key Here', }); }
+1
source

More articles:


All Articles