Googlemaps tutorial

Google Maps API 使ってみた

Hiroki Kouchi
2012/08/18

自己紹介

name Hiroki Kouchi

age 26（社会人4年生）

Twitter _hkouchi

work iOS Application Developer

hobby Application Development
(iOS, Android, Web)

本スライドの背景

某友人の一言。

「Google Maps API
使ってみたいんだけど。」

本スライドの背景

普段なら手伝うわけがない！ｗ

いくつか興味があったんです。

興味を持ってた事

JavaScript全然書いた事ない

Googleの技術に
あんまり触れた事がない・・・
（それこそAndroidくらい）

Sublime Text 2使ってみたい

お盆休みもあるし、
ちょっとやってみっか！

なんか地図っぽいのが
表示されればいいや！
（おい

やってみた事

MAMPの環境構築

Google Maps JavaScript API の
サンプルを実行

MAMP

Webサーバー一式のパッケージ
（Mac用）

WindowsでいうXAMPP

Localで動かすだけならこれで十分

インストールして実行してみる
http://www.mamp.info/en/index.html

こんなページが開かれる
http://localhost:8888/MAMP/?language=Japanese

Google Maps API

地図のアレだよ、アレ！

日本語ドキュメントも充実
https://developers.google.com/maps/
documentation/javascript/services

このチュートリアル
をやってみます

チュートリアルのコードは
こんな感じ

とりあえず動かしてみる

DocumentRoot
/Application/MAMP/htdocs

作成したHTMLを設置。
/Application/MAMP/htdocs/practice/geocoding.html

以下にアクセスしてみる

http://localhost:8888/practice/geocoding.html

意外と簡単・・・？

Mapの初期化は、以下を引数とする

表示させたいタグ

オプション（ハッシュ形式）

ズームのレベル

中央に表示させたい場所

Mapのタイプ

マーカー置いてみる

追加分

動かしてみる

http://localhost:8888/practice/geocoding2.html

やっぱ簡単・・・？

Markerの初期化は、以下を引数とする

経度緯度

Mapオブジェクト

title

ジオコーディング

住所から経度緯度の情報へ変換して
くれる処理のこと

静的処理／動的処理がある

今回は静的処理だけやってみた

ジオコーディング

ドキュメント
https://developers.google.com/maps/documentation/

geocoding/index

リクエスト
http://maps.googleapis.com/maps/api/geocode/json?
address=天王洲アイル駅&sensor=false

これだけでJSONが返ってきた！

注意事項

1日のリクエスト数には制限有り
無料ユーザ： 2,500件
有料ユーザ： 100,000件

制限を超えた場合、
一時的に利用停止となるらしい

とりあえずここまでしかやってません！

所感

APIはシンプルで使いやすい

ジオコーディングやマーカー等も使
えると世界が広がりそう

Googleの地図情報を自分達で
利用できるのはとても面白い！

Google Mapsは多用されてるサービス

興味を持った人は、
一度触ってみては如何でしょう！

あれを忘れてませんか

Sublime Text 2 を使ってみた

軽く使ってみての所感

行った設定とか軽く紹介

Sublime Text 2 って？

最近正式リリースされて、
人気急上昇なエディタ

Vimやemacsみたいに、
自分でもりもりカスタマイズして
使うエディタのようだ！

導入にあたって

メリットって何？

デメリットってあるの？

そもそも何が便利なの？

わからないことだらけ・・・

とにかく使ってみようじゃないか！

設定とか紹介

・Command + , で設定が開ける
・設定はJSON形式で記述
{
"font_size": 12.0,
"highlight_line": true,
"highlight_modified_tabs": true,
"tab_size": 4,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true
}

Pluginなど

まずPackage Controlを導入
http://wbond.net/sublime_packages/package_control/
installation

導入後
Sublime Text 2
> Preferences
> Package Control

導入後

Package Control: Install Package

導入後

インストールしたいパッケージ名を入力
それだけ！

インストールしたPackage

All Autocomplete
開いている全てのファイルから補完

BracketHighlighter
選択中のタグや括弧の強調表示

使ってみた所感

やっぱデザインが好き（見やすい）

一度入力した単語を補完してくれる
のが地味にありがたい

選択中のタグ、ラインの強調

軽い！（これ凄い大事）

使ってみるべき機能

スニペット関連が便利らしい・・・

他に便利なパッケージがあれば
使ってみたいところ

コマンドとの連携も試してみたい
普段コマンドを使う人は重宝しそう

便利なツールはどんどん使って、
生産性をもっと高めていきましょう！

本当に、お疲れ様でした。

Googlemaps tutorial

More Related Content

Viewers also liked

Similar to Googlemaps tutorial

Googlemaps tutorial

Editor's Notes