Menu
I have an Angular 2 component that is defined in the file comp.ts in this way like this:
import {Component} from 'angular2/core';
@component({
selector:'my-comp',
templateUrl:'comp.html'
})
export class MyComp{
constructor(){
}
}
Because I want the component to show a google map, I have inserted in the file comp.html the following code:
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
This code has been copied from this link http://www.w3schools.com/googleAPI/google_maps_basic.asp. The problem is that the component doesn't show the map. What have I done wrong?
970
Google Maps can be integrated totally free to any app.
Yeah, you could do so. But there would be an error in typescript compiler, so don't forget to implicitly declare google variable.
declare var google: any; add this directive right after component import.
import { Component, OnInit } from '@angular/core'; declare var google: any; @Component({ moduleId: module.id, selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] }) export class AppComponent implements OnInit { ngOnInit() { var mapProp = { center: new google.maps.LatLng(51.508742, -0.120850), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("gmap"), mapProp); } } I have found a solution. First of all, the following line:
<script src="http://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]"></script> must be inserted in the index.html file. The code which creates the map must be inserted in the comp.ts file. In particular, it must be inserted in a special method, namely "ngOnInit", which can be positioned after the constructor of the class. This is comp.ts:
import { Component } from 'angular2/core'; declare const google: any; @Component({ selector: 'my-app', templateUrl:'appHtml/app.html', styleUrls: ['css/app.css'] }) export class AppMainComponent { constructor() {} ngOnInit() { let mapProp = { center: new google.maps.LatLng(51.508742, -0.120850), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; let map = new google.maps.Map(document.getElementById("googleMap"), mapProp); } } Finally, the div with id "googleMap", which is going to contain the google map, must be inserted in the comp.html file, which will look like this:
<body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With