[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

関連記事

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

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

記事を読む

[Dreamweaver] 便利な検索&置換

Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが

記事を読む

[HTML]デザインは、やはり大切だった!

デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ

記事を読む

[jQuery] クリックしたところから波紋が広がるプラグイン!

Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま

記事を読む

[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン

rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ

記事を読む

[Dreamweaver] コーディングを早くする5つの方法

コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ

記事を読む

[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint

FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの

記事を読む

[CSS] CSS3のtransitionを使ってみよう!

CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア

記事を読む

[jQuery] Block Scrollプラグイン

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

記事を読む

[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]

jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え

記事を読む

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 ↑