スキップしてメイン コンテンツに移動

Google Maps API を使うために最低限必要な知識とは

Google Maps APIを使うためには、最低限必要となってくる知識がいくつかあります。
地図を表示させたいプラットフォームによって必要な知識は異なりますので、今回は「ウェブ」上で地図を表示させる時に必要な知識について解説します。



まず、「ウェブ」上で地図を表示させるには、フロントで見える部分(HTML、CSS、JavaScript)の技術が必要となります。
プログラム未経験でも、もっとも入門しやすいのがこのフロントの部分なので、まずはここからしっかりと始めてみてください。
以下、入門サイトをピックアップしましたので是非参考にしてみてください。

準備するもの

・webブラウザ(IE、Google Chrome、Firefox、Safariなど)
※Chromeをオススメします!(インストールはこちら )
・エディタ(メモ帳、テキストエディット、サクラエディタ、mi、Sublime Text、vimなど)

HTML

「構造」を記述。
HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ、HTML(エイチティーエムエル))は、専らHTTPが利用されるWWWのハイパーテキストの記述に使われているマークアップ言語である(1990年代後半頃からはコンテンツという語も利用されている(「中身」という意味の語であり、御大層な意味は無い))。ハイパーリンクや画像等のメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。
wikipediaより引用
HTMLクイックリファレンス
やさしいホームページ入門
ドットインストールHTML入門
初心者のためのHTML/CSS入門!ゼロからの基礎知識と上達のコツ

CSS

「装飾」を記述。
Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、以下のような特徴を持つ。
wikipediaより引用
HTMLクイックリファレンス
CSS入門
ドットインストールHTML入門
CSSリファレンス

JavaScript

「動的な処理」を記述。
※Google Maps JavaScript APIでは、ここに地図や地図に表示させたいコンテンツの描画及び、動作の指示を書きます。
JavaScriptとは、プログラミング言語のひとつである。Javaと名前が似ているが、異なるプログラミング言語である(後述の#歴史を参照)。 一般的に、プロトタイプベースのオブジェクト指向スクリプト言語であると言われている。しかし、コンストラクタなどのクラスベースに見られる機能も取り込んでいる。 実行環境が主にウェブブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられる。
wikipediaより引用

JavaScript入門
サンプルで学ぶJavaScript入門
ドットインストールJavaScript入門
JavaScript入門 - エンジニアの入り口

上記フロント部分の基礎がしっかり出来ていれば、Google Maps API(ウェブ)は、問題なく使用できると思います。
ブロント部分の入門は、とても敷居が低いと思いますので、チャレンジしてみてください。
またGoole Mapsの基本、Google マイマップの使い方を知ることで、Google Maps APIで使用する基本的な地図の機能を知ることができます。
複数回に分けて、それぞれの解説を行なっています。 是非参考にしてください。

Google Maps
Google マイマップ