[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

関連記事

no image

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

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

記事を読む

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

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

記事を読む

[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!

柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ

記事を読む

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

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

記事を読む

[Dreamweaver] サイトタイトルを入力する枠を広げる!

デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ

記事を読む

[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する

カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_

記事を読む

[Dreamweaver] 便利な検索&置換

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

記事を読む

[CSS] clearfixの使い方を考える

現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな

記事を読む

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

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

記事を読む

[Swift] 関数型プログラミング

関数型プログラミングについて、ストーリー仕立ての面白い記事がありましたので紹介します。 IQ1

記事を読む

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 ↑