Angularで地図を表示する手順。【GoogleMapを利用】

      2017/12/02




Angular2でGoogleMapを利用する手順を記事にします。

npmを使ってインストールする。

npm install angular2-google-maps --save

 

Google Cloud Platformにプロジェクトは、作っておく。

そして ここにアクセスして、アクセスキーを取得します。

 

対象のプロジェクトでAPIを有効にします。(もしかしたらすでに有効になってるかも)

Google Maps JavaScript APIが有効になってればOKです。

ライブラリの検索ボックスで Google Maps JavaScript APIを検索し

有効にする

 

app.module.tsに下記の赤文字を追加

Api部分には、先ほど取得したApiを入れる

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AgmCoreModule } from 'angular2-google-maps/core';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyBHj3O0qt5JyW848IRM-xxxxxxxxxx-SJX2o'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

app.component.cssに下記を追加 表示する高さを 300px

.sebm-google-map-container {
  height: 300px;
}

 

app.component.tsに赤文字を追加

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title: string = 'My first angular2-google-maps project';
  lat: number = 51.678418;
  lng: number = 7.809007;
}

 

app.component.html内に赤文字を追加

<h1>
  {{title}}
</h1>
<sebm-google-map [latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

サーバ立ち上げてアクセスするとGoogleMapが表示されました。

 

The following two tabs change content below.

まーちゃん masa

岐阜在住のバツイチ、転職5回、人生後半戦の人生経験豊富なブロガーです。 自分が経験した中で感じたことや考えたことで、お役に立ちそうな記事を執筆していこうと思ってます。 twitterのフォローもお願いいたします。

 - Angular