[javascript] Google Maps javascript API v3の使い方(基本編)

公開日: : javascript, Web制作

Google Maps javaScript API v3とは

Google Maps API V3 は、携帯端末で高速に読み込んで快適に動作するよう設計されています。特に、Android 搭載端末や iOS 搭載端末など、高機能の携帯端末を対象に開発されています。携帯端末のブラウザは通常のパソコンのブラウザよりも画面サイズが小さく、携帯端末に特有の操作もあります(ピンチイン/ピンチアウトなど)。

Googleのサイトではこのように説明されています。
今までのものよりも、よりスマホやタブレットを意識しているということになります。

スクリーンショット 2014-08-26 0.29.50

ちょっとだけ設置が面倒になったv3

今まではGoogle Mapで検索した場所を、「地図を共有する/埋め込む」からコードを取得して設置するだけで十分でした。
今でももちろん使えます。ただし、Chromeでは印刷で地図が表示されません。同じGoogleのものなのに・・・。

では、v3の設置を説明しましょう。
まず、これまでと変わった点としては、jsを読み込む必要があります。
head内に下記を読み込みましょう。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

最後のsensor=trueの部分は、スマホなどでGPSを使用するかということです。trueかfalseで、省略は不可と説明している方もいましたがGoogleの公式サンプルでは省略されていました。
不安な場合は、入れておきましょう。

Google Maps javaScript API v3 デベロッパーズガイド

そして、各種パラメータ等が多数存在しているのですが、今回は基本的な設置までの説明としますので、いろいろ省いて簡単に説明します。
上記のソースの下に下記を追加します。

<script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

そして、HTMLは下記になります。

<div id="map-canvas"></div>

これだけで、表示は可能です。
勘のいい方はもうわかると思いますが、google.maps.LatLng(-34.397, 150.644)で座標を決めています。
座標の調べ方は、色々ありますが、もっとも簡単で正確なのは、Google Mapで検索した際にURLに出ています。

https://www.google.co.jp/maps/place/札幌国際ビル貸会議室/@43.066011,141.350301,17z/data=!3m1!4b1!4m2!3m1!1s0x5f0b297578f45c63:0xebad5d9ea4e4a64c?hl=ja
こういう風に出るのですが、@の後ろ二つが座標です。43.066011,141.350301ここです。そして、17zは倍率です。
この倍率をv3のコードで設定したい場合は、zoomの数字を17に合わせればいいでしょう。

map-canvasの大きさなどはCSSで設定します。

まとめ

この他にも、マーカーを変更できたり、マップの色を変更できたりしますが、今回は本当に基本の地図を表示する部分だけを紹介しました。

機会があれば、もっと詳しく説明出来たらと思いますが、Googleのサンプルが結構充実しているので、気になる方はそちらを見てみるのもいいと思います。

Google Maps javaScript API v3 code sample

ad

関連記事

[CSS] animationを使ってみる!

色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色

記事を読む

[jQuery] Block Scrollプラグイン

今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll

記事を読む

[jQuery] 背景画像を画面いっぱいにするプラグイン

背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため

記事を読む

[CSS] メディアクエリ(Media Queries)を考える

Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を

記事を読む

[jQuery] クリック時に波紋のような効果をつける

今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple

記事を読む

[jQuery] FlickerPlateを紹介します。

かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い

記事を読む

[HTML] 初心者を脱却するためのHTMLの心構え!

デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]

完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[WordPress] 管理画面にテーブル(WP_List_Table)を表示する

WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑