Help us understand the problem. What is going on with this article?

Angular Google Maps の HelloWorldメモ(2016/11/26時点)

More than 3 years have passed since last update.

Angular Google Maps で最低限のページを作る

とても苦労したので自分用にメモです。

使用環境

OS: Windows10 Education 64bit
IDE: Microsoft Visual Studio 2015 Community
Node.js: v6.9.1
AngularJS: v1.5.8
angular-google-maps: v2.4.0

下準備

Angular Google Mapsのインストール

コマンドプロンプトから、ページを作るフォルダで以下のようにインストールします。

bower install angular-google-maps

Google MapのAPIキーを取得

2016年6月22日より、APIキーの取得が必要になったようです。キーがないと正しく表示されない場合があります。GoogleマップのAPIキーのエラーが出る時の対処法を参考にしました。(閲覧日: 2016/11/26)

Google Maps APIsのページに行き、"GET A KEY"ボタンを押して、必要に応じてプロジェクトを作成・選択しAPIを有効にします。取得したキーの文字列は後で使用しますので、メモしておきます。

コーディング

HTML

index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8" />
    <title>AngularJS</title>
    <link rel="stylesheet" href="css/map.css" />
    <!-- Google Map API キーが必要-->
    <script src='//maps.googleapis.com/maps/api/js?sensor=false&取得したキー'></script>
    <script src="bower_components/lodash/dist/lodash.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-simple-logger/dist/angular-simple-logger.min.js"></script>
    <script src="bower_components/angular-google-maps/dist/angular-google-maps.min.js"></script>
    <script src="scripts/map.js"></script>
</head>
<body ng-controller="MyController">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options">
    </ui-gmap-google-map>
</body>
</html>

上記コードの、

<script src='//maps.googleapis.com/maps/api/js?sensor=false&"取得したキー"'></script>

の部分に、先ほど取得したGoogle Maps APIのキーを入力します。これがないと正しく表示されません。

JavaScript

map.js
var myApp = angular.module('myApp', ['uiGmapgoogle-maps'])

myApp.controller('MyController', ['$scope', 'uiGmapGoogleMapApi', map]);
function map($scope, uiGmapGoogleMapApi) {

    var latlng = new google.maps.LatLng(35.893868, 139.952540);//柏の葉キャンパス駅
    $scope.map = {
        zoom: 14,// 縮尺の度合い
        center: latlng,// 中心座標
        disableDefaultUI: true, // デフォルトのUIの有効/無効
        mapTypeId: google.maps.MapTypeId.ROADMAP // マップのタイプ
    };

}

CSS

map.css
.angular-google-map-container {
  height: 400px;
  width: 600px;
}

表示するマップの高さ・幅を指定してあげないといけないようです。

実行

実行画面
実行画面

参考ページ

dtamura
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした